@databiosphere/findable-ui 5.0.0 → 6.0.0

package/src/providers/exploreState/initializer/utils.ts

@@ -1,4 +1,4 @@
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import { VisibilityState } from "@tanstack/react-table";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
 import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
@@ -165,6 +165,7 @@ function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
         categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
         columnsVisibility: initColumnVisibility(entity),
         enableRowSelection: Boolean(entity.listView?.enableRowSelection),
+        rowPreview: undefined,
         rowSelection: {},
         sorting: getDefaultSorting(entity),
       },

package/src/providers/exploreState/payloads/entities.ts

@@ -10,12 +10,8 @@ import {
   SelectCategory,
   SelectedFilter,
 } from "../../../common/entities";
-import {
-  ENTITY_VIEW,
-  ListItems,
-  PaginationResponse,
-  RelatedListItems,
-} from "../../exploreState";
+import { RowPreviewState } from "../../../components/Table/features/RowPreview/entities";
+import { ListItems, PaginationResponse } from "../../exploreState";
 import { ListItem } from "../entities";
 
 /**
@@ -50,23 +46,11 @@ export interface ProcessExploreResponsePayload {
   selectCategories?: SelectCategory[];
 }
 
-/**
- * Process related response payload
- */
-export interface ProcessRelatedResponsePayload {
-  relatedListItems: RelatedListItems;
-}
-
 /**
  * Reset explore response payload.
  */
 export type ResetExploreResponsePayload = undefined;
 
-/**
- * Toggle entity view payload.
- */
-export type ToggleEntityViewPayload = ENTITY_VIEW;
-
 /**
  * Update column visibility payload.
  */
@@ -96,6 +80,11 @@ export interface UpdateFilterPayload {
   selectedValue: CategoryValueKey;
 }
 
+/**
+ * Update row preview payload.
+ */
+export type UpdateRowPreviewPayload = RowPreviewState;
+
 /**
  * Update row selection payload.
  */

package/src/providers/exploreState/utils.ts

@@ -4,6 +4,7 @@ import {
   CategoryValueKey,
   SelectedFilter,
 } from "../../common/entities";
+import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import { ACCESSOR_KEYS } from "../../components/TableCreator/common/constants";
 import { ExploreState, ListItems, PaginationState } from "../exploreState";
 import {
@@ -49,6 +50,18 @@ export function buildNextSavedFilterState(
   return savedFilter?.filters || [];
 }
 
+/**
+ * Closes row preview, if row preview is enabled.
+ * If row preview is enabled, the row preview state value is set to false.
+ * @param rowPreview - Row preview state.
+ * @returns row preview state with row preview value set to false.
+ */
+export function closeRowPreview(rowPreview: RowPreviewState): RowPreviewState {
+  if (!rowPreview) return rowPreview;
+  const [[key]] = Object.entries(rowPreview);
+  return { [key]: false };
+}
+
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -155,33 +168,6 @@ export function resetPage(paginationState: PaginationState): PaginationState {
   return nextPaginationState;
 }
 
-/**
- * Resets row selection for the current entity and entities that share the same category group config key.
- * @param state - Explore state.
- * @param categoryGroupConfigKey - Category group config key.
- * @returns entity page state mapper with row selection reset.
- */
-export function resetRowSelection(
-  state: ExploreState,
-  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
-    state.tabValue,
-    state.entityPageState
-  )
-): EntityPageStateMapper {
-  return Object.entries(state.entityPageState).reduce(
-    (acc, [entityPath, entityPageState]) => {
-      if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
-        return {
-          ...acc,
-          [entityPath]: { ...entityPageState, rowSelection: {} },
-        };
-      }
-      return { ...acc, [entityPath]: entityPageState };
-    },
-    {} as EntityPageStateMapper
-  );
-}
-
 /**
  * Sets entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
@@ -221,24 +207,27 @@ export function updateEntityPageState(
 }
 
 /**
- * Updates entity page state sorting for all entities with the same category group config key.
+ * Updates entity page state for the current entity and entities that share the same category group config key.
  * @param state - Explore state.
- * @param sorting - Sorting.
+ * @param nextEntityPageState - Partial next entity page state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns entity page state.
  */
-export function updateEntityPageStateSorting(
+export function updateEntityPageStateWithCommonCategoryGroupConfigKey(
   state: ExploreState,
-  sorting?: EntityPageState["sorting"]
-): EntityPageStateMapper {
-  if (!sorting) return state.entityPageState;
-  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+  nextEntityPageState: Partial<EntityPageState>,
+  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
     state.tabValue,
     state.entityPageState
-  );
+  )
+): EntityPageStateMapper {
   return Object.entries(state.entityPageState).reduce(
     (acc, [entityPath, entityPageState]) => {
       if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
-        return { ...acc, [entityPath]: { ...entityPageState, sorting } };
+        return {
+          ...acc,
+          [entityPath]: { ...entityPageState, ...nextEntityPageState },
+        };
       }
       return { ...acc, [entityPath]: entityPageState };
     },

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,35 +561,35 @@ 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, sorting } = payload;
@@ -606,23 +597,27 @@ function exploreReducer(
         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: updateEntityPageState(
-          entityListType,
-          {
-            ...resetRowSelection(state, categoryGroupConfigKey), // Reset row selection for all entities with the same category group config key.
-          },
-          { sorting } // Update sorting for the entity.
+        entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(
+          state,
+          { rowPreview, rowSelection, sorting },
+          categoryGroupConfigKey
         ),
+        rowPreview: closeRowPreview(state.rowPreview),
       };
     }
     /**
@@ -644,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,
@@ -651,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 }
         ),
       };
     }
@@ -674,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";