@databiosphere/findable-ui 5.0.0 → 6.0.0

package/src/views/ExploreView/exploreView.tsx

@@ -37,7 +37,6 @@ import {
 } from "../../hooks/useBreakpointHelper";
 import { useConfig } from "../../hooks/useConfig";
 import { useEntityList } from "../../hooks/useEntityList";
-import { useEntityListRelatedView } from "../../hooks/useEntityListRelatedView";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind, ExploreState } from "../../providers/exploreState";
@@ -72,18 +71,11 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
-  const {
-    categoryGroups,
-    categoryViews,
-    filterCount,
-    isRelatedView,
-    tabValue,
-  } = exploreState;
+  const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
   const { push } = useRouter();
   const tabs = getTabs(entities);
   const { response: summaryResponse } = useSummary(); // Fetch summary.
   useEntityList(props); // Fetch entities.
-  useEntityListRelatedView(); // Fetch related entities.
   const { entityListType } = props;
   const categoryFilters = useMemo(
     () => buildCategoryFilters(categoryViews, categoryGroups),
@@ -194,7 +186,6 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
           <Filters
             categoryFilters={categoryFilters}
             closeAncestor={onCloseDrawer}
-            disabled={isRelatedView}
             onFilter={onFilterChange.bind(null, false)}
             trackFilterOpened={trackingConfig?.trackFilterOpened}
           />
@@ -284,14 +275,7 @@ function renderList(
   entityConfig: EntityConfig,
   entityListType: string
 ): JSX.Element {
-  const {
-    isRelatedView,
-    listItems,
-    loading,
-    paginationState,
-    relatedListItems,
-    tabValue,
-  } = exploreState;
+  const { listItems, loading, tabValue } = exploreState;
   const { getId: getRowId, list, listView } = entityConfig;
   const { columns: columnsConfig, defaultSort } = list;
 
@@ -310,15 +294,9 @@ function renderList(
       columns={columnsConfig}
       defaultSort={defaultSort}
       getRowId={getRowId}
-      items={
-        isRelatedView && relatedListItems ? relatedListItems : listItems ?? []
-      }
+      items={listItems ?? []}
       listView={listView}
       loading={loading}
-      pages={paginationState.pages}
-      pageSize={paginationState.pageSize}
-      pagination={undefined}
-      total={paginationState.rows}
     />
   );
 }

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

@@ -14,9 +14,16 @@ 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 type {} from "@tanstack/react-table";
 import { RowData } from "@tanstack/react-table";
-import type {} from "@tanstack/table-core";
 import { DataLayer } from "../src/common/analytics/entities";
+import {
+  CustomFeatureInitialTableState,
+  CustomFeatureInstance,
+  CustomFeatureOptions,
+  CustomFeatureRow,
+  CustomFeatureTableState,
+} from "../src/components/Table/features/entities";
 import { GridTrackSize } from "../src/config/entities";
 
 /**
@@ -141,6 +148,7 @@ declare module "@mui/material/Paper" {
     menu: true;
     panel: true;
     searchbar: true;
+    table: true;
   }
 }
 
@@ -252,7 +260,7 @@ declare module "@emotion/react" {
   }
 }
 
-declare module "@tanstack/table-core" {
+declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
   interface ColumnMeta<TData extends RowData, TValue> {
     columnPinned?: boolean;
@@ -260,6 +268,17 @@ declare module "@tanstack/table-core" {
     header?: string;
     width?: GridTrackSize;
   }
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
+  interface InitialTableState extends CustomFeatureInitialTableState {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
+  interface Row<TData extends RowData> extends CustomFeatureRow {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
+  interface Table<TData extends RowData> extends CustomFeatureInstance<TData> {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
+  interface TableOptionsResolved<TData extends RowData>
+    extends CustomFeatureOptions {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
+  interface TableState extends CustomFeatureTableState {}
 }
 
 /**

package/src/hooks/useEntityListRelatedView.ts

@@ -1,78 +0,0 @@
-import { useEffect } from "react";
-import { SelectedFilterValue } from "../common/entities";
-import { RelatedSearchResult } from "../config/entities";
-import {
-  ExploreActionKind,
-  ListItems,
-  RelatedListItems,
-} from "../providers/exploreState";
-import { useAsync } from "./useAsync";
-import { useConfig } from "./useConfig";
-import { useExploreState } from "./useExploreState";
-
-/**
- * Returns related entity lists filtered by related search results.
- * @param listItems - Entity list items.
- * @param relatedSearchResult - Related search result.
- * @param excludedValues - Selected category values to be excluded from related entity lists.
- * @returns related entities.
- */
-export function buildRelatedEntityList(
-  listItems: ListItems,
-  relatedSearchResult: RelatedSearchResult | undefined,
-  excludedValues: SelectedFilterValue | undefined
-): RelatedListItems {
-  if (relatedSearchResult) {
-    const { resultKey, searchKey, values } = relatedSearchResult;
-    return listItems?.filter((listItem) => {
-      if (values.includes(listItem[resultKey].toLowerCase())) {
-        return !excludedValues?.includes(listItem[searchKey]); // Exclude any row where any of the selected category values matches the corresponding row value.
-      }
-    });
-  }
-}
-
-/**
- * Updates related entity list.
- */
-export const useEntityListRelatedView = (): void => {
-  const { entityConfig } = useConfig();
-  const { exploreDispatch, exploreState } = useExploreState();
-  const { filterState, listItems } = exploreState;
-  const { listView } = entityConfig;
-  const relatedView = listView?.relatedView;
-  const { relatedSearchFn, resultKey, searchKey } = relatedView || {};
-  const { data: relatedSearchResult, run } = useAsync<
-    RelatedSearchResult | undefined
-  >();
-  const selectedCategoryValues = filterState.find(
-    ({ categoryKey }) => categoryKey === searchKey
-  )?.value;
-
-  useEffect(() => {
-    if (relatedSearchFn) {
-      run(relatedSearchFn(searchKey, resultKey, selectedCategoryValues));
-    }
-  }, [relatedSearchFn, resultKey, run, searchKey, selectedCategoryValues]);
-
-  useEffect(() => {
-    if (relatedSearchFn) {
-      exploreDispatch({
-        payload: {
-          relatedListItems: buildRelatedEntityList(
-            listItems,
-            relatedSearchResult,
-            selectedCategoryValues
-          ),
-        },
-        type: ExploreActionKind.ProcessRelatedResponse,
-      });
-    }
-  }, [
-    exploreDispatch,
-    listItems,
-    relatedSearchFn,
-    relatedSearchResult,
-    selectedCategoryValues,
-  ]);
-};