Make additional columns sortable and fix slider font

Make the Country, Region, Stage, and Sector columns sortable (closes #274) Fix the font in the floating labels for the sliders (closes #327)
georgetown-cset · May 22, 2024 · 022231e · 022231e
1 parent 634350d
commit 022231e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/web/gui-v2/src/components/HeaderSlider.jsx b/web/gui-v2/src/components/HeaderSlider.jsx
@@ -19,6 +19,10 @@ const styles = {
       height: 10px;
       width: 10px;
     }
+
+    .MuiSlider-valueLabel {
+      font-family: GTZirkonLight;
+    }
   `,
 };
 

diff --git a/web/gui-v2/src/components/ListView.test.js b/web/gui-v2/src/components/ListView.test.js
@@ -27,7 +27,7 @@ describe("ListView", () => {
     // Filter by China and verify that the count updates
     expect(screen.getByText('Viewing 632 companies')).toBeVisible();
     const regionHeader = screen.getByRole('columnheader', { name: /country/i });
-    await user.click(getByRole(regionHeader, 'button'));
+    await user.click(getByRole(regionHeader, 'button', { name: /open/i }));
     const menu = screen.getByRole('listbox');
     await user.click(getByText(menu, 'China'));
     expect(screen.getByText('Viewing 43 of 632 companies')).toBeVisible();

diff --git a/web/gui-v2/src/components/ListViewTable.jsx b/web/gui-v2/src/components/ListViewTable.jsx
@@ -775,6 +775,8 @@ const ListViewTable = ({
             } else {
               return 0;
             }
+          } else if ( a?.[sortKey] === null || b?.[sortKey] === null ) {
+            return 0; // Workaround in case no country/region/etc is available
           } else {
             return a[sortKey].localeCompare(b[sortKey]) * direction;
           }

diff --git a/web/gui-v2/src/static_data/table_columns.js b/web/gui-v2/src/static_data/table_columns.js
@@ -145,6 +145,7 @@ const columnDefinitions = [
     css: columnWidth(120),
     initialCol: true,
     dropdownWidth: 180,
+    sortable: true,
     type: 'dropdown',
     tooltip: "Zach_tktk",
   },
@@ -154,6 +155,7 @@ const columnDefinitions = [
     css: columnWidth(100),
     initialCol: false,
     dropdownWidth: 170,
+    sortable: true,
     type: 'dropdown',
     tooltip: "Zach_tktk",
   },
@@ -163,13 +165,15 @@ const columnDefinitions = [
     css: columnWidth(80),
     initialCol: false,
     dropdownWidth: 120,
+    sortable: true,
     type: 'dropdown',
     tooltip: "Zach_tktk",
   },
   {
     title: "Sector",
     key: "sector",
     initialCol: false,
+    sortable: true,
     type: 'dropdown',
     tooltip: "Zach_tktk",
   },