@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/viewModelBuilders/common/utils.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sanitizeStringArray = exports.sanitizeString = exports.mapCategoryKeyLabel = void 0;
 /**
  * Map category key to category label.
  * @param CATEGORY_KEY - Category key.
  * @param CATEGORY_LABEL - Category label.
  * @returns map of category key to category label.
  */
-function mapCategoryKeyLabel(CATEGORY_KEY, CATEGORY_LABEL) {
+export function mapCategoryKeyLabel(CATEGORY_KEY, CATEGORY_LABEL) {
     const categoryKeyLabel = new Map();
     for (const [key, categoryKey] of Object.entries(CATEGORY_KEY)) {
         const categoryLabel = CATEGORY_LABEL[key];
@@ -15,13 +12,12 @@ function mapCategoryKeyLabel(CATEGORY_KEY, CATEGORY_LABEL) {
     }
     return categoryKeyLabel;
 }
-exports.mapCategoryKeyLabel = mapCategoryKeyLabel;
 /**
  * Sanitizes a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
  * @param str - String to sanitize.
  * @returns the string or sanitized string value.
  */
-function sanitizeString(str) {
+export function sanitizeString(str) {
     if (str === "" || str === null || str === undefined) {
         return "Unspecified";
     }
@@ -29,17 +25,15 @@ function sanitizeString(str) {
         return str;
     }
 }
-exports.sanitizeString = sanitizeString;
 /**
  * Sanitizes a string array for display i.e. any string element within the string array that is an empty, null or
  * undefined value is sanitized to "Unspecified".
  * @param strArray - String array to sanitize.
  * @returns the string array, sanitized.
  */
-function sanitizeStringArray(strArray) {
+export function sanitizeStringArray(strArray) {
     if (!strArray || strArray.length === 0) {
         return ["Unspecified"];
     }
     return strArray.map(sanitizeString);
 }
-exports.sanitizeStringArray = sanitizeStringArray;

package/lib/views/ContentView/contentView.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { ContentLayout } from "../../components/Layout/components/ContentLayout/contentLayout";
+export const ContentView = ({ content, layoutStyle, navigation, outline, }) => {
+    return (React.createElement(ContentLayout, { content: content, layoutStyle: layoutStyle, navigation: navigation, outline: outline }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentView = void 0;
-const react_1 = __importDefault(require("react"));
-const contentLayout_1 = require("../../components/Layout/components/ContentLayout/contentLayout");
-const ContentView = ({ content, layoutStyle, navigation, outline, }) => {
-    return (react_1.default.createElement(contentLayout_1.ContentLayout, { content: content, layoutStyle: layoutStyle, navigation: navigation, outline: outline }));
-};
-exports.ContentView = ContentView;

package/lib/views/ContentView/contentView.stories.js

@@ -1,41 +1,35 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentViewStory = void 0;
-const logo_svg_1 = __importDefault(require("images/logo.svg"));
-const react_1 = __importDefault(require("react"));
-const navBarHero_1 = require("../../components/Layout/components/Nav/components/NavBarHero/navBarHero");
-const nav_1 = require("../../components/Layout/components/Nav/nav");
-const contentView_1 = require("./contentView");
-exports.default = {
-    component: contentView_1.ContentView,
+import image from "images/logo.svg";
+import React from "react";
+import { NavBarHero } from "../../components/Layout/components/Nav/components/NavBarHero/navBarHero";
+import { Nav } from "../../components/Layout/components/Nav/nav";
+import { ContentView } from "./contentView";
+export default {
+    component: ContentView,
     parameters: {
         layout: "fullscreen",
     },
     title: "Views/ContentView",
 };
-exports.ContentViewStory = {
+export const ContentViewStory = {
     args: {
-        content: (react_1.default.createElement("div", null,
-            react_1.default.createElement("h1", null, "Clinical Sequencing Evidence-Generating Research"),
-            react_1.default.createElement("p", null, "The Clinical Sequencing Evidence-Generating Research (CSER) consortium is a national multi-site research program funded by the National Human Genome Research Institute (NHGRI), the National Cancer Institute (NCI) and the National Institute on Minority Health and Health Disparities (NIMHD)."),
-            react_1.default.createElement("p", null, "Prioritizing engagement of traditionally underrepresented populations in genomics research, CSER\u2019s seven clinical sites seek to study the effectiveness of integrating genome sequencing into the clinical care of diverse and medically underserved individuals. CSER\u2019s research goals include measuring sequencing\u2019s clinical utility through patient and familial responses to genomic testing and evaluating patient-provider-laboratory interactions that influence the use of sequencing. Drawing from the expertise of clinicians, scientists, ethicists, bioinformaticians, economists, and legal scholars, CSER is poised to develop and share best practices in areas such as the discovery and interpretation of genomic variants, return of results, healthcare utilization, health outcomes and metrics, and the ethical, legal, and social implications of sequencing in diverse populations."),
-            react_1.default.createElement("h2", null),
-            react_1.default.createElement("p", null, "In CSER, we aim to improve the use of genetic information in medicine and reduce barriers to genetic services among underserved groups. Our research seeks to better understand connections between genes, other drivers of health and disease, and health outcomes. We have worked with study participants and community partners to help make our research more inclusive. We still have much more work to do to ensure that our findings are applied in fair and just ways. We also acknowledge the need for more diversity among our own researchers. As we publish the results of CSER, we commit to carrying efforts forward to make sure people of all backgrounds benefit from genomic research and medicine."),
-            react_1.default.createElement("h3", null, "Clinical sequencing evidence-generating research (cser) sites:"),
-            react_1.default.createElement("p", null, "In CSER, we aim to improve the use of genetic information in medicine and reduce barriers to genetic services among underserved groups. Our research seeks to better understand connections between genes, other drivers of health and disease, and health outcomes. We have worked with study participants and community partners to help make our research more inclusive. We still have much more work to do to ensure that our findings are applied in fair and just ways. We also acknowledge the need for more diversity among our own researchers. As we publish the results of CSER, we commit to carrying efforts forward to make sure people of all backgrounds benefit from genomic research and medicine."),
-            react_1.default.createElement("ul", null,
-                react_1.default.createElement("li", null, "CHARM, Kaiser Permanente Northwest"),
-                react_1.default.createElement("li", null, "KidsCanSeq, Baylor College of Medicine"),
-                react_1.default.createElement("li", null, "NCGENES 2, University of North Carolina, Chapel Hill"),
-                react_1.default.createElement("li", null, "NYCKidSeq, Icahn School of Medicine at Mount Sinai"),
-                react_1.default.createElement("li", null, "P3EGS, University of California, San Francisco"),
-                react_1.default.createElement("li", null, "SouthSeq, HudsonAlpha Institute for Biotechnology"),
-                react_1.default.createElement("li", null, "ClinSeq A2, NHGRI Intramural"),
-                react_1.default.createElement("li", null, "CSER Coordinating Center, University of Washington, Seattle")))),
-        navigation: (react_1.default.createElement(nav_1.Nav, { Hero: react_1.default.createElement(navBarHero_1.NavBarHero, { byline: "Active August, 2020 to July, 2023", logo: Object.assign(Object.assign({}, logo_svg_1.default), { height: 40 }), slogan: "Clinical Sequencing Evidence-Generating Research" }), navigation: [
+        content: (React.createElement("div", null,
+            React.createElement("h1", null, "Clinical Sequencing Evidence-Generating Research"),
+            React.createElement("p", null, "The Clinical Sequencing Evidence-Generating Research (CSER) consortium is a national multi-site research program funded by the National Human Genome Research Institute (NHGRI), the National Cancer Institute (NCI) and the National Institute on Minority Health and Health Disparities (NIMHD)."),
+            React.createElement("p", null, "Prioritizing engagement of traditionally underrepresented populations in genomics research, CSER\u2019s seven clinical sites seek to study the effectiveness of integrating genome sequencing into the clinical care of diverse and medically underserved individuals. CSER\u2019s research goals include measuring sequencing\u2019s clinical utility through patient and familial responses to genomic testing and evaluating patient-provider-laboratory interactions that influence the use of sequencing. Drawing from the expertise of clinicians, scientists, ethicists, bioinformaticians, economists, and legal scholars, CSER is poised to develop and share best practices in areas such as the discovery and interpretation of genomic variants, return of results, healthcare utilization, health outcomes and metrics, and the ethical, legal, and social implications of sequencing in diverse populations."),
+            React.createElement("h2", null),
+            React.createElement("p", null, "In CSER, we aim to improve the use of genetic information in medicine and reduce barriers to genetic services among underserved groups. Our research seeks to better understand connections between genes, other drivers of health and disease, and health outcomes. We have worked with study participants and community partners to help make our research more inclusive. We still have much more work to do to ensure that our findings are applied in fair and just ways. We also acknowledge the need for more diversity among our own researchers. As we publish the results of CSER, we commit to carrying efforts forward to make sure people of all backgrounds benefit from genomic research and medicine."),
+            React.createElement("h3", null, "Clinical sequencing evidence-generating research (cser) sites:"),
+            React.createElement("p", null, "In CSER, we aim to improve the use of genetic information in medicine and reduce barriers to genetic services among underserved groups. Our research seeks to better understand connections between genes, other drivers of health and disease, and health outcomes. We have worked with study participants and community partners to help make our research more inclusive. We still have much more work to do to ensure that our findings are applied in fair and just ways. We also acknowledge the need for more diversity among our own researchers. As we publish the results of CSER, we commit to carrying efforts forward to make sure people of all backgrounds benefit from genomic research and medicine."),
+            React.createElement("ul", null,
+                React.createElement("li", null, "CHARM, Kaiser Permanente Northwest"),
+                React.createElement("li", null, "KidsCanSeq, Baylor College of Medicine"),
+                React.createElement("li", null, "NCGENES 2, University of North Carolina, Chapel Hill"),
+                React.createElement("li", null, "NYCKidSeq, Icahn School of Medicine at Mount Sinai"),
+                React.createElement("li", null, "P3EGS, University of California, San Francisco"),
+                React.createElement("li", null, "SouthSeq, HudsonAlpha Institute for Biotechnology"),
+                React.createElement("li", null, "ClinSeq A2, NHGRI Intramural"),
+                React.createElement("li", null, "CSER Coordinating Center, University of Washington, Seattle")))),
+        navigation: (React.createElement(Nav, { Hero: React.createElement(NavBarHero, { byline: "Active August, 2020 to July, 2023", logo: { ...image, height: 40 }, slogan: "Clinical Sequencing Evidence-Generating Research" }), navigation: [
                 { active: true, label: "About", url: "/" },
                 { label: "News", url: "/" },
                 { label: "Projects", url: "/" },

package/lib/views/EntityDetailView/entityDetailView.js

@@ -1,44 +1,15 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntityDetailView = void 0;
-const head_1 = __importDefault(require("next/head"));
-const router_1 = require("next/router");
-const react_1 = __importStar(require("react"));
-const constants_1 = require("../../common/constants");
-const tabs_1 = require("../../components/common/Tabs/tabs");
-const ComponentCreator_1 = require("../../components/ComponentCreator/ComponentCreator");
-const detail_1 = require("../../components/Detail/detail");
-const useConfig_1 = require("../../hooks/useConfig");
-const useCurrentDetailTab_1 = require("../../hooks/useCurrentDetailTab");
-const useEntityHeadTitle_1 = require("../../hooks/useEntityHeadTitle");
-const useFetchEntity_1 = require("../../hooks/useFetchEntity");
-const useUpdateURLCatalogParam_1 = require("../../hooks/useUpdateURLCatalogParam");
+import Head from "next/head";
+import { useRouter } from "next/router";
+import React, { Fragment } from "react";
+import { PARAMS_INDEX_UUID } from "../../common/constants";
+import { Tabs } from "../../components/common/Tabs/tabs";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { Detail as DetailView } from "../../components/Detail/detail";
+import { useConfig } from "../../hooks/useConfig";
+import { useCurrentDetailTab } from "../../hooks/useCurrentDetailTab";
+import { useEntityHeadTitle } from "../../hooks/useEntityHeadTitle";
+import { useFetchEntity } from "../../hooks/useFetchEntity";
+import { useUpdateURLCatalogParams } from "../../hooks/useUpdateURLCatalogParam";
 /**
  * Returns tabs to be used as a prop for the Tabs component.
  * @param entity - Entity config related to the /explore/projects route.
@@ -52,22 +23,21 @@ function getTabs(entity) {
         value: route,
     }));
 }
-const EntityDetailView = (props) => {
-    var _a;
-    (0, useUpdateURLCatalogParam_1.useUpdateURLCatalogParams)();
-    const { currentTab, route: tabRoute } = (0, useCurrentDetailTab_1.useCurrentDetailTab)();
-    const { response } = (0, useFetchEntity_1.useFetchEntity)(props);
-    const { push, query } = (0, router_1.useRouter)();
-    const { entityConfig } = (0, useConfig_1.useConfig)();
+export const EntityDetailView = (props) => {
+    useUpdateURLCatalogParams();
+    const { currentTab, route: tabRoute } = useCurrentDetailTab();
+    const { response } = useFetchEntity(props);
+    const { push, query } = useRouter();
+    const { entityConfig } = useConfig();
     const { mainColumn, sideColumn } = currentTab;
     const { detail, route: entityRoute } = entityConfig;
     const { detailOverviews, top } = detail;
-    const uuid = (_a = query.params) === null || _a === void 0 ? void 0 : _a[constants_1.PARAMS_INDEX_UUID];
-    const isDetailOverview = detailOverviews === null || detailOverviews === void 0 ? void 0 : detailOverviews.includes(currentTab.label);
+    const uuid = query.params?.[PARAMS_INDEX_UUID];
+    const isDetailOverview = detailOverviews?.includes(currentTab.label);
     const tabs = getTabs(entityConfig);
-    const title = (0, useEntityHeadTitle_1.useEntityHeadTitle)(response);
+    const title = useEntityHeadTitle(response);
     if (!response) {
-        return react_1.default.createElement("span", null); //TODO: return the loading UI component
+        return React.createElement("span", null); //TODO: return the loading UI component
     }
     /**
      * Callback fired when selected tab value changes.
@@ -77,9 +47,8 @@ const EntityDetailView = (props) => {
     const onTabChange = (tabValue) => {
         push(`/${entityRoute}/${uuid}/${tabValue}`);
     };
-    return (react_1.default.createElement(react_1.Fragment, null,
-        title && (react_1.default.createElement(head_1.default, null,
-            react_1.default.createElement("title", null, title))),
-        react_1.default.createElement(detail_1.Detail, { isDetailOverview: isDetailOverview, mainColumn: react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: mainColumn, response: response }), sideColumn: sideColumn ? (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: sideColumn, response: response })) : undefined, Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabRoute }), top: react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: top, response: response }) })));
+    return (React.createElement(Fragment, null,
+        title && (React.createElement(Head, null,
+            React.createElement("title", null, title))),
+        React.createElement(DetailView, { isDetailOverview: isDetailOverview, mainColumn: React.createElement(ComponentCreator, { components: mainColumn, response: response }), sideColumn: sideColumn ? (React.createElement(ComponentCreator, { components: sideColumn, response: response })) : undefined, Tabs: React.createElement(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabRoute }), top: React.createElement(ComponentCreator, { components: top, response: response }) })));
 };
-exports.EntityDetailView = EntityDetailView;

package/lib/views/ExploreView/exploreView.js

@@ -1,52 +1,26 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExploreView = void 0;
-const router_1 = require("next/router");
-const react_1 = __importStar(require("react"));
-const analytics_1 = require("../../common/analytics/analytics");
-const entities_1 = require("../../common/analytics/entities");
-const tabs_1 = require("../../components/common/Tabs/tabs");
-const ComponentCreator_1 = require("../../components/ComponentCreator/ComponentCreator");
-const clearAllFilters_1 = require("../../components/Filter/components/ClearAllFilters/clearAllFilters");
-const filters_1 = require("../../components/Filter/components/Filters/filters");
-const searchAllFilters_1 = require("../../components/Filter/components/SearchAllFilters/searchAllFilters");
-const index_1 = require("../../components/Index/index");
-const sidebarButton_1 = require("../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton");
-const sidebarLabel_1 = require("../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel");
-const sidebarTools_styles_1 = require("../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles");
-const sidebar_1 = require("../../components/Layout/components/Sidebar/sidebar");
-const tableCreator_1 = require("../../components/TableCreator/tableCreator");
-const useBreakpointHelper_1 = require("../../hooks/useBreakpointHelper");
-const useConfig_1 = require("../../hooks/useConfig");
-const useEntityList_1 = require("../../hooks/useEntityList");
-const useExploreState_1 = require("../../hooks/useExploreState");
-const useSummary_1 = require("../../hooks/useSummary");
-const exploreState_1 = require("../../providers/exploreState");
-const constants_1 = require("../../providers/exploreState/constants");
-const breakpoints_1 = require("../../theme/common/breakpoints");
+import { useRouter } from "next/router";
+import React, { useEffect, useMemo, useState } from "react";
+import { track } from "../../common/analytics/analytics";
+import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
+import { Tabs } from "../../components/common/Tabs/tabs";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
+import { Filters, } from "../../components/Filter/components/Filters/filters";
+import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { Index as IndexView } from "../../components/Index/index";
+import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
+import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
+import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
+import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
+import { TableCreator } from "../../components/TableCreator/tableCreator";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
+import { useConfig } from "../../hooks/useConfig";
+import { useEntityList } from "../../hooks/useEntityList";
+import { useExploreState } from "../../hooks/useExploreState";
+import { useSummary } from "../../hooks/useSummary";
+import { ExploreActionKind } from "../../providers/exploreState";
+import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
+import { DESKTOP_SM } from "../../theme/common/breakpoints";
 /**
  * Returns tabs to be used as a prop for the Tabs component.
  * @param entities - Entities config.
@@ -60,21 +34,21 @@ function getTabs(entities) {
         value: route,
     }));
 }
-const ExploreView = (props) => {
-    const [isDrawerOpen, setIsDrawerOpen] = (0, react_1.useState)(false);
-    const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.DESKTOP_SM);
-    const { config, entityConfig } = (0, useConfig_1.useConfig)(); // Get app level config.
-    const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)(); // Get the useReducer state and dispatch for "Explore".
+export const ExploreView = (props) => {
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const { config, entityConfig } = useConfig(); // Get app level config.
+    const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
     const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
     const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
-    const { push } = (0, router_1.useRouter)();
+    const { push } = useRouter();
     const tabs = getTabs(entities);
-    const { response: summaryResponse } = (0, useSummary_1.useSummary)(); // Fetch summary.
-    (0, useEntityList_1.useEntityList)(props); // Fetch entities.
+    const { response: summaryResponse } = useSummary(); // Fetch summary.
+    useEntityList(props); // Fetch entities.
     const { entityListType } = props;
-    const categoryFilters = (0, react_1.useMemo)(() => buildCategoryFilters(categoryViews, categoryGroups), [categoryGroups, categoryViews]);
+    const categoryFilters = useMemo(() => buildCategoryFilters(categoryViews, categoryGroups), [categoryGroups, categoryViews]);
     /**
      * Closes filter drawer.
      */
@@ -91,10 +65,9 @@ const ExploreView = (props) => {
      * @param searchTerm - Search term used to find the value.
      */
     const onFilterChange = (fromSearchAll, categoryKey, selectedCategoryValue, selected, categorySection, searchTerm) => {
-        var _a;
-        const dispatchType = categoryKey === constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS
-            ? exploreState_1.ExploreActionKind.ApplySavedFilter
-            : exploreState_1.ExploreActionKind.UpdateFilter;
+        const dispatchType = categoryKey === SELECT_CATEGORY_KEY.SAVED_FILTERS
+            ? ExploreActionKind.ApplySavedFilter
+            : ExploreActionKind.UpdateFilter;
         exploreDispatch({
             payload: {
                 categoryKey,
@@ -103,19 +76,19 @@ const ExploreView = (props) => {
             },
             type: dispatchType,
         });
-        (_a = trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterApplied) === null || _a === void 0 ? void 0 : _a.call(trackingConfig, {
+        trackingConfig?.trackFilterApplied?.({
             category: categoryKey,
             fromSearchAll,
-            searchTerm: searchTerm !== null && searchTerm !== void 0 ? searchTerm : "",
-            section: categorySection !== null && categorySection !== void 0 ? categorySection : "",
+            searchTerm: searchTerm ?? "",
+            section: categorySection ?? "",
             selected,
             value: selectedCategoryValue,
         });
         // Execute GTM tracking.
         if (selected) {
-            (0, analytics_1.track)(entities_1.EVENT_NAME.FILTER_SELECTED, {
-                [entities_1.EVENT_PARAM.FILTER_NAME]: categoryKey,
-                [entities_1.EVENT_PARAM.FILTER_VALUE]: selectedCategoryValue,
+            track(EVENT_NAME.FILTER_SELECTED, {
+                [EVENT_PARAM.FILTER_NAME]: categoryKey,
+                [EVENT_PARAM.FILTER_VALUE]: selectedCategoryValue,
             });
         }
     };
@@ -137,27 +110,26 @@ const ExploreView = (props) => {
     /**
      * Dispatch a SelectedEntityType action when entityListType changes.
      */
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (entityListType) {
             exploreDispatch({
                 payload: entityListType,
-                type: exploreState_1.ExploreActionKind.SelectEntityType,
+                type: ExploreActionKind.SelectEntityType,
             });
-            (0, analytics_1.track)(entities_1.EVENT_NAME.ENTITY_SELECTED, {
-                [entities_1.EVENT_PARAM.ENTITY_NAME]: entityListType,
+            track(EVENT_NAME.ENTITY_SELECTED, {
+                [EVENT_PARAM.ENTITY_NAME]: entityListType,
             });
         }
     }, [entityListType, exploreDispatch]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        categoryViews && !!categoryViews.length && (react_1.default.createElement(sidebar_1.Sidebar, { drawerOpen: isDrawerOpen, onDrawerClose: onCloseDrawer },
-            react_1.default.createElement(sidebarTools_styles_1.SidebarTools, null,
-                react_1.default.createElement(sidebarLabel_1.SidebarLabel, { label: "Filters" }),
-                react_1.default.createElement(clearAllFilters_1.ClearAllFilters, null),
-                react_1.default.createElement(searchAllFilters_1.SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
-            react_1.default.createElement(filters_1.Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterOpened }))),
-        react_1.default.createElement(index_1.Index, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (react_1.default.createElement(sidebarButton_1.SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
+    return (React.createElement(React.Fragment, null,
+        categoryViews && !!categoryViews.length && (React.createElement(Sidebar, { drawerOpen: isDrawerOpen, onDrawerClose: onCloseDrawer },
+            React.createElement(SidebarTools, null,
+                React.createElement(SidebarLabel, { label: "Filters" }),
+                React.createElement(ClearAllFilters, null),
+                React.createElement(SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
+            React.createElement(Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
+        React.createElement(IndexView, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
 };
-exports.ExploreView = ExploreView;
 /**
  * Builds the category views into category views grouped by the given category group configuration.
  * @param selectCategoryViews - View models of categories to display.
@@ -193,7 +165,7 @@ function renderComponent(componentsConfig, response) {
     if (!componentsConfig) {
         return;
     }
-    return react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: componentsConfig, response: response });
+    return React.createElement(ComponentCreator, { components: componentsConfig, response: response });
 }
 /**
  * Render either a loading view, empty result set notification or the table itself.
@@ -207,14 +179,14 @@ function renderList(exploreState, entityConfig, entityListType) {
     const { getId: getRowId, list, listView } = entityConfig;
     const { columns: columnsConfig, defaultSort } = list;
     if (!exploreState || !tabValue) {
-        return react_1.default.createElement(react_1.default.Fragment, null); //TODO: return the loading UI component
+        return React.createElement(React.Fragment, null); //TODO: return the loading UI component
     }
     if (entityListType !== tabValue) {
         // required currently for client-side fetching as the pre-rendered page
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        return React.createElement(React.Fragment, null);
     }
-    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading }));
+    return (React.createElement(TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:
@@ -230,5 +202,5 @@ function renderSummary(summaryConfig, summaryResponse) {
         return;
     }
     /* Render the Summaries component. */
-    return (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: summaryConfig.components, response: summaryResponse }));
+    return (React.createElement(ComponentCreator, { components: summaryConfig.components, response: summaryResponse }));
 }

package/lib/views/ExportMethodView/exportMethodView.js

@@ -1,24 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExportMethodView = void 0;
-const router_1 = require("next/router");
-const react_1 = __importDefault(require("react"));
-const ComponentCreator_1 = require("../../components/ComponentCreator/ComponentCreator");
-const backPageView_1 = require("../../components/Layout/components/BackPage/backPageView");
-const useExportConfig_1 = require("../../hooks/useExportConfig");
-const useUpdateURLSearchParams_1 = require("../../hooks/useUpdateURLSearchParams");
-const ExportMethodView = () => {
-    (0, useUpdateURLSearchParams_1.useUpdateURLSearchParams)();
-    const { pathname } = (0, router_1.useRouter)();
-    const { exportMethods, tabs } = (0, useExportConfig_1.useExportConfig)();
+import { useRouter } from "next/router";
+import React from "react";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
+import { useExportConfig } from "../../hooks/useExportConfig";
+import { useUpdateURLSearchParams } from "../../hooks/useUpdateURLSearchParams";
+export const ExportMethodView = () => {
+    useUpdateURLSearchParams();
+    const { pathname } = useRouter();
+    const { exportMethods, tabs } = useExportConfig();
     const { sideColumn } = tabs[0];
     const { mainColumn, top } = getExportMethodConfig(exportMethods, pathname) || {};
-    return (react_1.default.createElement(backPageView_1.BackPageView, { mainColumn: react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: mainColumn || [], response: {} }), sideColumn: sideColumn ? (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: sideColumn, response: {} })) : undefined, top: react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: top || [], response: {} }) }));
+    return (React.createElement(BackPageView, { mainColumn: React.createElement(ComponentCreator, { components: mainColumn || [], response: {} }), sideColumn: sideColumn ? (React.createElement(ComponentCreator, { components: sideColumn, response: {} })) : undefined, top: React.createElement(ComponentCreator, { components: top || [], response: {} }) }));
 };
-exports.ExportMethodView = ExportMethodView;
 /**
  * Returns the export method configuration for the given pathname.
  * @param exportMethods - Export methods config.

package/lib/views/ExportView/exportView.js

@@ -1,23 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExportView = void 0;
-const react_1 = __importDefault(require("react"));
-const ComponentCreator_1 = require("../../components/ComponentCreator/ComponentCreator");
-const backPageView_1 = require("../../components/Layout/components/BackPage/backPageView");
-const useExploreState_1 = require("../../hooks/useExploreState");
-const useExportConfig_1 = require("../../hooks/useExportConfig");
-const useRequestFileManifest_1 = require("../../hooks/useFileManifest/useRequestFileManifest");
-const useUpdateURLSearchParams_1 = require("../../hooks/useUpdateURLSearchParams");
-const ExportView = (props) => {
-    const { exploreState: { filterState }, } = (0, useExploreState_1.useExploreState)();
-    (0, useUpdateURLSearchParams_1.useUpdateURLSearchParams)();
-    (0, useRequestFileManifest_1.useRequestFileManifest)(undefined, filterState, undefined);
-    const { tabs, top } = (0, useExportConfig_1.useExportConfig)();
+import React from "react";
+import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
+import { useExploreState } from "../../hooks/useExploreState";
+import { useExportConfig } from "../../hooks/useExportConfig";
+import { useRequestFileManifest } from "../../hooks/useFileManifest/useRequestFileManifest";
+import { useUpdateURLSearchParams } from "../../hooks/useUpdateURLSearchParams";
+export const ExportView = (props) => {
+    const { exploreState: { filterState }, } = useExploreState();
+    useUpdateURLSearchParams();
+    useRequestFileManifest(undefined, filterState, undefined);
+    const { tabs, top } = useExportConfig();
     const currentTab = tabs[0];
     const { mainColumn, sideColumn } = currentTab;
-    return (react_1.default.createElement(backPageView_1.BackPageView, { mainColumn: react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: mainColumn, response: props }), sideColumn: sideColumn ? (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: sideColumn, response: props })) : undefined, top: react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: top, response: props }) }));
+    return (React.createElement(BackPageView, { mainColumn: React.createElement(ComponentCreator, { components: mainColumn, response: props }), sideColumn: sideColumn ? (React.createElement(ComponentCreator, { components: sideColumn, response: props })) : undefined, top: React.createElement(ComponentCreator, { components: top, response: props }) }));
 };
-exports.ExportView = ExportView;

package/lib/views/LoginView/loginView.js

@@ -1,14 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { Login } from "../../components/Login/login";
+import { useAuthenticationConfig } from "../../hooks/useAuthenticationConfig";
+export const LoginView = () => {
+    const { googleGISAuthConfig, termsOfService, text, title, warning } = useAuthenticationConfig();
+    return (React.createElement(Login, { isGoogle: !!googleGISAuthConfig, termsOfService: termsOfService, text: text, title: title, warning: warning }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoginView = void 0;
-const react_1 = __importDefault(require("react"));
-const login_1 = require("../../components/Login/login");
-const useAuthenticationConfig_1 = require("../../hooks/useAuthenticationConfig");
-const LoginView = () => {
-    const { googleGISAuthConfig, termsOfService, text, title, warning } = (0, useAuthenticationConfig_1.useAuthenticationConfig)();
-    return (react_1.default.createElement(login_1.Login, { isGoogle: !!googleGISAuthConfig, termsOfService: termsOfService, text: text, title: title, warning: warning }));
-};
-exports.LoginView = LoginView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "",
   "scripts": {
     "test": "jest",
@@ -66,7 +66,7 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.1",
     "@mui/material": "5.14.1",
-    "@tanstack/react-table": "^8.17.3",
+    "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "axios": "^1.6.7",
     "copy-to-clipboard": "3.3.1",

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/common/constants.ts

@@ -4,6 +4,7 @@ export const DEFAULT_DRAWER_PROPS: Partial<MDrawerProps> = {
   PaperProps: {
     elevation: 2,
   },
+  SlideProps: { appear: true },
   anchor: "right",
   disableEnforceFocus: true,
   disableScrollLock: true,