@databiosphere/findable-ui 4.0.0 → 6.0.0

package/src/providers/exploreState.tsx

@@ -1,3 +1,4 @@
+import { RowSelectionState } from "@tanstack/react-table";
 import React, {
   createContext,
   Dispatch,
@@ -9,6 +10,7 @@ import React, {
 } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategoryView, SelectedFilter } from "../common/entities";
+import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { useAuthentication } from "../hooks/useAuthentication/useAuthentication";
 import {
@@ -32,42 +34,33 @@ import {
   PaginateTablePayload,
   PatchExploreResponsePayload,
   ProcessExploreResponsePayload,
-  ProcessRelatedResponsePayload,
   ResetExploreResponsePayload,
-  ToggleEntityViewPayload,
   UpdateColumnVisibilityPayload,
   UpdateEntityFiltersPayload,
   UpdateEntityViewAccessPayload,
   UpdateFilterPayload,
+  UpdateRowPreviewPayload,
   UpdateRowSelectionPayload,
   UpdateSortingPayload,
 } from "./exploreState/payloads/entities";
 import {
   buildEntityStateSavedFilterState,
   buildNextSavedFilterState,
+  closeRowPreview,
   getEntityCategoryGroupConfigKey,
   getEntityState,
   getEntityStateSavedSorting,
   getFilterCount,
   patchEntityListItems,
   resetPage,
-  resetRowSelection,
   updateEntityPageState,
-  updateEntityPageStateSorting,
+  updateEntityPageStateWithCommonCategoryGroupConfigKey,
   updateEntityStateByCategoryGroupConfigKey,
   updateSelectColumnVisibility,
 } from "./exploreState/utils";
 
 export type CatalogState = string | undefined;
 
-/**
- * Entity view.
- */
-export enum ENTITY_VIEW {
-  EXACT = "EXACT",
-  RELATED = "RELATED",
-}
-
 /**
  * Explore context.
  */
@@ -88,12 +81,10 @@ export type ExploreState = {
   featureFlagState: FeatureFlagState;
   filterCount: number;
   filterState: SelectedFilter[];
-  isRelatedView: boolean;
   listItems: ListItems;
-  listView: ENTITY_VIEW | undefined;
   loading: boolean;
   paginationState: PaginationState;
-  relatedListItems: RelatedListItems;
+  rowPreview: RowPreviewState;
   tabValue: string;
 };
 
@@ -144,12 +135,6 @@ export interface PaginationState {
   rows: number;
 }
 
-/**
- * Related list items.
- */
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any -- TODO revisit when adding react query or similar
-export type RelatedListItems = any[] | undefined;
-
 /**
  * Explore state context for storing and using filter-related and explore state.
  */
@@ -234,15 +219,14 @@ export enum ExploreActionKind {
   PaginateTable = "PAGINATE_TABLE",
   PatchExploreResponse = "PATCH_EXPLORE_RESPONSE",
   ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
-  ProcessRelatedResponse = "PROCESS_RELATED_RESPONSE",
   ResetExploreResponse = "RESET_EXPLORE_RESPONSE",
   ResetState = "RESET_STATE",
   SelectEntityType = "SELECT_ENTITY_TYPE",
-  ToggleEntityView = "TOGGLE_ENTITY_VIEW",
   UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
   UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
   UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
   UpdateFilter = "UPDATE_FILTER",
+  UpdateRowPreview = "UPDATE_ROW_PREVIEW",
   UpdateRowSelection = "UPDATE_ROW_SELECTION",
   UpdateSorting = "UPDATE_SORTING",
 }
@@ -256,15 +240,14 @@ export type ExploreAction =
   | PaginateTableAction
   | PatchExploreResponseAction
   | ProcessExploreResponseAction
-  | ProcessRelatedResponseAction
   | ResetExploreResponseAction
   | ResetStateAction
   | SelectEntityTypeAction
-  | ToggleEntityViewAction
   | UpdateColumnVisibilityAction
   | UpdateEntityFiltersAction
   | UpdateEntityViewAccessAction
   | UpdateFilterAction
+  | UpdateRowPreviewAction
   | UpdateRowSelectionAction
   | UpdateSortingAction;
 
@@ -308,14 +291,6 @@ type ProcessExploreResponseAction = {
   type: ExploreActionKind.ProcessExploreResponse;
 };
 
-/**
- * Process related response action.
- */
-type ProcessRelatedResponseAction = {
-  payload: ProcessRelatedResponsePayload;
-  type: ExploreActionKind.ProcessRelatedResponse;
-};
-
 /**
  * Reset explore response action.
  */
@@ -340,14 +315,6 @@ type SelectEntityTypeAction = {
   type: ExploreActionKind.SelectEntityType;
 };
 
-/**
- * Toggle entity view action.
- */
-type ToggleEntityViewAction = {
-  payload: ToggleEntityViewPayload;
-  type: ExploreActionKind.ToggleEntityView;
-};
-
 /**
  * Update column visibility action.
  */
@@ -380,6 +347,14 @@ type UpdateFilterAction = {
   type: ExploreActionKind.UpdateFilter;
 };
 
+/**
+ * Update row preview action.
+ */
+export type UpdateRowPreviewAction = {
+  payload: UpdateRowPreviewPayload;
+  type: ExploreActionKind.UpdateRowPreview;
+};
+
 /**
  * Update row selection action.
  */
@@ -421,6 +396,8 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
+      const rowPreview = closeRowPreview(state.rowPreview);
+      const rowSelection: RowSelectionState = {};
       const savedFilterState = buildEntityStateSavedFilterState(
         payload.categoryKey,
         payload.selectedValue,
@@ -431,16 +408,21 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
+      const sorting = savedSorting || []; // Reset sorting to default if saved sorting is not available.
       updateEntityStateByCategoryGroupConfigKey(state, {
         filterState,
         savedFilterState,
       });
       return {
         ...state,
-        entityPageState: updateEntityPageStateSorting(state, savedSorting),
+        entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(
+          state,
+          { rowPreview, rowSelection, sorting }
+        ),
         filterCount: getFilterCount(filterState),
         filterState,
         paginationState: resetPage(state.paginationState),
+        rowPreview,
       };
     }
     /**
@@ -449,6 +431,8 @@ function exploreReducer(
     case ExploreActionKind.ClearFilters: {
       const filterCount = 0;
       const filterState: SelectedFilter[] = [];
+      const rowPreview = closeRowPreview(state.rowPreview);
+      const rowSelection: RowSelectionState = {};
       const savedFilterState: SelectedFilter[] = [];
       updateEntityStateByCategoryGroupConfigKey(state, {
         filterState,
@@ -456,9 +440,14 @@ function exploreReducer(
       });
       return {
         ...state,
+        entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(
+          state,
+          { rowPreview, rowSelection }
+        ),
         filterCount,
         filterState,
         paginationState: resetPage(state.paginationState),
+        rowPreview,
       };
     }
     /**
@@ -473,9 +462,16 @@ function exploreReducer(
         nextPaginationState.currentPage--;
         nextPaginationState.index = nextPaginationState.previousIndex;
       }
+      const rowPreview = closeRowPreview(state.rowPreview);
       return {
         ...state,
+        entityPageState: updateEntityPageState(
+          state.tabValue,
+          state.entityPageState,
+          { rowPreview }
+        ),
         paginationState: nextPaginationState,
+        rowPreview,
       };
     }
     /**
@@ -500,6 +496,7 @@ function exploreReducer(
      * Process explore response
      **/
     case ExploreActionKind.ProcessExploreResponse: {
+      const entityPageState = state.entityPageState[state.tabValue];
       const entityState = getEntityState(state);
       const nextCategoryViews = payload.selectCategories
         ? buildCategoryViews(
@@ -511,6 +508,7 @@ function exploreReducer(
             [...state.filterState, ...entityState.savedFilterState]
           )
         : state.categoryViews;
+      const rowPreview = entityPageState.rowPreview;
       updateEntityStateByCategoryGroupConfigKey(state, {
         categoryViews: nextCategoryViews,
       });
@@ -523,15 +521,7 @@ function exploreReducer(
           ...state.paginationState,
           ...payload.paginationResponse,
         },
-      };
-    }
-    /**
-     * Process related response
-     */
-    case ExploreActionKind.ProcessRelatedResponse: {
-      return {
-        ...state,
-        relatedListItems: payload.relatedListItems,
+        rowPreview,
       };
     }
     /**
@@ -562,6 +552,7 @@ function exploreReducer(
         state,
         getEntityCategoryGroupConfigKey(payload, state.entityPageState)
       );
+      const rowPreview = closeRowPreview(state.rowPreview); // Close row preview, without updating the entity page state row preview.
       return {
         ...state,
         categoryGroups: entityState.categoryGroups,
@@ -570,53 +561,63 @@ function exploreReducer(
         filterState: entityState.filterState,
         listItems: [],
         loading: true,
-        paginationState: resetPage(state.paginationState),
+        paginationState: { ...resetPage(state.paginationState), rows: 0 },
+        rowPreview,
         tabValue: payload,
       };
     }
-    /**
-     * Toggle entity view
-     */
-    case ExploreActionKind.ToggleEntityView: {
-      return {
-        ...state,
-        isRelatedView: payload === ENTITY_VIEW.RELATED,
-        listView: payload,
-      };
-    }
     /**
      * Update column visibility
      **/
     case ExploreActionKind.UpdateColumnVisibility: {
+      const columnsVisibility = payload;
       return {
         ...state,
         entityPageState: updateEntityPageState(
           state.tabValue,
           state.entityPageState,
-          { columnsVisibility: payload }
+          { columnsVisibility }
         ),
       };
     }
     /**
      * Update entity filters.
+     * Updates state for the given entity and entities with the same category group config key, prior to navigation to the entity.
+     * Actions for the given entity and entities with the same category group config key:
+     * - updates filter state,
+     * - clears saved filter state,
+     * - resets row selection, and
+     * - closes row preview.
+     * Actions for the current entity:
+     * - closes row preview, without updating the entity page state row preview.
      */
     case ExploreActionKind.UpdateEntityFilters: {
-      const { entityListType, filters: filterState } = payload;
+      const { entityListType, filters: filterState, sorting } = payload;
       const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
         entityListType,
         state.entityPageState
       );
+      const rowPreview = closeRowPreview(
+        state.entityPageState[entityListType].rowPreview
+      );
+      const rowSelection: RowSelectionState = {};
+      const savedFilterState: SelectedFilter[] = [];
       updateEntityStateByCategoryGroupConfigKey(
         state,
         {
           filterState,
-          savedFilterState: [], // Clear saved filter state.
+          savedFilterState,
         },
         categoryGroupConfigKey
       );
       return {
         ...state,
-        entityPageState: resetRowSelection(state, categoryGroupConfigKey),
+        entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(
+          state,
+          { rowPreview, rowSelection, sorting },
+          categoryGroupConfigKey
+        ),
+        rowPreview: closeRowPreview(state.rowPreview),
       };
     }
     /**
@@ -638,6 +639,8 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
+      const rowPreview = closeRowPreview(state.rowPreview);
+      const rowSelection: RowSelectionState = {};
       const savedFilterState: SelectedFilter[] = []; // Clear saved filter state.
       updateEntityStateByCategoryGroupConfigKey(state, {
         filterState,
@@ -645,22 +648,42 @@ function exploreReducer(
       });
       return {
         ...state,
-        entityPageState: resetRowSelection(state),
+        entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(
+          state,
+          { rowPreview, rowSelection }
+        ),
         filterCount: getFilterCount(filterState),
         filterState,
         paginationState: resetPage(state.paginationState),
+        rowPreview,
+      };
+    }
+    /**
+     * Update row preview
+     */
+    case ExploreActionKind.UpdateRowPreview: {
+      const rowPreview = payload;
+      return {
+        ...state,
+        entityPageState: updateEntityPageState(
+          state.tabValue,
+          state.entityPageState,
+          { rowPreview }
+        ),
+        rowPreview,
       };
     }
     /**
      * Update row selection
      */
     case ExploreActionKind.UpdateRowSelection: {
+      const rowSelection = payload;
       return {
         ...state,
         entityPageState: updateEntityPageState(
           state.tabValue,
           state.entityPageState,
-          { rowSelection: payload }
+          { rowSelection }
         ),
       };
     }
@@ -668,14 +691,17 @@ function exploreReducer(
      * Update sorting
      **/
     case ExploreActionKind.UpdateSorting: {
+      const rowPreview = closeRowPreview(state.rowPreview);
+      const sorting = payload;
       return {
         ...state,
         entityPageState: updateEntityPageState(
           state.tabValue,
           state.entityPageState,
-          { sorting: payload }
+          { rowPreview, sorting }
         ),
         paginationState: resetPage(state.paginationState),
+        rowPreview,
       };
     }
 

package/src/styles/common/mixins/colors.ts

@@ -1,4 +1,4 @@
-import { CommonColors, PaletteColor } from "@mui/material/styles/createPalette";
+import { CommonColors, PaletteColor } from "@mui/material/styles";
 import { ThemeProps } from "../../../theme/theme";
 
 // Alert
@@ -31,6 +31,9 @@ export const inkMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
 // Primary
 export const primaryDark = ({ theme }: ThemeProps): PaletteColor["dark"] =>
   theme.palette.primary.dark;
+export const primaryLightest = ({
+  theme,
+}: ThemeProps): PaletteColor["lightest"] => theme.palette.primary.lightest;
 export const primaryMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.primary.main;
 

package/src/theme/common/components.ts

@@ -600,6 +600,8 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
           backgroundColor: theme.palette.smoke.main,
           boxShadow: `0 0 0 2px ${white}`,
           height: 24,
+          justifySelf: FLEX_START,
+          minWidth: 0,
         },
       },
       {
@@ -609,6 +611,7 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
           boxShadow: `0 0 0 2px ${white}`,
           height: 20,
           maxWidth: "fit-content",
+          minWidth: 0,
         },
       },
     ],
@@ -1176,6 +1179,15 @@ export const MuiPaper = (theme: Theme): Components["MuiPaper"] => {
           },
         },
       },
+      {
+        props: { variant: "table" }, // Copy of "panel" variant.
+        style: {
+          borderColor: theme.palette.smoke.main,
+          borderStyle: "solid",
+          borderWidth: 1,
+          boxShadow: theme.shadows[1], // elevation01
+        },
+      },
     ],
   };
 };

package/src/theme/common/palette.ts

@@ -1,9 +1,5 @@
 import { PaletteColorOptions } from "@mui/material";
-import {
-  CommonColors,
-  TypeBackground,
-  TypeText,
-} from "@mui/material/styles/createPalette";
+import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
 
 /**
  * Palette "Alert"
@@ -44,6 +40,7 @@ enum INK {
  */
 enum PRIMARY {
   DARK = "#005EA9",
+  LIGHTEST = "#E6EFF6",
   MAIN = "#1C7CC7",
 }
 
@@ -123,6 +120,7 @@ export const infoMain = INFO.MAIN;
 export const inkLight = INK.LIGHT;
 export const inkMain = INK.MAIN;
 export const primaryDark = PRIMARY.DARK;
+export const primaryLightest = PRIMARY.LIGHTEST;
 export const primaryMain = PRIMARY.MAIN;
 export const smokeDark = SMOKE.DARK;
 export const smokeLight = SMOKE.LIGHT;
@@ -202,6 +200,7 @@ export const ink: PaletteColorOptions = {
  */
 export const primary: PaletteColorOptions = {
   dark: primaryDark,
+  lightest: primaryLightest,
   main: primaryMain,
 };
 

package/src/theme/theme.ts

@@ -1,5 +1,4 @@
-import { createTheme, Theme, ThemeOptions } from "@mui/material";
-import { Shadows } from "@mui/material/styles/shadows";
+import { createTheme, Shadows, Theme, ThemeOptions } from "@mui/material";
 import * as B from "./common/breakpoints";
 import * as C from "./common/components";
 import * as P from "./common/palette";

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 {}
 }
 
 /**