@databiosphere/findable-ui 2.1.0 → 3.0.0

package/src/views/ExploreView/exploreView.tsx

@@ -41,9 +41,12 @@ import { useEntityListRelatedView } from "../../hooks/useEntityListRelatedView";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind, ExploreState } from "../../providers/exploreState";
+import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
 
-export type ExploreViewProps = AzulEntitiesStaticResponse;
+export interface ExploreViewProps extends AzulEntitiesStaticResponse {
+  className?: string;
+}
 
 /**
  * Returns tabs to be used as a prop for the Tabs component.
@@ -111,13 +114,18 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     categorySection?: string,
     searchTerm?: string
   ): void => {
+    const dispatchType =
+      categoryKey === SELECT_CATEGORY_KEY.SAVED_FILTERS
+        ? ExploreActionKind.ApplySavedFilter
+        : ExploreActionKind.UpdateFilter;
+
     exploreDispatch({
       payload: {
         categoryKey,
         selected,
         selectedValue: selectedCategoryValue,
       },
-      type: ExploreActionKind.UpdateFilter,
+      type: dispatchType,
     });
 
     trackingConfig?.trackFilterApplied?.({
@@ -193,6 +201,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
         </Sidebar>
       )}
       <IndexView
+        className={props.className}
         List={renderList(exploreState, entityConfig, entityListType)}
         ListHero={renderComponent(listHero)}
         SideBarButton={
@@ -226,23 +235,25 @@ function buildCategoryFilters(
   if (!categoryGroups) {
     return [{ categoryViews: selectCategoryViews }];
   }
-  return categoryGroups.map(({ categoryConfigs, label }) => {
+  return categoryGroups.reduce((accGroups, { categoryConfigs, label }) => {
     // Grab the category views for the configured grouped categories.
     const categoryViews = categoryConfigs.reduce(
-      (acc, { key: categoryKey }) => {
+      (accViews, { key: categoryKey }) => {
         const categoryView = selectCategoryViews.find(
           ({ key }) => key === categoryKey
         );
         if (categoryView) {
-          acc.push(categoryView);
+          accViews.push(categoryView);
         }
-        return acc;
+        return accViews;
       },
       [] as SelectCategoryView[]
     );
-    // Return the configured label and category views.
-    return { categoryViews, label };
-  });
+    if (categoryViews.length > 0) {
+      accGroups.push({ categoryViews, label });
+    }
+    return accGroups;
+  }, [] as CategoryFilter[]);
 }
 
 /**
@@ -281,7 +292,7 @@ function renderList(
     relatedListItems,
     tabValue,
   } = exploreState;
-  const { list, listView } = entityConfig;
+  const { getId: getRowId, list, listView } = entityConfig;
   const { columns: columnsConfig, defaultSort } = list;
 
   if (!exploreState || !tabValue) {
@@ -298,6 +309,7 @@ function renderList(
     <TableCreator
       columns={columnsConfig}
       defaultSort={defaultSort}
+      getRowId={getRowId}
       items={
         isRelatedView && relatedListItems ? relatedListItems : listItems ?? []
       }

package/types/data-explorer-ui.d.ts

@@ -11,6 +11,7 @@ import { PaletteColorOptions } from "@mui/material/styles/createPalette";
 import { TypographyStyleOptions } from "@mui/material/styles/createTypography";
 import type {} from "@mui/material/SvgIcon";
 import type {} from "@mui/material/Tabs";
+import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
 import { RowData } from "@tanstack/react-table";
 import { DataLayer } from "../src/common/analytics/entities";
@@ -200,6 +201,15 @@ declare module "@mui/material/styles" {
   }
 }
 
+/**
+ * Toolbar prop options.
+ */
+declare module "@mui/material/Toolbar" {
+  interface ToolbarPropsVariantOverrides {
+    table: true;
+  }
+}
+
 /**
  * Typography variant overrides.
  */

package/src/components/Table/components/EntityViewToggle/entityViewToggle.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import {
-  ENTITY_VIEW,
-  ExploreActionKind,
-} from "../../../../providers/exploreState";
-import { ToggleButtonGroup } from "../../../common/ToggleButtonGroup/toggleButtonGroup";
-
-export const EntityViewToggle = (): JSX.Element => {
-  const { exploreDispatch } = useExploreState();
-  const toggleButtons = [
-    {
-      label: "Exact Match",
-      onToggle: () => onChange(ENTITY_VIEW.EXACT),
-      value: ENTITY_VIEW.EXACT,
-    },
-    {
-      label: "Related Match",
-      onToggle: () => onChange(ENTITY_VIEW.RELATED),
-      value: ENTITY_VIEW.RELATED,
-    },
-  ];
-
-  /**
-   * Callback fired when toggle button value changes.
-   * @param entityView - Entity list view.
-   */
-  const onChange = (entityView: ENTITY_VIEW): void => {
-    exploreDispatch({
-      payload: entityView,
-      type: ExploreActionKind.ToggleEntityView,
-    });
-  };
-
-  return <ToggleButtonGroup toggleButtons={toggleButtons} />;
-};