@databiosphere/findable-ui 23.0.0 → 25.0.0

package/lib/theme/theme.js

@@ -21,6 +21,7 @@ export function createAppTheme(customOptions) {
                 xs: B.mobile,
             },
         },
+        cssVariables: true,
         palette: {
             alert: P.alert,
             background: P.background,
@@ -49,6 +50,7 @@ export function createAppTheme(customOptions) {
             [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
             [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
             [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
+            [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
             [T.TEXT_UPPERCASE_500]: T.textUppercase500,
             fontFamily: T.fontFamily,
         },

package/lib/utils/tests.d.ts

@@ -10,3 +10,15 @@ export declare function getAnchorEl(id: string): HTMLAnchorElement;
  * @returns HTML button element.
  */
 export declare function getButtonById(id: string): HTMLButtonElement;
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export declare function getClassNames(element?: Element | null): string | null;
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export declare function getTagName(element?: Element | null): string | null;

package/lib/utils/tests.js

@@ -15,3 +15,23 @@ export function getAnchorEl(id) {
 export function getButtonById(id) {
     return screen.getByTestId(id);
 }
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export function getClassNames(element) {
+    if (!element)
+        return null;
+    return element.getAttribute("class");
+}
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export function getTagName(element) {
+    if (!element)
+        return null;
+    return element.tagName.toLowerCase();
+}

package/lib/views/ExploreView/exploreView.js

@@ -5,13 +5,14 @@ import { ComponentCreator } from "../../components/ComponentCreator/ComponentCre
 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 { ChartView } from "../../components/Index/components/EntitiesView/components/ChartView/chartView";
+import { EntityList } from "../../components/Index/components/EntitiesView/components/EntityList/entityList";
 import { Tabs } from "../../components/Index/components/Tabs/tabs";
 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";
@@ -28,7 +29,7 @@ export const ExploreView = (props) => {
     const { explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryGroups, categoryViews, filterCount } = exploreState;
+    const { categoryGroups, categoryViews, filterCount, loading } = exploreState;
     const { response: summaryResponse } = useSummary(); // Fetch summary.
     useEntityList(props); // Fetch entities.
     const { entityListType } = props;
@@ -103,7 +104,7 @@ export const ExploreView = (props) => {
                 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, null), title: entityConfig.explorerTitle || explorerTitle })));
+        React.createElement(IndexView, { className: props.className, chart: React.createElement(ChartView, { categoryFilters: categoryFilters, loading: loading }), list: React.createElement(EntityList, { entityListType: 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, null), title: entityConfig.explorerTitle || explorerTitle })));
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.
@@ -142,27 +143,6 @@ function renderComponent(componentsConfig, response) {
     }
     return React.createElement(ComponentCreator, { components: componentsConfig, response: response });
 }
-/**
- * Render either a loading view, empty result set notification or the table itself.
- * @param exploreState - ExploreView responses from Azul, such as projects (index/projects), samples (index/samples) and files (index/files).
- * @param entityConfig - Entity configuration.
- * @param entityListType - Entity list type.
- * @returns rendered Table component.
- */
-function renderList(exploreState, entityConfig, entityListType) {
-    const { listItems, loading, tabValue } = exploreState;
-    const { getId: getRowId, list, listView } = entityConfig;
-    const { columns: columnsConfig } = list;
-    if (!exploreState || !tabValue) {
-        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.createElement(React.Fragment, null);
-    }
-    return (React.createElement(TableCreator, { columns: columnsConfig, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
-}
 /**
  * Renders Summaries component when all the following requirements are fulfilled:
  * - defined summary config,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "23.0.0",
+  "version": "25.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
-    "@mui/types": "^7.2.18",
+    "@mui/types": "^7.4.0",
     "@next/eslint-plugin-next": "^14.1.0",
     "@storybook/addon-actions": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.4",
@@ -36,6 +36,7 @@
     "@storybook/test": "^8.6.4",
     "@storybook/types": "^8.6.4",
     "@testing-library/react": "^16.0.1",
+    "@types/d3": "^7.4.3",
     "@types/jest": "^29.4.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
@@ -67,8 +68,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.5",
-    "@mui/material": "^6.1.5",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/material": "^7.0.1",
+    "@observablehq/plot": "^0.6.17",
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "copy-to-clipboard": "3.3.1",

package/src/common/entities.ts

@@ -109,6 +109,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
   annotation?: DataDictionaryAnnotation;
+  enableChartView?: boolean;
   isDisabled?: boolean;
   key: CategoryKey;
   label: string;

package/src/components/DataDictionary/components/Entities/constants.ts

@@ -1,8 +1,8 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 
 export const ENTITIES_ROW_GAP = 8;
 
-export const GRID2_PROPS: Grid2Props = {
+export const GRID_PROPS: GridProps = {
   container: true,
   direction: "column",
   flexWrap: "nowrap",

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -1,15 +1,15 @@
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import React from "react";
 import { Entity } from "../Entity/entity";
-import { GRID2_PROPS } from "./constants";
+import { GRID_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
 export const Entities = ({ classes, spacing }: ClassesProps): JSX.Element => {
   return (
-    <Grid2 {...GRID2_PROPS}>
+    <Grid {...GRID_PROPS}>
       {classes.map((classData) => (
         <Entity key={classData.key} class={classData} spacing={spacing} />
       ))}
-    </Grid2>
+    </Grid>
   );
 };

package/src/components/DataDictionary/components/Entity/constants.ts

@@ -1,6 +1,6 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 
-export const GRID2_PROPS: Grid2Props = {
+export const GRID_PROPS: GridProps = {
   container: true,
   direction: "column",
   flexWrap: "nowrap",

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -1,10 +1,10 @@
-import { Grid2, Typography } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
 import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
-import { GRID2_PROPS } from "./constants";
+import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
 import { EntityProps } from "./types";
 
@@ -14,8 +14,8 @@ export const Entity = ({
 }: EntityProps): JSX.Element => {
   const table = useTable(classData.attributes);
   return (
-    <Grid2 {...GRID2_PROPS} rowGap={4}>
-      <Grid2 {...GRID2_PROPS} rowGap={1}>
+    <Grid {...GRID_PROPS} rowGap={4}>
+      <Grid {...GRID_PROPS} rowGap={1}>
         <StyledTypography
           component="h3"
           id={classData.key}
@@ -31,8 +31,8 @@ export const Entity = ({
         >
           {classData.description}
         </Typography>
-      </Grid2>
+      </Grid>
       <Table table={table} />
-    </Grid2>
+    </Grid>
   );
 };

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx

@@ -23,7 +23,7 @@ export const NIHAccountExpiryWarning = (): JSX.Element | null => {
           Please{" "}
           <Link
             label="renew your account"
-            url="https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers#heading-4"
+            url="https://support.terra.bio/hc/en-us/articles/19124069598235"
           />{" "}
           link.
         </span>

package/src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React, { MouseEvent } from "react";
 import { DataDictionaryAnnotation } from "../../../../common/entities";
 import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
@@ -27,7 +27,7 @@ export const FilterLabel = ({
       <Label
         color="inherit"
         disabled={disabled}
-        endIcon={<ArrowDropDownRoundedIcon fontSize="small" />}
+        endIcon={<ArrowDropDownRounded fontSize="small" />}
         fullWidth
         isOpen={isOpen}
         onClick={onClick}

package/src/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import React, { Fragment, useContext } from "react";
 import {
@@ -21,7 +21,7 @@ export const SearchCloseButton = (): JSX.Element => {
     <Fragment>
       {showButton && (
         <IconButton onClick={onClickFn} size="large">
-          <CloseRoundedIcon fontSize="small" />
+          <CloseRounded fontSize="small" />
         </IconButton>
       )}
     </Fragment>

package/src/components/Index/components/EntitiesView/components/ChartView/chartView.styles.ts

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { GridPaperSection } from "../../../../../common/Section/section.styles";
+
+export const StyledGrid = styled(Grid)`
+  display: grid;
+  gap: inherit;
+`;
+
+export const StyledGridPaperSection = styled(GridPaperSection)`
+  &:last-of-type {
+    border-radius: inherit;
+  }
+`;

package/src/components/Index/components/EntitiesView/components/ChartView/chartView.tsx

@@ -0,0 +1,38 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+import { Loading, LOADING_PANEL_STYLE } from "../../../../../Loading/loading";
+import { StyledGrid, StyledGridPaperSection } from "./chartView.styles";
+import { Chart } from "./components/Chart/chart";
+import { useChartView } from "./hooks/UseChartView/useChartView";
+import { ChartViewProps } from "./types";
+
+export const ChartView = ({
+  categoryFilters,
+  loading,
+  testId,
+}: ChartViewProps): JSX.Element | null => {
+  const { chartViewRef, selectCategoryViews, width } =
+    useChartView(categoryFilters);
+  if (selectCategoryViews.length === 0) return null;
+  return (
+    <Fragment>
+      <Loading
+        appear={false}
+        autoPosition={false}
+        loading={loading}
+        panelStyle={LOADING_PANEL_STYLE.INHERIT}
+      />
+      <StyledGrid data-testid={testId} ref={chartViewRef}>
+        {selectCategoryViews.map(({ key, label, values }) => (
+          <StyledGridPaperSection key={key}>
+            <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}>
+              {label}
+            </Typography>
+            <Chart selectCategoryValueViews={values} width={width} />
+          </StyledGridPaperSection>
+        ))}
+      </StyledGrid>
+    </Fragment>
+  );
+};

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/constants.ts

@@ -0,0 +1,13 @@
+export const BAR_GAP = 40;
+
+export const BAR_HEIGHT = 24;
+
+export const DATA_FIELD = {
+  COUNT: "count",
+  LABEL: "label",
+  SELECTED: "selected",
+} as const;
+
+export const TEXT_PADDING = 8;
+
+export const TICKS = 6;

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.ts

@@ -0,0 +1,104 @@
+import * as Plot from "@observablehq/plot";
+import { PlotOptions } from "@observablehq/plot";
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
+import { DATA_FIELD, TEXT_PADDING } from "./constants";
+import {
+  getCategoryValueText,
+  getCategoryValueTextFill,
+  getColorRangeValue,
+  getCountTextFill,
+  getPlotHeight,
+  getTicks,
+  getXDomain,
+  getYPaddingInner,
+  getYPaddingOuter,
+  isAnyValueSelected,
+  renderText,
+} from "./utils";
+
+export function getPlotOptions(
+  selectCategoryValueViews: SelectCategoryValueView[],
+  width: number
+): PlotOptions {
+  const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
+  return {
+    color: {
+      domain: [false, true], // false = unselected, true = selected.
+      legend: false,
+      range: [getColorRangeValue(isCategorySelected), PALETTE.PRIMARY_MAIN],
+    },
+    height: getPlotHeight(selectCategoryValueViews.length),
+    margin: 0,
+    marginBottom: 32,
+    marks: [
+      Plot.axisX({
+        className: "x-axis",
+        tickFormat: formatCountSize,
+        tickPadding: 8,
+        tickSize: 0,
+        ticks: getTicks(selectCategoryValueViews),
+      }),
+      Plot.gridX({
+        stroke: PALETTE.SMOKE_MAIN,
+        strokeOpacity: 1,
+        ticks: getTicks(selectCategoryValueViews),
+      }),
+      Plot.barX(selectCategoryValueViews, {
+        className: "x-bar",
+        fill: DATA_FIELD.SELECTED,
+        rx1: 0,
+        rx2: 4,
+        sort: { y: null },
+        x: DATA_FIELD.COUNT,
+        y: DATA_FIELD.LABEL,
+      }),
+      Plot.text(selectCategoryValueViews, {
+        className: "text-category-label",
+        dx: 16,
+        dy: -28,
+        fill: (d) => getCategoryValueTextFill(d, isCategorySelected),
+        lineWidth: width / 13, // "em" unit; font-size is 13px.
+        text: getCategoryValueText,
+        textAnchor: "start",
+        textOverflow: "ellipsis",
+        x: 0,
+        y: DATA_FIELD.LABEL,
+      }),
+      Plot.text(selectCategoryValueViews, {
+        className: "text-count",
+        dx: -TEXT_PADDING,
+        dy: -2,
+        fill: (d) => getCountTextFill(d, isCategorySelected),
+        fontWeight: 500,
+        lineHeight: 0.8125,
+        render: renderText,
+        text: DATA_FIELD.COUNT,
+        textAnchor: "end",
+        x: DATA_FIELD.COUNT,
+        y: DATA_FIELD.LABEL,
+      }),
+    ],
+    style: {
+      dominantBaseline: "middle",
+      font: "inherit",
+      overflow: "visible",
+    },
+    width,
+    x: {
+      domain: getXDomain(selectCategoryValueViews),
+      grid: false,
+      label: null,
+      line: false,
+    },
+    y: {
+      label: null,
+      line: false,
+      paddingInner: getYPaddingInner(),
+      paddingOuter: getYPaddingOuter(),
+      tickFormat: () => "",
+      tickSize: 0,
+    },
+  };
+}