Merge pull request #318 from georgetown-cset/fix-loading-indicator

Make loading indicator display earlier

github-metrics/src/components/dashboard.test.js

@@ -19,11 +19,11 @@ describe("filter panel", () => {
     let topReposHeading;
     let topEntries
 
-    expect(screen.getByRole("heading", { name: currentlyTrackingHeading(413, "artificial intelligence") })).toBeVisible();
+    expect(screen.getByRole("heading", { name: currentlyTrackingHeading(703, "artificial intelligence") })).toBeVisible();
     topReposHeading = screen.getByRole("heading", { name: "Top repositories by stars" });
     topEntries = getAllByRole(topReposHeading.parentElement, "listitem");
-    expect(topEntries[0].textContent).toEqual("facebook/react215865 stars (-32.65%, 2022-2023)");
-    expect(topEntries[1].textContent).toEqual("tensorflow/tensorflow179194 stars (-11.62%, 2022-2023)");
+    expect(topEntries[0].textContent).toEqual("facebook/react222142 stars (-16.49%, 2022-2023)");
+    expect(topEntries[1].textContent).toEqual("tensorflow/tensorflow182621 stars (+11.70%, 2022-2023)");
 
     await user.click(screen.getByRole('combobox'));
     expect(screen.getByText("Astrobiology")).toBeVisible();
@@ -32,11 +32,11 @@ describe("filter panel", () => {
     });
     await new Promise(res => setTimeout(res, 500));
 
-    expect(screen.getByRole("heading", { name: currentlyTrackingHeading(59, "astrobiology") })).toBeVisible();
+    expect(screen.getByRole("heading", { name: currentlyTrackingHeading(113, "astrobiology") })).toBeVisible();
     topReposHeading = screen.getByRole("heading", { name: "Top repositories by stars" });
     topEntries = getAllByRole(topReposHeading.parentElement, "listitem");
-    expect(topEntries[0].textContent).toEqual("astropy/astropy4028 stars (-46.90%, 2022-2023)");
-    expect(topEntries[1].textContent).toEqual("dfm/emcee1384 stars (-16.50%, 2022-2023)");
+    expect(topEntries[0].textContent).toEqual("google/jax28045 stars (-11.73%, 2022-2023)");
+    expect(topEntries[1].textContent).toEqual("astropy/astropy4220 stars (-28.72%, 2022-2023)");
   });
 
 
@@ -45,7 +45,7 @@ describe("filter panel", () => {
       <Dashboard />
     );
 
-    expect(screen.getByRole("heading", { name: currentlyTrackingHeading(59, "astrobiology") })).toBeVisible();
+    expect(screen.getByRole("heading", { name: currentlyTrackingHeading(113, "astrobiology") })).toBeVisible();
 
     await user.click(screen.getByRole('checkbox'));
     await new Promise(res => setTimeout(res, 500));
@@ -54,7 +54,7 @@ describe("filter panel", () => {
 
     const cards = screen.getAllByTestId("project-card");
     expect(getByRole(cards[0], "heading", { name: "hannorein/rebound" })).toBeVisible();
-    expect(cards[0].textContent).toContain("Stars: 570");
+    expect(cards[0].textContent).toContain("Stars: 768");
     expect(cards[0].textContent).toContain("Top Programming Language: C");
     expect(cards[0].textContent).toContain("Commits over time");
     expect(getByRole(cards[1], "heading", { name: "jlillo/tpfplotter" })).toBeVisible();
@@ -78,7 +78,7 @@ describe("filter panel", () => {
     await user.click(getByRole(dropdownList, 'option', { name: "Open issues and PRs" }));
 
     cards = screen.getAllByTestId("project-card");
-    expect(getByRole(cards[0], "heading", { name: "astropy/astropy" })).toBeVisible();
+    expect(getByRole(cards[0], "heading", { name: "google/jax" })).toBeVisible();
 
   });
 
@@ -89,7 +89,7 @@ describe("filter panel", () => {
     );
 
     let cards = screen.getAllByTestId("project-card");
-    expect(getByRole(cards[0], "heading", { name: "astropy/astropy" })).toBeVisible();
+    expect(getByRole(cards[0], "heading", { name: "google/jax" })).toBeVisible();
     expect(cards[0].textContent).toContain("Commits over time");
 
     await user.click(screen.getByRole('button', { name: "Show graphs for Commits over time" }));
@@ -123,10 +123,10 @@ describe("filter panel", () => {
 
     // Check prior state
     let topPanel = screen.getByTestId('top-panel');
-    expect(getByText(topPanel, "Showing 59 repositories", { exact: false })).toBeVisible();
+    expect(getByText(topPanel, "Showing 113 repositories", { exact: false })).toBeVisible();
     let cards = screen.getAllByTestId("project-card");
     expect(cards.length).toEqual(10); // Pagination shows only 10 per page
-    expect(getByRole(cards[0], "heading", { name: "astropy/astropy" })).toBeVisible();
+    expect(getByRole(cards[0], "heading", { name: "google/jax" })).toBeVisible();
 
     // Filter by language
     await user.click(screen.getByRole('button', { name: "Filter by top programming language All" }));
@@ -135,10 +135,10 @@ describe("filter panel", () => {
     await user.click(getByRole(languageDropdownList, 'option', { name: "C++" }));
 
     topPanel = screen.getByTestId('top-panel');
-    expect(getByText(topPanel, "Showing 2 repositories", { exact: false })).toBeVisible();
+    expect(getByText(topPanel, "Showing 7 repositories", { exact: false })).toBeVisible();
     cards = screen.getAllByTestId("project-card");
-    expect(cards.length).toEqual(2);
-    expect(getByRole(cards[0], "heading", { name: "exoplanet-dev/celerite2" })).toBeVisible();
+    expect(cards.length).toEqual(7);
+    expect(getByRole(cards[0], "heading", { name: "dfm/george" })).toBeVisible();
 
     // Filter by license
     await user.click(screen.getByRole('button', { name: "Filter by license All" }));

github-metrics/src/data/config.json

@@ -1 +1 @@
-{"start_year": 2017, "end_year": 2023, "last_updated": "December 19, 2023"}
+{"start_year": 2017, "end_year": 2023, "last_updated": "June 10, 2024"}

github-metrics/src/data/fields.json

@@ -1 +1 @@
-["Computer graphics (images)", "Botany", "Financial system", "Radiology", "Condensed matter physics", "Computer security", "Artificial intelligence", "Cardiology", "Geophysics", "Surgery", "Acoustics", "Consumption of Energy and Resources", "Epistemology", "Natural Resources", "Econometrics", "Quantum electrodynamics", "Finance", "Nuclear magnetic resonance", "Pattern recognition", "Knowledge management", "Climate and Earth Science", "Simulation", "Control theory", "International economics", "Cognitive science", "Computational biology", "Immunology", "Reliability engineering", "ai_safety", "Anatomy", "Linguistics", "Meteorology", "Machine learning", "Quantum mechanics", "Financial economics", "Ecology", "Zoology", "Optics", "Sustainable Development", "Speech recognition", "Bioinformatics", "Mathematical analysis", "Computational chemistry", "Atmospheric sciences", "Organic chemistry", "Topology", "Pharmacology", "Operating system", "Natural language processing", "Hydrology", "Software engineering", "Embedded system", "Computational physics", "Nuclear physics", "Earth Systems", "Algebra", "Distributed computing", "Parallel computing", "Astrobiology", "Genetics", "Industrial Ecology", "weto", "Food science", "Oceanography", "Virology", "Astrophysics", "Cell biology", "World Wide Web", "Multimedia", "Gender studies", "Thermodynamics", "Water resource management", "Neuroscience", "Visual arts", "Computer vision", "Energy Storage", "Renewable Energy", "Information retrieval", "Cancer research", "Microbiology", "Mathematical optimization", "Molecular biology", "Energy Systems", "Social science", "Transport engineering", "Pathology", "riscv", "Evolutionary biology", "Automotive engineering", "Advertising", "Classics", "Media studies", "Geometry", "Social psychology", "Particle physics", "Data science", "Agronomy", "Remote sensing", "Astronomy", "Medical education", "Emissions", "Theoretical computer science"]
+["Computer vision", "Financial economics", "Agronomy", "Astrobiology", "Earth Systems", "Botany", "Mathematical analysis", "Media studies", "Oceanography", "Quantum electrodynamics", "Energy Storage", "Endocrinology", "Calculus", "Social psychology", "Distributed computing", "Geomorphology", "Linguistics", "Surgery", "Economic history", "Natural Resources", "Transport engineering", "Gender studies", "Ecology", "Embedded system", "Computational physics", "Pharmacology", "Epistemology", "Geophysics", "Multimedia", "Virology", "Simulation", "Visual arts", "Physical chemistry", "Oncology", "Remote sensing", "Cardiology", "Machine learning", "Nuclear magnetic resonance", "Medical education", "Particle physics", "Financial system", "Chemical physics", "ai_safety", "Computer graphics (images)", "Cell biology", "Quantum mechanics", "Pathology", "Artificial intelligence", "Econometrics", "Speech recognition", "Software engineering", "Microbiology", "Computational biology", "Data science", "Mathematical optimization", "riscv", "Computer security", "International economics", "Cancer research", "Natural language processing", "Sustainable Development", "Geometry", "Evolutionary biology", "Immunology", "Genetics", "Climate and Earth Science", "Cognitive science", "Anatomy", "Organic chemistry", "Topology", "Theoretical computer science", "Classics", "Meteorology", "Molecular biology", "Renewable Energy", "Control theory", "Seismology", "Hydrology", "Food science", "Atmospheric sciences", "Ceramic materials", "Knowledge management", "Emissions", "Paleontology", "Industrial Ecology", "Finance", "Optics", "Political economy", "Pattern recognition", "Parallel computing", "Acoustics", "Thermodynamics", "Automotive engineering", "weto", "Consumption of Energy and Resources", "Nuclear physics", "Condensed matter physics", "Radiology", "Molecular physics", "Advertising", "Operating system", "Energy Systems", "Bioinformatics", "Astronomy", "Astrophysics", "Algebra", "Law and economics", "Water resource management", "Agroforestry", "Theoretical physics", "Economic geography", "Reliability engineering", "Neuroscience", "Computational chemistry", "World Wide Web", "Social science", "Zoology", "Information retrieval"]

github-metrics/src/pages/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import {css} from "@emotion/react";
 
 import CircularProgress from "@mui/material/CircularProgress";
@@ -20,6 +20,11 @@ const styles = {
 };
 
 const IndexPage = () => {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    setLoaded(true);
+  }, [])
+
   const data = useStaticQuery(graphql`
     query {
       site {
@@ -46,6 +51,7 @@ const IndexPage = () => {
           Use the "Research Field" dropdown to pick a field to browse. ORCA defaults to <strong>summary view</strong>, a condensed view that presents key facts and figures for the top OSS projects associated with the research field you selected. Click the view toggle in the toolbar to switch to <strong>list view</strong>, which includes information on every OSS project associated with the research field you selected. Click on a project's "full profile" buttons to open in-depth data and graphs in <strong>detail view</strong>.
         </div>}
       />
+      {!loaded && <div css={styles.suspense}><CircularProgress/></div>}
       {(typeof window !== "undefined") &&
         <React.Suspense fallback={<div css={styles.suspense}><CircularProgress/></div>}>
           <Dashboard/>