Merge pull request #183 from georgetown-cset/101-add-group-average-ro…

…w-in-list-view Add rows to list view for selected groups
georgetown-cset · Feb 9, 2024 · 65dea2e · 65dea2e
2 parents c683072 + 452d610
commit 65dea2e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/web/gui-v2/src/components/ListViewTable.jsx b/web/gui-v2/src/components/ListViewTable.jsx
@@ -487,8 +487,16 @@ const ListViewTable = ({
   }, [JSON.stringify(currentFilters)]);
 
   // Filter the data for display.
-  const dataForTable = data.filter(row => filterRow(row, currentFilters));
-  const numRows = dataForTable.length;
+  const { rows: dataForTable, numCompanies } = useMemo(() => {
+    const companies = data.filter(row => filterRow(row, currentFilters));
+    const groups = currentFilters._groups.map(groupId => overallData.groups[groupId]);
+
+    return {
+      rows: [ ...companies, ...groups ],
+      numCompanies: companies.length,
+      numGroups: groups.length,
+    }
+  }, [currentFilters]);
   const totalRows = data.length;
 
   // The filter options available for each column, given the currently-applied
@@ -509,7 +517,7 @@ const ListViewTable = ({
           // possible filter options.  Otherwise, only show those that match
           // the other active filters.
           return (
-            numRows === 0 ||
+            numCompanies === 0 ||
             filterRow(row, otherFilters)
           );
         });
@@ -729,7 +737,7 @@ const ListViewTable = ({
         <div css={styles.buttonBarLeft}>
           <Typography css={styles.viewCount}>
             {windowSize >= 430 && <>Viewing </>}
-            {numRows !== totalRows ? `${numRows} of ${totalRows}` : totalRows} companies
+            {numCompanies !== totalRows ? `${numCompanies} of ${totalRows}` : totalRows} companies
             {activeFilters.length > 0 &&
               <HelpTooltip css={styles.activeFilterTooltip} text={activeFiltersTooltip} />
             }
@@ -743,7 +751,7 @@ const ListViewTable = ({
               onClick={resetFilters}
             >
               <CloseIcon />
-              <span className={classes([windowSize < 490 && "sr-only"])}>
+              <span className={classes([windowSize < 540 && "sr-only"])}>
                 Reset filters {activeFilters.length > 0 && <span style={{fontFamily: "GTZirkonRegular"}}>({activeFilters.length} active)</span>}
               </span>
             </Button>
@@ -754,14 +762,14 @@ const ListViewTable = ({
               title="Download the results as a comma-separated value (CSV) file.  Existing sorts will be retained."
             >
               <DownloadIcon />
-              <span className={classes([windowSize < 780 && "sr-only"])}>
+              <span className={classes([windowSize < 840 && "sr-only"])}>
                 Download results
               </span>
             </Button>
           </CSVLink>
           <Button css={styles.buttonBarButton} onClick={() => setDialogOpen(true)}>
             <AddCircleOutlineIcon />
-            <span className={classes([windowSize < 650 && "sr-only"])}>
+            <span className={classes([windowSize < 700 && "sr-only"])}>
               Add/remove columns
             </span>
           </Button>

diff --git a/web/gui-v2/src/static_data/table_columns.js b/web/gui-v2/src/static_data/table_columns.js
@@ -10,6 +10,10 @@ const endArticleIx = overall.years.findIndex(e => e === overall.endArticleYear);
 const startPatentIx = overall.years.findIndex(e => e === overall.startPatentYear);
 const endPatentIx = overall.years.findIndex(e => e === overall.endPatentYear);
 
+// Start of the fake `cset_id` values used for company groups.
+// TODO: Change this to 1000000 once #212 is merged.
+const GROUP_OFFSET = 100000;
+
 const styles = {
   name: css`
     .MuiTableSortLabel-root {
@@ -116,14 +120,20 @@ const columnDefinitions = [
     title: "Company",
     key: "name",
     css: [styles.name, columnWidth(200)],
-    format: (name, row) => (
-      <a
-        target="_blank"
-        href={`company/${row.cset_id}-${slugifyCompanyName(name)}`}
-      >
-        {name}
-      </a>
-    ),
+    format: (name, row) => {
+      if ( row.cset_id >= GROUP_OFFSET ) {
+        return <>{name} (average)</>;
+      } else {
+        return (
+          <a
+            target="_blank"
+            href={`company/${row.cset_id}-${slugifyCompanyName(name)}`}
+          >
+            {name}
+          </a>
+        )
+      }
+    },
     initialCol: true,
     dropdownWidth: 240,
     sortable: true,