@databiosphere/findable-ui 25.0.0 → 26.0.0

package/lib/components/Filter/components/ClearAllFilters/clearAllFilters.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ExploreActionKind } from "../../../../providers/exploreState";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 export const ClearAllFilters = () => {
     const { exploreDispatch } = useExploreState();
@@ -10,5 +11,5 @@ export const ClearAllFilters = () => {
             type: ExploreActionKind.ClearFilters,
         });
     };
-    return (React.createElement(ButtonTextPrimary, { onClick: onClearFilters }, "Clear All"));
+    return (React.createElement(ButtonTextPrimary, { "data-testid": TEST_IDS.CLEAR_ALL_FILTERS, onClick: onClearFilters }, "Clear All"));
 };

package/lib/components/Filter/components/Filter/filter.js

@@ -1,6 +1,7 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Grow } from "@mui/material";
 import React, { useState } from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
@@ -49,7 +50,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(FilterLabel, { annotation: categoryView.annotation, count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
-        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
+        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
             isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
             React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),
         tags));

package/lib/components/Filter/components/FilterRange/constants.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps, DividerProps, InputLabelProps, OutlinedInputProps, ToggleButtonGroupProps } from "@mui/material";
+import { RANGE_OPERATOR } from "./types";
+export declare const BUTTON_PROPS: ButtonProps;
+export declare const DIVIDER_PROPS: DividerProps;
+export declare const INPUT_PROPS: OutlinedInputProps;
+export declare const INPUT_LABEL_PROPS: InputLabelProps;
+export declare const RANGE_OPERATOR_DISPLAY: Record<RANGE_OPERATOR, string>;
+export declare const TOGGLE_BUTTON_GROUP_PROPS: ToggleButtonGroupProps;

package/lib/components/Filter/components/FilterRange/constants.js

@@ -0,0 +1,27 @@
+import { BUTTON_PROPS as DX_BUTTON_PROPS } from "../../../common/Button/constants";
+export const BUTTON_PROPS = {
+    ...DX_BUTTON_PROPS.PRIMARY_MEDIUM_CONTAINED,
+    fullWidth: true,
+    type: "submit",
+};
+export const DIVIDER_PROPS = {
+    flexItem: true,
+    orientation: "vertical",
+};
+export const INPUT_PROPS = {
+    autoFocus: false,
+    size: "small",
+};
+export const INPUT_LABEL_PROPS = {
+    disableAnimation: true,
+    shrink: true,
+};
+export const RANGE_OPERATOR_DISPLAY = {
+    between: "From",
+    greaterThan: "Greater Than",
+    lessThan: "Less Than",
+};
+export const TOGGLE_BUTTON_GROUP_PROPS = {
+    exclusive: true,
+    fullWidth: true,
+};

package/lib/components/Filter/components/FilterRange/filterRange.d.ts

@@ -0,0 +1,2 @@
+import { FilterRangeProps } from "./types";
+export declare const FilterRange: ({ className }: FilterRangeProps) => JSX.Element;

package/lib/components/Filter/components/FilterRange/filterRange.js

@@ -0,0 +1,26 @@
+import { Button, Divider, FormControl, Grid, InputLabel, OutlinedInput, ToggleButton, ToggleButtonGroup, } from "@mui/material";
+import React, { Fragment } from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
+import { BUTTON_PROPS, DIVIDER_PROPS, INPUT_LABEL_PROPS, INPUT_PROPS, RANGE_OPERATOR_DISPLAY, TOGGLE_BUTTON_GROUP_PROPS, } from "./constants";
+import { StyledForm } from "./filterRange.styles";
+import { useFilterRange } from "./hooks/UseFilterRange/hook";
+import { RANGE_OPERATOR } from "./types";
+export const FilterRange = ({ className }) => {
+    const { onChange, onSubmit, value } = useFilterRange();
+    return (React.createElement(StyledForm, { className: className, "data-testid": TEST_IDS.FILTER_RANGE, onSubmit: onSubmit },
+        React.createElement(ToggleButtonGroup, { ...TOGGLE_BUTTON_GROUP_PROPS, onChange: onChange, value: value },
+            React.createElement(ToggleButton, { value: RANGE_OPERATOR.BETWEEN }, "Between"),
+            React.createElement(ToggleButton, { value: RANGE_OPERATOR.LESS_THAN }, "Less Than"),
+            React.createElement(Divider, { ...DIVIDER_PROPS }),
+            React.createElement(ToggleButton, { value: RANGE_OPERATOR.GREATER_THAN }, "Greater Than")),
+        React.createElement(Grid, null,
+            React.createElement(FormControl, null,
+                React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: value }, RANGE_OPERATOR_DISPLAY[value]),
+                React.createElement(OutlinedInput, { ...INPUT_PROPS, name: value, placeholder: "eg. 1" })),
+            value === RANGE_OPERATOR.BETWEEN && (React.createElement(Fragment, null,
+                React.createElement(Divider, null),
+                React.createElement(FormControl, null,
+                    React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: "between-to" }, "To"),
+                    React.createElement(OutlinedInput, { ...INPUT_PROPS, name: "between-to", placeholder: "eg. 2" }))))),
+        React.createElement(Button, { ...BUTTON_PROPS }, "Filter")));
+};

package/lib/components/Filter/components/FilterRange/filterRange.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledForm: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/lib/components/Filter/components/FilterRange/filterRange.styles.js

@@ -0,0 +1,66 @@
+import styled from "@emotion/styled";
+import { inkLight, inkMain, smokeDark, } from "../../../../styles/common/mixins/colors";
+import { textBody400 } from "../../../../styles/common/mixins/fonts";
+export const StyledForm = styled("form") `
+  padding: 16px;
+  width: 396px;
+
+  .MuiToggleButtonGroup-root {
+    grid-auto-columns: 1fr 1fr auto 1fr; // buttons + divider
+    width: 100%;
+
+    .MuiToggleButton-root {
+      color: ${inkLight};
+      text-transform: capitalize;
+
+      &.Mui-selected {
+        color: ${inkMain};
+      }
+    }
+
+    .MuiDivider-root {
+      border-color: ${smokeDark};
+      border-radius: 4px;
+      margin: 6px 0;
+    }
+  }
+
+  .MuiGrid-root {
+    display: grid;
+    gap: 4px 0;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    margin: 12px 0 16px 0;
+
+    .MuiFormControl-root {
+      display: grid;
+      gap: inherit;
+      grid-row: 1 / -1;
+      grid-template-rows: subgrid;
+
+      .MuiInputLabel-root {
+        ${textBody400};
+        color: ${inkMain};
+        max-width: unset;
+        position: relative;
+        transform: unset;
+      }
+
+      .MuiOutlinedInput-input {
+        padding-right: 10px;
+      }
+    }
+
+    .MuiDivider-root {
+      align-self: center;
+      border-color: ${inkLight};
+      grid-row: 2;
+      margin: 0 4px;
+      width: 8px;
+    }
+  }
+
+  .MuiButton-root {
+    grid-column: 1 / -1;
+  }
+`;

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseFilterRange } from "./types";
+export declare const useFilterRange: () => UseFilterRange;

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/hook.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { useToggleButtonGroup } from "../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
+import { RANGE_OPERATOR } from "../../types";
+export const useFilterRange = () => {
+    const { onChange, value } = useToggleButtonGroup(RANGE_OPERATOR.BETWEEN);
+    const onSubmit = useCallback((e) => {
+        e.preventDefault();
+    }, []);
+    return {
+        onChange,
+        onSubmit,
+        value,
+    };
+};

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/types.d.ts

@@ -0,0 +1,8 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { FormEvent } from "react";
+import { RANGE_OPERATOR } from "../../types";
+export interface UseFilterRange {
+    onChange: ToggleButtonGroupProps["onChange"];
+    onSubmit: (e: FormEvent) => void;
+    value: RANGE_OPERATOR;
+}

package/lib/components/Filter/components/FilterRange/stories/filterRange.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterRange } from "../filterRange";
+declare const meta: Meta<typeof FilterRange>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/components/Filter/components/FilterRange/stories/filterRange.stories.js

@@ -0,0 +1,9 @@
+import { FilterRange } from "../filterRange";
+const meta = {
+    args: {},
+    component: FilterRange,
+};
+export default meta;
+export const Default = {
+    args: {},
+};

package/lib/components/Filter/components/FilterRange/types.d.ts

@@ -0,0 +1,8 @@
+import { BaseComponentProps } from "../../../types";
+export interface FilterRangeProps extends BaseComponentProps {
+}
+export declare enum RANGE_OPERATOR {
+    BETWEEN = "between",
+    GREATER_THAN = "greaterThan",
+    LESS_THAN = "lessThan"
+}

package/lib/components/Filter/components/FilterRange/types.js

@@ -0,0 +1,6 @@
+export var RANGE_OPERATOR;
+(function (RANGE_OPERATOR) {
+    RANGE_OPERATOR["BETWEEN"] = "between";
+    RANGE_OPERATOR["GREATER_THAN"] = "greaterThan";
+    RANGE_OPERATOR["LESS_THAN"] = "lessThan";
+})(RANGE_OPERATOR || (RANGE_OPERATOR = {}));

package/lib/components/Filter/components/Filters/filters.js

@@ -2,6 +2,7 @@ import { Divider } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
 import { FilterTags } from "../FilterTags/filterTags";
@@ -42,7 +43,7 @@ export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFi
     useEffect(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (React.createElement(FilterList, { disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
+    return (React.createElement(FilterList, { "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
         label && React.createElement(CategoryViewsLabel, null, label),
         categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.d.ts

@@ -1,7 +1,8 @@
+import { TestIdProps } from "../../../types";
 import { FilterMenuSearchMatchRange } from "../../common/entities";
-interface HighlightedLabelProps {
+interface HighlightedLabelProps extends TestIdProps {
     label: string;
     ranges?: FilterMenuSearchMatchRange[];
 }
-export declare const HighlightedLabel: ({ label, ranges, }: HighlightedLabelProps) => JSX.Element;
+export declare const HighlightedLabel: ({ label, ranges, testId, }: HighlightedLabelProps) => JSX.Element;
 export {};

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { MatchHighlight } from "./highlightedLabel.styles";
-export const HighlightedLabel = ({ label, ranges, }) => {
+export const HighlightedLabel = ({ label, ranges, testId, }) => {
     const items = [];
     if (ranges) {
         ranges = ranges.slice().sort(({ start: a }, { start: b }) => a - b);
@@ -29,5 +29,5 @@ export const HighlightedLabel = ({ label, ranges, }) => {
     else {
         items.push(label);
     }
-    return React.createElement("span", null, items);
+    return React.createElement("span", { "data-testid": testId }, items);
 };

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,5 +1,6 @@
 import { Checkbox, ListItemButton, ListItemText, ListSubheader, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -18,9 +19,9 @@ export default function VariableSizeListItem({ item, onFilter, onUpdateItemSizeB
     }, [key, onUpdateItemSizeByItemKey]);
     if (item.type === ITEM_TYPE.VALUE) {
         const { categoryKey, matchRanges, value: { count, key: valueKey, label, selected }, } = item;
-        return (React.createElement(ListItemButton, { ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
+        return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
             React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges }), secondary: React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400 }, count) })));
+            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges, testId: TEST_IDS.FILTER_TERM }), secondary: React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count) })));
     }
     else if (item.type === ITEM_TYPE.CATEGORY) {
         return (React.createElement(ListSubheader, { key: key, ref: setRef, style: style }, item.categoryLabel));

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
 import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
@@ -85,7 +86,7 @@ export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter,
             open,
             searchTerm,
         } },
-        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
+        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
                 ...props,
                 InputProps: {
                     ...props.InputProps,

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.js

@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 import { TextField } from "@mui/material";
-import { inkMain } from "../../../../styles/common/mixins/colors";
-import { inkLight } from "../../../../theme/common/palette";
+import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
 export const InputField = styled(TextField) `
   && {
     display: flex;

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,6 +1,7 @@
 import { Checkbox, ListItemButton, ListItemText, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -16,7 +17,7 @@ export default function VariableSizeListItem({ categoryKey, categorySection, mat
     const handleItemClicked = () => {
         onFilter(categoryKey, key, !selected, categorySection);
     };
-    return (React.createElement(ListItemButton, { ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
+    return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400 }, count)) })));
+        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges, testId: TEST_IDS.FILTER_TERM }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count)) })));
 }

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.d.ts

@@ -1,2 +1,2 @@
 import { ChartViewProps } from "./types";
-export declare const ChartView: ({ categoryFilters, loading, testId, }: ChartViewProps) => JSX.Element | null;
+export declare const ChartView: ({ categoryFilters, entityName, loading, testId, }: ChartViewProps) => JSX.Element | null;

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.js

@@ -5,13 +5,16 @@ 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";
-export const ChartView = ({ categoryFilters, loading, testId, }) => {
+export const ChartView = ({ categoryFilters, entityName, loading, testId, }) => {
     const { chartViewRef, selectCategoryViews, width } = useChartView(categoryFilters);
     if (selectCategoryViews.length === 0)
         return null;
     return (React.createElement(Fragment, null,
         React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
         React.createElement(StyledGrid, { "data-testid": testId, ref: chartViewRef }, selectCategoryViews.map(({ key, label, values }) => (React.createElement(StyledGridPaperSection, { key: key },
-            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL }, label),
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },
+                entityName,
+                " per ",
+                label),
             React.createElement(Chart, { selectCategoryValueViews: values, width: width })))))));
 };

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/constants.d.ts

@@ -1,9 +1,10 @@
-export declare const BAR_GAP = 40;
+export declare const BAR_GAP = 8;
 export declare const BAR_HEIGHT = 24;
 export declare const DATA_FIELD: {
     readonly COUNT: "count";
     readonly LABEL: "label";
     readonly SELECTED: "selected";
 };
+export declare const MARGIN_LEFT = 136;
 export declare const TEXT_PADDING = 8;
 export declare const TICKS = 6;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/constants.js

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

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.js

@@ -1,7 +1,7 @@
 import * as Plot from "@observablehq/plot";
-import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
 import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
-import { DATA_FIELD, TEXT_PADDING } from "./constants";
+import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
 import { getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
 export function getPlotOptions(selectCategoryValueViews, width) {
     const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
@@ -14,6 +14,7 @@ export function getPlotOptions(selectCategoryValueViews, width) {
         height: getPlotHeight(selectCategoryValueViews.length),
         margin: 0,
         marginBottom: 32,
+        marginLeft: MARGIN_LEFT,
         marks: [
             Plot.axisX({
                 className: "x-axis",
@@ -32,19 +33,21 @@ export function getPlotOptions(selectCategoryValueViews, width) {
                 fill: DATA_FIELD.SELECTED,
                 rx1: 0,
                 rx2: 4,
-                sort: { y: null },
+                sort: { order: "descending", y: "x" }, // Sort by count (x-axis), descending.
                 x: DATA_FIELD.COUNT,
                 y: DATA_FIELD.LABEL,
             }),
             Plot.text(selectCategoryValueViews, {
                 className: "text-category-label",
-                dx: 16,
-                dy: -28,
+                dx: -TEXT_PADDING,
+                dy: -2,
                 fill: (d) => getCategoryValueTextFill(d, isCategorySelected),
-                lineWidth: width / 13, // "em" unit; font-size is 13px.
+                lineHeight: 0.8125,
+                lineWidth: (MARGIN_LEFT - TEXT_PADDING) / 13, // "em" unit; font-size is 13px.
                 text: getCategoryValueText,
-                textAnchor: "start",
+                textAnchor: "end",
                 textOverflow: "ellipsis",
+                title: getCategoryValueText,
                 x: 0,
                 y: DATA_FIELD.LABEL,
             }),

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils.d.ts

@@ -90,6 +90,12 @@ export declare function getYPaddingOuter(): number;
  * @returns True if any value is selected, false otherwise.
  */
 export declare function isAnyValueSelected(data: SelectCategoryValueView[]): boolean;
+/**
+ * Parses a transform `translate` string and returns the x and y coordinates.
+ * @param translate - The transform `translate` string.
+ * @returns A tuple of the x and y coordinates.
+ */
+export declare function parseTranslate(translate: string | null): [number, number];
 /**
  * Renders text elements for count values, positioning them either inside or outside bars
  * based on available space. If text doesn't fit inside a bar, it's repositioned outside

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils.js

@@ -1,5 +1,5 @@
-import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
-import { BAR_GAP, BAR_HEIGHT, TEXT_PADDING, TICKS } from "./constants";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+import { BAR_GAP, BAR_HEIGHT, MARGIN_LEFT, TEXT_PADDING, TICKS, } from "./constants";
 /**
  * Returns the text for the category value point.
  * @param d - Data point.
@@ -146,7 +146,7 @@ export function isAnyValueSelected(data) {
  * @param translate - The transform `translate` string.
  * @returns A tuple of the x and y coordinates.
  */
-function parseTranslate(translate) {
+export function parseTranslate(translate) {
     const match = translate?.match(/translate\(\s*([-\d.]+)[,\s]+([-\d.]+)\s*\)/);
     let tx = 0;
     let ty = 0;
@@ -180,7 +180,7 @@ export function renderText(index, scales, values, dimensions, context, next) {
             if (!ctm || !bBox)
                 continue;
             // If the text doesn't fit inside the bar, reposition it outside.
-            if (ctm.e - bBox.width - TEXT_PADDING < 0) {
+            if (ctm.e - bBox.width - TEXT_PADDING < MARGIN_LEFT) {
                 const [tx, ty] = parseTranslate(textEl.getAttribute("transform"));
                 // Translate by the width of the bar plus padding on each side.
                 textEl.setAttribute("transform", `translate(${tx + bBox.width + TEXT_PADDING * 2}, ${ty})`);

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories.js

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import React from "react";
-import { PALETTE } from "../../../../../../../../../styles/common/mui/palette";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
 import { Chart } from "../chart";
 import { CHART_ARGS, SELECT_CHART_ARGS } from "./args";
 const meta = {
@@ -10,7 +10,6 @@ const meta = {
         (Story, context) => (React.createElement(Box, { sx: { backgroundColor: PALETTE.COMMON_WHITE, padding: 5 } },
             React.createElement(Story, { ...context }))),
     ],
-    title: "Components/Entities/EntitiesView/ChartView/Chart",
 };
 export default meta;
 export const Default = {};

package/lib/components/Index/components/EntitiesView/components/ChartView/stories/args.js

@@ -92,5 +92,6 @@ export const CHART_VIEW_ARGS = {
             ],
         },
     ],
+    entityName: "Projects",
     loading: false,
 };

package/lib/components/Index/components/EntitiesView/components/ChartView/stories/chartView.stories.js

@@ -10,7 +10,6 @@ const meta = {
             React.createElement(Story, { ...context }))),
     ],
     parameters: { layout: "fullscreen" },
-    title: "Components/Entities/EntitiesView/ChartView",
 };
 export default meta;
 export const Default = {};

package/lib/components/Index/components/EntitiesView/components/ChartView/types.d.ts

@@ -1,6 +1,8 @@
+import { EntityConfig } from "../../../../../../config/entities";
 import { CategoryFilter } from "../../../../../Filter/components/Filters/filters";
 import { TestIdProps } from "../../../../../types";
 export interface ChartViewProps extends TestIdProps {
     categoryFilters: CategoryFilter[];
+    entityName: EntityConfig["label"];
     loading: boolean;
 }

package/lib/components/Index/components/EntitiesView/entitiesView.d.ts

@@ -1,2 +1,2 @@
 import { EntitiesViewProps } from "./types";
-export declare const EntitiesView: ({ children, onChange, testId, viewMode, viewStatus, }: EntitiesViewProps) => JSX.Element;
+export declare const EntitiesView: ({ children, onChange, viewMode, viewStatus, }: EntitiesViewProps) => JSX.Element;

package/lib/components/Index/components/EntitiesView/entitiesView.js

@@ -1,10 +1,11 @@
 import { ToggleButton, ToggleButtonGroup, Toolbar } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledFluidPaper } from "./entitiesView.styles";
 import { VIEW_MODE } from "./hooks/UseEntitiesView/types";
-export const EntitiesView = ({ children, onChange, testId, viewMode, viewStatus, }) => {
-    return (React.createElement(StyledFluidPaper, { testId: testId },
+export const EntitiesView = ({ children, onChange, viewMode, viewStatus, }) => {
+    return (React.createElement(StyledFluidPaper, { testId: TEST_IDS.ENTITIES_VIEW },
         React.createElement(GridPaper, null,
             viewStatus.disabled ? null : (React.createElement(Toolbar, null,
                 React.createElement(ToggleButtonGroup, { exclusive: true, value: viewMode, onChange: onChange },

package/lib/components/Index/components/EntitiesView/types.d.ts

@@ -1,7 +1,7 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-import { ChildrenProps, TestIdProps } from "../../../types";
+import { ChildrenProps } from "../../../types";
 import { VIEW_MODE, ViewStatus } from "./hooks/UseEntitiesView/types";
-export interface EntitiesViewProps extends ChildrenProps, TestIdProps {
+export interface EntitiesViewProps extends ChildrenProps {
     onChange: ToggleButtonGroupProps["onChange"];
     viewMode: VIEW_MODE;
     viewStatus: ViewStatus;

package/lib/components/Index/components/Hero/components/ExportButton/exportButton.js

@@ -2,11 +2,12 @@ import { Tooltip } from "@mui/material";
 import Link from "next/link";
 import React from "react";
 import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { Button } from "./exportButton.styles";
 export const ExportButton = () => {
     const { disabled, isLoading, message } = useDownloadStatus();
     return (React.createElement(Tooltip, { arrow: true, title: message },
         React.createElement("span", null,
             React.createElement(Link, { href: "/export", legacyBehavior: true, passHref: true },
-                React.createElement(Button, { disabled: disabled || isLoading, href: "passHref", id: "button-cohort-export" }, "Export")))));
+                React.createElement(Button, { "data-testid": TEST_IDS.EXPORT_BUTTON, disabled: disabled || isLoading, href: "passHref", id: "button-cohort-export" }, "Export")))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.d.ts

@@ -4,6 +4,6 @@ export declare const Slogan: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Divider: import("@emotion/styled").StyledComponent<import("@mui/material").DividerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
     ref?: ((instance: HTMLHRElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHRElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "textAlign" | "sx" | "variant" | "orientation" | "light" | "absolute" | "flexItem"> & {
+}, "style" | "className" | "classes" | "children" | "textAlign" | "sx" | "variant" | "orientation" | "absolute" | "light" | "flexItem"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/outline.styles.js

@@ -1,9 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Tab as MTab, Tabs as MTabs } from "@mui/material";
-import { smokeMain } from "../../../../styles/common/mixins/colors";
+import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
 import { textBody500, textBodySmall400, } from "../../../../styles/common/mixins/fonts";
-import { inkMain } from "../../../../theme/common/palette";
 export const tab = css `
   align-items: flex-start;
   margin: 0;