@databiosphere/findable-ui 0.0.0 → 1.0.0

package/README.md

@@ -1,19 +1,19 @@
-# data-explorer-ui
+# findable-ui
 
 ## General info
 
 - `src` contains TypeScript source files; `lib` will contain compiled JavaScript, which is what should be imported by
   the external application.
 - Import paths used by the external application need to specify the full path starting from the package name,
-  in the form `@clevercanary/data-explorer-ui/lib/<path>`, where `<path>` is the path of the file within the `lib`
+  in the form `@databiosphere/findable-ui/lib/<path>`, where `<path>` is the path of the file within the `lib`
   folder.
 
-## Developing the Clever Canary Data Explorer alongside Clever Canary Data Browser
+## Developing Findable UI alongside Data Biosphere Data Browser
 
 1. Clone this repository into the same parent folder as
-   the [Clever Canary Data Browser](https://github.com/clevercanary/data-browser).
-2. Set `node` version to `16.15.0` (this is also the version used by the Data Browser).
-3. In the Data Explorer `packages/data-explorer-ui` directory (e.g. `data-explorer/packages/data-explorer-ui`):
+   the [Data Biosphere Data Browser](https://github.com/DataBiosphere/data-browser).
+2. Set `node` version to `20.10.0` (this is also the version used by the Data Browser).
+3. In the `findable-ui` repository directory:
     - Run `npm ci`.
     - [Bump the version number](https://docs.npmjs.com/cli/v6/commands/npm-version) in `package.json`
       e.g. `npm version <update_type>`.
@@ -23,9 +23,9 @@
       in VS Code so that it can be done with a keyboard shortcut).
 4. In the Data Browser `explorer` directory (e.g. `data-browser/explorer`):
     - Run `npm ci`.
-    - Update the `@clevercanary/data-explorer-ui` dependency in the `package.json` file to use the new version
-      of `data-explorer-ui`.
-    - Run `npm link ../../data-explorer/packages/data-explorer-ui`, which will create a symlink in node_modules pointing
-      to data-explorer-ui.
+    - Update the `@databiosphere/findable-ui` dependency in the `package.json` file to use the new version
+      of Findable UI.
+    - Run `npm link ../../findable-ui`, which will create a symlink in node_modules pointing
+      to findable-ui.
     - If any packages are later installed or uninstalled, the symlink will need to be created again, which can be done
-      with the same command or by running `npm link @clevercanary/data-explorer-ui`.
+      with the same command or by running `npm link @databiosphere/findable-ui`.

package/lib/apis/azul/common/entities.d.ts

@@ -156,6 +156,7 @@ export declare enum MANIFEST_DOWNLOAD_FORMAT {
     "CURL" = "curl",
     "FULL" = "full",
     "TERRA_BDBAG" = "terra.bdbag",
-    "TERRA_PFB" = "terra.pfb"
+    "TERRA_PFB" = "terra.pfb",
+    "VERBATIM_PFB" = "verbatim.pfb"
 }
 export {};

package/lib/apis/azul/common/entities.js

@@ -54,4 +54,5 @@ var MANIFEST_DOWNLOAD_FORMAT;
     MANIFEST_DOWNLOAD_FORMAT["FULL"] = "full";
     MANIFEST_DOWNLOAD_FORMAT["TERRA_BDBAG"] = "terra.bdbag";
     MANIFEST_DOWNLOAD_FORMAT["TERRA_PFB"] = "terra.pfb";
+    MANIFEST_DOWNLOAD_FORMAT["VERBATIM_PFB"] = "verbatim.pfb";
 })(MANIFEST_DOWNLOAD_FORMAT = exports.MANIFEST_DOWNLOAD_FORMAT || (exports.MANIFEST_DOWNLOAD_FORMAT = {}));

package/lib/components/Export/components/ExportToTerra/exportToTerra.d.ts

@@ -12,7 +12,7 @@ export interface ExportToTerraProps {
     fileSummaryFacetName: string;
     filters: Filters;
     formFacet: FormFacet;
-    manifestDownloadFormat: ManifestDownloadFormat;
+    manifestDownloadFormat?: ManifestDownloadFormat;
     manifestDownloadFormats: ManifestDownloadFormat[];
 }
 export declare const ExportToTerra: ({ ExportForm, ExportToTerraStart, ExportToTerraSuccess, fileManifestState, fileSummaryFacetName, filters, formFacet, manifestDownloadFormat, manifestDownloadFormats, }: ExportToTerraProps) => JSX.Element;

package/lib/components/Layout/components/ContentLayout/common/constants.d.ts

@@ -1,5 +1,6 @@
 import { LayoutStyle } from "./entities";
 export declare const LAYOUT_STYLE_CONTRAST_LIGHT: LayoutStyle;
 export declare const LAYOUT_STYLE_CONTRAST_LIGHTEST: LayoutStyle;
+export declare const LAYOUT_STYLE_NO_CONTRAST_DEFAULT: LayoutStyle;
 export declare const LAYOUT_STYLE_NO_CONTRAST_LIGHT: LayoutStyle;
 export declare const LAYOUT_STYLE_NO_CONTRAST_LIGHTEST: LayoutStyle;

package/lib/components/Layout/components/ContentLayout/common/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LAYOUT_STYLE_NO_CONTRAST_LIGHTEST = exports.LAYOUT_STYLE_NO_CONTRAST_LIGHT = exports.LAYOUT_STYLE_CONTRAST_LIGHTEST = exports.LAYOUT_STYLE_CONTRAST_LIGHT = void 0;
+exports.LAYOUT_STYLE_NO_CONTRAST_LIGHTEST = exports.LAYOUT_STYLE_NO_CONTRAST_LIGHT = exports.LAYOUT_STYLE_NO_CONTRAST_DEFAULT = exports.LAYOUT_STYLE_CONTRAST_LIGHTEST = exports.LAYOUT_STYLE_CONTRAST_LIGHT = void 0;
 const entities_1 = require("./entities");
 exports.LAYOUT_STYLE_CONTRAST_LIGHT = {
     content: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
@@ -12,6 +12,11 @@ exports.LAYOUT_STYLE_CONTRAST_LIGHTEST = {
     navigation: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
     outline: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
 };
+exports.LAYOUT_STYLE_NO_CONTRAST_DEFAULT = {
+    content: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
+    navigation: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
+    outline: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
+};
 exports.LAYOUT_STYLE_NO_CONTRAST_LIGHT = {
     content: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
     navigation: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.js

@@ -67,6 +67,7 @@ exports.NavigationGrid = styled_1.default.div `
 exports.ContentGrid = styled_1.default.div `
   ${content};
   grid-area: content;
+  min-width: 0;
 `;
 exports.OutlineGrid = (0, styled_1.default)("div") `
   ${navigation};

package/lib/hooks/useEntityList.js

@@ -28,7 +28,7 @@ const useEntityList = (staticResponse) => {
     const { catalog, entityMapper, fetchAllEntities, fetchEntitiesFromQuery, path, } = (0, useEntityService_1.useEntityService)();
     const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
     const { data, isIdle, isLoading, run } = (0, useAsync_1.useAsync)();
-    const { catalogState, entityPageState, filterState, tabValue } = exploreState;
+    const { catalogState, entityPageState, featureFlagState, filterState, tabValue, } = exploreState;
     const { pagination, termFacets } = data || {};
     const { updateFilterQueryString } = (0, useURLFilterParams_1.useURLFilterParams)();
     const { sorting } = entityPageState[tabValue];
@@ -37,8 +37,8 @@ const useEntityList = (staticResponse) => {
     const isFetching = isIdle || isLoading;
     // Update the filter query string when the filter state changes.
     (0, react_1.useEffect)(() => {
-        updateFilterQueryString(catalogState, filterState);
-    }, [catalogState, filterState, updateFilterQueryString]);
+        updateFilterQueryString(catalogState, featureFlagState, filterState);
+    }, [catalogState, featureFlagState, filterState, updateFilterQueryString]);
     // Fetch entities - on change of filter state - server-side fetching and server-side filtering.
     (0, react_1.useEffect)(() => {
         var _a, _b;

package/lib/hooks/useURLFilterParams.d.ts

@@ -1,9 +1,10 @@
 import { SelectedFilter } from "../common/entities";
-import { CatalogState } from "../providers/exploreState";
+import { CatalogState, FeatureFlagState } from "../providers/exploreState";
 interface UseURLFilterParamsResult {
     decodedCatalogParam: string | undefined;
+    decodedFeatureFlagParam: string | undefined;
     decodedFilterParam: string;
-    updateFilterQueryString: (catalogState: CatalogState, filterState: SelectedFilter[]) => void;
+    updateFilterQueryString: (catalogState: CatalogState, featureFlagState: FeatureFlagState, filterState: SelectedFilter[]) => void;
 }
 /**
  * useURLFilterParams hook is used to keep track of the url search params, and update them,

package/lib/hooks/useURLFilterParams.js

@@ -10,28 +10,32 @@ const useLocation_1 = require("./useLocation");
  * @returns an object containing a update function and the current filter
  */
 const useURLFilterParams = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const { basePath, push } = (0, router_1.useRouter)();
     const { href, pathname, search } = (0, useLocation_1.useLocation)() || {};
-    const filterParam = (_a = search === null || search === void 0 ? void 0 : search.get("filter")) !== null && _a !== void 0 ? _a : "[]";
-    const catalogParam = (_b = search === null || search === void 0 ? void 0 : search.get("catalog")) !== null && _b !== void 0 ? _b : undefined;
-    const updateFilterQueryString = (0, react_1.useCallback)((catalogState, filterState) => {
+    const featureFlagParam = (_a = search === null || search === void 0 ? void 0 : search.get("ff")) !== null && _a !== void 0 ? _a : undefined;
+    const filterParam = (_b = search === null || search === void 0 ? void 0 : search.get("filter")) !== null && _b !== void 0 ? _b : "[]";
+    const catalogParam = (_c = search === null || search === void 0 ? void 0 : search.get("catalog")) !== null && _c !== void 0 ? _c : undefined;
+    const updateFilterQueryString = (0, react_1.useCallback)((catalogState, featureFlagState, filterState) => {
         if (catalogParam !== catalogState ||
+            featureFlagParam !== featureFlagState ||
             filterParam !== JSON.stringify(filterState)) {
+            const featureFlag = featureFlagState ? { ff: featureFlagState } : {};
             const filter = filterState.length > 0 ? { filter: JSON.stringify(filterState) } : {};
             const catalog = catalogState ? { catalog: catalogState } : {};
             push({
                 pathname: pathname === null || pathname === void 0 ? void 0 : pathname.replace(basePath, ""),
-                query: Object.assign(Object.assign({}, catalog), filter),
+                query: Object.assign(Object.assign(Object.assign({}, catalog), featureFlag), filter),
             }, undefined, {
                 shallow: true,
             });
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps -- push method isn't memoized and shouldn't be added as deps https://github.com/vercel/next.js/issues/18127
-    [catalogParam, filterParam, href]);
+    [catalogParam, featureFlagParam, filterParam, href]);
     return {
         decodedCatalogParam: catalogParam,
+        decodedFeatureFlagParam: featureFlagParam,
         decodedFilterParam: filterParam,
         updateFilterQueryString,
     };

package/lib/hooks/useUpdateURLSearchParams.js

@@ -10,12 +10,12 @@ const useURLFilterParams_1 = require("./useURLFilterParams");
 const useUpdateURLSearchParams = () => {
     const { exploreState } = (0, useExploreState_1.useExploreState)();
     const { updateFilterQueryString } = (0, useURLFilterParams_1.useURLFilterParams)();
-    const { catalogState, filterState } = exploreState;
+    const { catalogState, featureFlagState, filterState } = exploreState;
     /**
      * Update the URL search params when the filter state changes.
      */
     (0, react_1.useEffect)(() => {
-        updateFilterQueryString(catalogState, filterState);
-    }, [catalogState, filterState, updateFilterQueryString]);
+        updateFilterQueryString(catalogState, featureFlagState, filterState);
+    }, [catalogState, featureFlagState, filterState, updateFilterQueryString]);
 };
 exports.useUpdateURLSearchParams = useUpdateURLSearchParams;

package/lib/providers/exploreState/constants.js

@@ -16,6 +16,7 @@ exports.INITIAL_STATE = {
     catalogState: undefined,
     categoryViews: [],
     entityPageState: {},
+    featureFlagState: undefined,
     filterCount: 0,
     filterState: [],
     isRelatedView: false,

package/lib/providers/exploreState/utils.d.ts

@@ -13,9 +13,10 @@ export declare function getFilterCount(filterState: SelectedFilter[]): number;
  * @param entityListType - Entity list type.
  * @param decodedFilterParam - Decoded filter parameter.
  * @param decodedCatalogParam - Decoded catalog parameter.
+ * @param decodedFeatureFlagParam - Decoded feature flag parameter.
  * @returns explore state.
  */
-export declare function initExploreState(config: SiteConfig, entityListType: string, decodedFilterParam: string, decodedCatalogParam?: string): ExploreState;
+export declare function initExploreState(config: SiteConfig, entityListType: string, decodedFilterParam: string, decodedCatalogParam?: string, decodedFeatureFlagParam?: string): ExploreState;
 /**
  * Initializes filter state from URL "filter" parameter.
  * @param decodedFilterParam - Decoded filter parameter.

package/lib/providers/exploreState/utils.js

@@ -20,12 +20,13 @@ exports.getFilterCount = getFilterCount;
  * @param entityListType - Entity list type.
  * @param decodedFilterParam - Decoded filter parameter.
  * @param decodedCatalogParam - Decoded catalog parameter.
+ * @param decodedFeatureFlagParam - Decoded feature flag parameter.
  * @returns explore state.
  */
-function initExploreState(config, entityListType, decodedFilterParam, decodedCatalogParam) {
+function initExploreState(config, entityListType, decodedFilterParam, decodedCatalogParam, decodedFeatureFlagParam) {
     const filterState = initFilterState(decodedFilterParam);
     const filterCount = getFilterCount(filterState);
-    return Object.assign(Object.assign({}, constants_1.INITIAL_STATE), { catalogState: decodedCatalogParam, entityPageState: initEntityPageState(config), filterCount,
+    return Object.assign(Object.assign({}, constants_1.INITIAL_STATE), { catalogState: decodedCatalogParam, entityPageState: initEntityPageState(config), featureFlagState: decodedFeatureFlagParam, filterCount,
         filterState, listView: exploreState_1.ENTITY_VIEW.EXACT, tabValue: entityListType });
 }
 exports.initExploreState = initExploreState;

package/lib/providers/exploreState.d.ts

@@ -40,6 +40,7 @@ export declare type ExploreState = {
     catalogState: CatalogState;
     categoryViews: SelectCategory[];
     entityPageState: EntityPageStateMapper;
+    featureFlagState: FeatureFlagState;
     filterCount: number;
     filterState: SelectedFilter[];
     isRelatedView: boolean;
@@ -57,6 +58,7 @@ export interface ExploreStateContextProps {
     exploreDispatch: Dispatch<ExploreAction>;
     exploreState: ExploreState;
 }
+export declare type FeatureFlagState = string | undefined;
 /**
  * List items.
  */

package/lib/providers/exploreState.js

@@ -65,10 +65,10 @@ exports.ExploreStateContext = (0, react_1.createContext)({
 function ExploreStateProvider({ children, entityListType, }) {
     const { config, defaultEntityListType } = (0, useConfig_1.useConfig)();
     const categoryConfigs = (0, useCategoryConfigs_1.useCategoryConfigs)();
-    const { decodedCatalogParam, decodedFilterParam } = (0, useURLFilterParams_1.useURLFilterParams)();
+    const { decodedCatalogParam, decodedFeatureFlagParam, decodedFilterParam } = (0, useURLFilterParams_1.useURLFilterParams)();
     const { isEnabled: isAuthEnabled, token } = (0, useAuthentication_1.useAuthentication)();
     const entityList = entityListType || defaultEntityListType;
-    const [initReducerState] = (0, react_1.useState)(() => (0, utils_1.initExploreState)(config, entityList, decodedFilterParam, decodedCatalogParam));
+    const [initReducerState] = (0, react_1.useState)(() => (0, utils_1.initExploreState)(config, entityList, decodedFilterParam, decodedCatalogParam, decodedFeatureFlagParam));
     const [exploreState, exploreDispatch] = (0, react_1.useReducer)((s, a) => exploreReducer(s, a, {
         categoryConfigs,
         config,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/apis/azul/common/entities.ts

@@ -181,4 +181,5 @@ export enum MANIFEST_DOWNLOAD_FORMAT {
   "FULL" = "full",
   "TERRA_BDBAG" = "terra.bdbag",
   "TERRA_PFB" = "terra.pfb",
+  "VERBATIM_PFB" = "verbatim.pfb",
 }

package/src/components/Export/components/ExportToTerra/exportToTerra.tsx

@@ -18,7 +18,7 @@ export interface ExportToTerraProps {
   fileSummaryFacetName: string;
   filters: Filters; // Initializes export to terra filters.
   formFacet: FormFacet;
-  manifestDownloadFormat: ManifestDownloadFormat;
+  manifestDownloadFormat?: ManifestDownloadFormat;
   manifestDownloadFormats: ManifestDownloadFormat[];
 }
 

package/src/components/Layout/components/ContentLayout/common/constants.ts

@@ -12,6 +12,12 @@ export const LAYOUT_STYLE_CONTRAST_LIGHTEST: LayoutStyle = {
   outline: PANEL_BACKGROUND_COLOR.DEFAULT,
 };
 
+export const LAYOUT_STYLE_NO_CONTRAST_DEFAULT: LayoutStyle = {
+  content: PANEL_BACKGROUND_COLOR.DEFAULT,
+  navigation: PANEL_BACKGROUND_COLOR.DEFAULT,
+  outline: PANEL_BACKGROUND_COLOR.DEFAULT,
+};
+
 export const LAYOUT_STYLE_NO_CONTRAST_LIGHT: LayoutStyle = {
   content: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
   navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,

package/src/components/Layout/components/ContentLayout/contentLayout.styles.ts

@@ -100,6 +100,7 @@ export const NavigationGrid = styled.div<GridProps>`
 export const ContentGrid = styled.div<GridProps>`
   ${content};
   grid-area: content;
+  min-width: 0;
 `;
 
 export const OutlineGrid = styled("div")<GridProps>`

package/src/hooks/useEntityList.ts

@@ -44,7 +44,13 @@ export const useEntityList = (
   } = useEntityService();
   const { exploreDispatch, exploreState } = useExploreState();
   const { data, isIdle, isLoading, run } = useAsync<AzulEntitiesResponse>();
-  const { catalogState, entityPageState, filterState, tabValue } = exploreState;
+  const {
+    catalogState,
+    entityPageState,
+    featureFlagState,
+    filterState,
+    tabValue,
+  } = exploreState;
   const { pagination, termFacets } = data || {};
   const { updateFilterQueryString } = useURLFilterParams();
   const { sorting } = entityPageState[tabValue];
@@ -58,8 +64,8 @@ export const useEntityList = (
 
   // Update the filter query string when the filter state changes.
   useEffect(() => {
-    updateFilterQueryString(catalogState, filterState);
-  }, [catalogState, filterState, updateFilterQueryString]);
+    updateFilterQueryString(catalogState, featureFlagState, filterState);
+  }, [catalogState, featureFlagState, filterState, updateFilterQueryString]);
 
   // Fetch entities - on change of filter state - server-side fetching and server-side filtering.
   useEffect(() => {

package/src/hooks/useURLFilterParams.ts

@@ -1,14 +1,16 @@
 import { useRouter } from "next/router";
 import { useCallback } from "react";
 import { SelectedFilter } from "../common/entities";
-import { CatalogState } from "../providers/exploreState";
+import { CatalogState, FeatureFlagState } from "../providers/exploreState";
 import { useLocation } from "./useLocation";
 
 interface UseURLFilterParamsResult {
   decodedCatalogParam: string | undefined;
+  decodedFeatureFlagParam: string | undefined;
   decodedFilterParam: string;
   updateFilterQueryString: (
     catalogState: CatalogState,
+    featureFlagState: FeatureFlagState,
     filterState: SelectedFilter[]
   ) => void;
 }
@@ -21,22 +23,29 @@ interface UseURLFilterParamsResult {
 export const useURLFilterParams = (): UseURLFilterParamsResult => {
   const { basePath, push } = useRouter();
   const { href, pathname, search } = useLocation() || {};
+  const featureFlagParam = search?.get("ff") ?? undefined;
   const filterParam = search?.get("filter") ?? "[]";
   const catalogParam = search?.get("catalog") ?? undefined;
 
   const updateFilterQueryString = useCallback(
-    (catalogState: CatalogState, filterState: SelectedFilter[]) => {
+    (
+      catalogState: CatalogState,
+      featureFlagState: FeatureFlagState,
+      filterState: SelectedFilter[]
+    ) => {
       if (
         catalogParam !== catalogState ||
+        featureFlagParam !== featureFlagState ||
         filterParam !== JSON.stringify(filterState)
       ) {
+        const featureFlag = featureFlagState ? { ff: featureFlagState } : {};
         const filter =
           filterState.length > 0 ? { filter: JSON.stringify(filterState) } : {};
         const catalog = catalogState ? { catalog: catalogState } : {};
         push(
           {
             pathname: pathname?.replace(basePath, ""),
-            query: { ...catalog, ...filter },
+            query: { ...catalog, ...featureFlag, ...filter },
           },
           undefined,
           {
@@ -46,11 +55,12 @@ export const useURLFilterParams = (): UseURLFilterParamsResult => {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- push method isn't memoized and shouldn't be added as deps https://github.com/vercel/next.js/issues/18127
-    [catalogParam, filterParam, href]
+    [catalogParam, featureFlagParam, filterParam, href]
   );
 
   return {
     decodedCatalogParam: catalogParam,
+    decodedFeatureFlagParam: featureFlagParam,
     decodedFilterParam: filterParam,
     updateFilterQueryString,
   };

package/src/hooks/useUpdateURLSearchParams.ts

@@ -8,12 +8,12 @@ import { useURLFilterParams } from "./useURLFilterParams";
 export const useUpdateURLSearchParams = (): void => {
   const { exploreState } = useExploreState();
   const { updateFilterQueryString } = useURLFilterParams();
-  const { catalogState, filterState } = exploreState;
+  const { catalogState, featureFlagState, filterState } = exploreState;
 
   /**
    * Update the URL search params when the filter state changes.
    */
   useEffect(() => {
-    updateFilterQueryString(catalogState, filterState);
-  }, [catalogState, filterState, updateFilterQueryString]);
+    updateFilterQueryString(catalogState, featureFlagState, filterState);
+  }, [catalogState, featureFlagState, filterState, updateFilterQueryString]);
 };

package/src/providers/exploreState/constants.ts

@@ -16,6 +16,7 @@ export const INITIAL_STATE: ExploreState = {
   catalogState: undefined,
   categoryViews: [],
   entityPageState: {},
+  featureFlagState: undefined,
   filterCount: 0,
   filterState: [],
   isRelatedView: false,

package/src/providers/exploreState/utils.ts

@@ -25,13 +25,15 @@ export function getFilterCount(filterState: SelectedFilter[]): number {
  * @param entityListType - Entity list type.
  * @param decodedFilterParam - Decoded filter parameter.
  * @param decodedCatalogParam - Decoded catalog parameter.
+ * @param decodedFeatureFlagParam - Decoded feature flag parameter.
  * @returns explore state.
  */
 export function initExploreState(
   config: SiteConfig,
   entityListType: string,
   decodedFilterParam: string,
-  decodedCatalogParam?: string
+  decodedCatalogParam?: string,
+  decodedFeatureFlagParam?: string
 ): ExploreState {
   const filterState = initFilterState(decodedFilterParam);
   const filterCount = getFilterCount(filterState);
@@ -39,6 +41,7 @@ export function initExploreState(
     ...INITIAL_STATE,
     catalogState: decodedCatalogParam,
     entityPageState: initEntityPageState(config),
+    featureFlagState: decodedFeatureFlagParam,
     filterCount,
     filterState,
     listView: ENTITY_VIEW.EXACT,

package/src/providers/exploreState.tsx

@@ -80,6 +80,7 @@ export type ExploreState = {
   catalogState: CatalogState;
   categoryViews: SelectCategory[];
   entityPageState: EntityPageStateMapper;
+  featureFlagState: FeatureFlagState;
   filterCount: number;
   filterState: SelectedFilter[];
   isRelatedView: boolean;
@@ -99,6 +100,8 @@ export interface ExploreStateContextProps {
   exploreState: ExploreState;
 }
 
+export type FeatureFlagState = string | undefined;
+
 /**
  * List items.
  */
@@ -175,7 +178,8 @@ export function ExploreStateProvider({
 }): JSX.Element {
   const { config, defaultEntityListType } = useConfig();
   const categoryConfigs = useCategoryConfigs();
-  const { decodedCatalogParam, decodedFilterParam } = useURLFilterParams();
+  const { decodedCatalogParam, decodedFeatureFlagParam, decodedFilterParam } =
+    useURLFilterParams();
   const { isEnabled: isAuthEnabled, token } = useAuthentication();
   const entityList = entityListType || defaultEntityListType;
   const [initReducerState] = useState(() =>
@@ -183,7 +187,8 @@ export function ExploreStateProvider({
       config,
       entityList,
       decodedFilterParam,
-      decodedCatalogParam
+      decodedCatalogParam,
+      decodedFeatureFlagParam
     )
   );