@databiosphere/findable-ui 0.0.0

package/src/components/Filter/components/FilterTag/filterTag.tsx

@@ -0,0 +1,59 @@
+import { CloseRounded } from "@mui/icons-material";
+import { Chip, Tooltip } from "@mui/material";
+import React, { useRef } from "react";
+import { SupersededTag } from "./filterTag.styles";
+
+export interface FilterTagProps {
+  label: string;
+  onRemove: () => void;
+  superseded: boolean;
+}
+
+const DEFAULT_SLOT_PROPS = {
+  popper: {
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, -6],
+        },
+      },
+      {
+        name: "preventOverflow",
+        options: { padding: 8 },
+      },
+    ],
+  },
+};
+
+export const FilterTag = ({
+  label,
+  onRemove,
+  superseded,
+}: FilterTagProps): JSX.Element => {
+  const Tag = superseded ? SupersededTag : Chip;
+  const tagRef = useRef<HTMLDivElement>(null);
+  const tagLabelElement =
+    tagRef.current?.querySelector<HTMLElement>(".MuiChip-label");
+  const isOverflowed =
+    (tagLabelElement?.offsetWidth ?? 0) < (tagLabelElement?.scrollWidth ?? 0);
+  return (
+    <Tooltip
+      arrow
+      disableInteractive
+      slotProps={DEFAULT_SLOT_PROPS}
+      title={isOverflowed ? label : null}
+    >
+      <Tag
+        clickable={false} // removes unwanted active and hover ui; "pointer" cursor added to "filterTag" variant in theme.
+        color="primary"
+        deleteIcon={<CloseRounded color="inherit" />}
+        label={label}
+        onClick={onRemove}
+        onDelete={onRemove}
+        ref={tagRef}
+        variant="filterTag"
+      />
+    </Tooltip>
+  );
+};

package/src/components/Filter/components/FilterTags/filterTags.stories.tsx

@@ -0,0 +1,62 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { FilterTags } from "./filterTags";
+
+export default {
+  argTypes: {
+    tags: { control: { disable: true } },
+  },
+  component: FilterTags,
+  decorators: [
+    (Story): JSX.Element => (
+      <div style={{ padding: "8px 12px 8px 16px", width: 264 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  title: "Components/Filter/FilterTags",
+} as ComponentMeta<typeof FilterTags>;
+
+const FilterTagsTemplate: ComponentStory<typeof FilterTags> = (args) => (
+  <FilterTags {...args} />
+);
+
+const onRemove = (): void => {
+  // onRemove function
+};
+
+export const FilterTagsStory = FilterTagsTemplate.bind({});
+FilterTagsStory.args = {
+  tags: [
+    {
+      label: "Normal",
+      onRemove: onRemove,
+      superseded: false,
+    },
+    {
+      label: "abscess",
+      onRemove: onRemove,
+      superseded: true,
+    },
+    {
+      label: "acoustic neuroma",
+      onRemove: onRemove,
+      superseded: false,
+    },
+    {
+      label: "acute kidney failure",
+      onRemove: onRemove,
+      superseded: false,
+    },
+    {
+      label: "acute kidney tubular necrosis",
+      onRemove: onRemove,
+      superseded: false,
+    },
+    {
+      label: "alcohol abuse",
+      onRemove: onRemove,
+      superseded: false,
+    },
+  ],
+};

package/src/components/Filter/components/FilterTags/filterTags.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+
+export const FilterTags = styled.span`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+  padding: 0 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ${mediaDesktopSmallUp} {
+    padding: 0;
+  }
+`;

package/src/components/Filter/components/FilterTags/filterTags.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { CategoryTag } from "../../../../common/entities";
+import { FilterTag as Tag } from "../FilterTag/filterTag";
+import { FilterTags as Tags } from "./filterTags.styles";
+
+export interface FilterTagsProps {
+  tags?: CategoryTag[];
+}
+
+export const FilterTags = ({ tags }: FilterTagsProps): JSX.Element | null => {
+  return tags && tags.length ? (
+    <Tags>
+      {tags.map(({ label, onRemove, superseded }, t) => (
+        <Tag
+          key={`${label}${t}`}
+          label={label}
+          onRemove={onRemove}
+          superseded={superseded}
+        />
+      ))}
+    </Tags>
+  ) : null;
+};

package/src/components/Filter/components/Filters/filters.stories.tsx

@@ -0,0 +1,101 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { Filters } from "./filters";
+
+export default {
+  argTypes: {
+    categories: { control: { disable: true } },
+    onFilter: { control: { disable: true } },
+  },
+  component: Filters,
+  decorators: [
+    (Story): JSX.Element => (
+      <div style={{ width: 264 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  title: "Components/Filter/Filters",
+} as Meta<typeof Filters>;
+
+type Story = StoryObj<typeof Filters>;
+
+const onFilter = (): void => {
+  // onFilter function
+};
+
+const defaultValues = [
+  {
+    count: 1,
+    key: "item1",
+    label: "Item 1",
+    selected: false,
+  },
+  {
+    count: 10,
+    key: "item2",
+    label: "Item 2",
+    selected: false,
+  },
+];
+
+export const FiltersStory: Story = {
+  args: {
+    categoryFilters: [
+      {
+        categoryViews: [
+          {
+            isDisabled: false,
+            key: "genusSpecies",
+            label: "Genus Species",
+            values: [
+              {
+                count: 12,
+                key: "homoSapiens",
+                label: "Homo sapiens",
+                selected: false,
+              },
+              {
+                count: 6,
+                key: "musMusculus",
+                label: "Mus musculus",
+                selected: false,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        categoryViews: [
+          {
+            isDisabled: false,
+            key: "donorDisease",
+            label: "Donor Disease",
+            values: FilterMenuStory.args?.values || defaultValues,
+          },
+          {
+            isDisabled: true,
+            key: "anatomicalEntity",
+            label: "Anatomical Entity",
+            values: [
+              {
+                count: 12,
+                key: "oralCavity",
+                label: "oral cavity",
+                selected: true,
+              },
+              {
+                count: 6,
+                key: "pancreas",
+                label: "pancreas",
+                selected: false,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    onFilter: onFilter,
+  },
+};

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -0,0 +1,34 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+
+interface Props {
+  disabled: boolean;
+  height: number;
+}
+
+export const Filters = styled("div", {
+  shouldForwardProp: (prop) => prop !== "height",
+})<Props>`
+  height: ${({ height }) => height}px;
+  margin: 8px 0;
+  overflow: auto;
+  padding: 0 0 8px;
+
+  // Filters are globally "disabled".
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      pointer-events: none;
+    `};
+
+  .MuiDivider-root {
+    margin: 8px 0;
+  }
+
+  ${mediaDesktopSmallUp} {
+    height: unset;
+    overflow: unset;
+    padding: 0 12px 0 16px;
+  }
+`;

package/src/components/Filter/components/Filters/filters.tsx

@@ -0,0 +1,118 @@
+import { Divider } from "@mui/material";
+import { TrackFilterOpenedFunction } from "config/entities";
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
+import {
+  BREAKPOINT_FN_NAME,
+  useBreakpointHelper,
+} from "../../../../hooks/useBreakpointHelper";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { useWindowResize } from "../../../../hooks/useWindowResize";
+import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { Filter } from "../Filter/filter";
+import { FilterTags } from "../FilterTags/filterTags";
+import { Filters as FilterList } from "./filters.styles";
+
+export interface CategoryFilter {
+  categoryViews: SelectCategoryView[];
+  label?: string;
+}
+
+export interface FiltersProps {
+  categoryFilters: CategoryFilter[];
+  closeAncestor?: () => void;
+  disabled: boolean; // Global disabling of filters; typically in "related" entity view.
+  onFilter: OnFilterFn;
+  trackFilterOpened?: TrackFilterOpenedFunction;
+}
+
+/**
+ * Returns set of selected category tags with tag label (the selected metadata label) and corresponding Tag onRemove function.
+ * @param categoryView - View model of category to display.
+ * @param onFilter - Function to execute on select of category value or remove of selected category value.
+ * @returns Array of selected category tags.
+ */
+function buildSelectCategoryTags(
+  categoryView: SelectCategoryView,
+  onFilter: OnFilterFn
+): CategoryTag[] {
+  const { key: categoryKey, values } = categoryView;
+  return values
+    .filter(({ selected }) => selected)
+    .map(({ key: categoryValueKey, label, selected }) => {
+      return {
+        label: label,
+        onRemove: () => onFilter(categoryKey, categoryValueKey, !selected),
+        superseded: false,
+      };
+    });
+}
+
+/**
+ * Build selected filter tags element for the given category type.
+ * @param categoryView - View model of category to display.
+ * @param onFilter - Function to execute on select of category value or remove of selected category value.
+ * @returns Filter tags element displaying selected category values.
+ */
+function renderFilterTags(
+  categoryView: SelectCategoryView,
+  onFilter: OnFilterFn
+): JSX.Element {
+  const tags = buildSelectCategoryTags(categoryView, onFilter);
+  return <FilterTags tags={tags} />;
+}
+
+export const Filters = ({
+  categoryFilters,
+  closeAncestor,
+  disabled = false,
+  onFilter,
+  trackFilterOpened,
+}: FiltersProps): JSX.Element => {
+  const isFilterDrawer = useBreakpointHelper(
+    BREAKPOINT_FN_NAME.DOWN,
+    DESKTOP_SM
+  );
+  const { height: windowHeight } = useWindowResize();
+  const filterListRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number>(0);
+
+  useEffect(() => {
+    setHeight(calculateListHeight(windowHeight, filterListRef.current));
+  }, [windowHeight]);
+
+  return (
+    <FilterList disabled={disabled} height={height} ref={filterListRef}>
+      {categoryFilters.map(({ categoryViews, label }, i) => (
+        <Fragment key={i}>
+          {i !== 0 && <Divider />}
+          {categoryViews.map((categoryView) => (
+            <Filter
+              key={categoryView.key}
+              categorySection={label}
+              categoryView={categoryView}
+              closeAncestor={closeAncestor}
+              isFilterDrawer={isFilterDrawer}
+              onFilter={onFilter}
+              trackFilterOpened={trackFilterOpened}
+              tags={renderFilterTags(categoryView, onFilter)}
+            />
+          ))}
+        </Fragment>
+      ))}
+    </FilterList>
+  );
+};
+
+/**
+ * Returns given height of filter list.
+ * @param windowHeight - Window height.
+ * @param filterListEl - Filter list element.
+ * @returns calculated height.
+ */
+function calculateListHeight(
+  windowHeight: number,
+  filterListEl: HTMLDivElement | null
+): number {
+  return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
+}

package/src/components/Filter/components/HighlightedLabel/highlightedLabel.styles.ts

@@ -0,0 +1,27 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+interface MatchHighlightProps {
+  leftOpen: boolean;
+  rightOpen: boolean;
+}
+
+export const MatchHighlight = styled.mark<MatchHighlightProps>`
+  background: ${({ theme }) => theme.palette.warning.light};
+  color: inherit;
+  padding: 2px 0;
+
+  ${({ leftOpen }) =>
+    leftOpen &&
+    css`
+      margin-left: -2px;
+      padding-left: 2px;
+    `}
+
+  ${({ rightOpen }) =>
+    rightOpen &&
+    css`
+      margin-right: -2px;
+      padding-right: 2px;
+    `}
+`;

package/src/components/Filter/components/HighlightedLabel/highlightedLabel.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { FilterMenuSearchMatchRange } from "../../common/entities";
+import { MatchHighlight } from "./highlightedLabel.styles";
+
+interface HighlightedLabelProps {
+  label: string;
+  ranges?: FilterMenuSearchMatchRange[];
+}
+
+export const HighlightedLabel = ({
+  label,
+  ranges,
+}: HighlightedLabelProps): JSX.Element => {
+  const items = [];
+  if (ranges) {
+    ranges = ranges.slice().sort(({ start: a }, { start: b }) => a - b);
+    let prevIndex = 0;
+    for (let i = 0; i < ranges.length; i++) {
+      const { start } = ranges[i];
+      let { end } = ranges[i];
+      // Consolidate overlapping ranges
+      while (i + 1 < ranges.length && ranges[i + 1].start <= end) {
+        i++;
+        end = Math.max(end, ranges[i].end);
+      }
+      const leftChar = label[start - 1];
+      const rightChar = label[end];
+      const leftOpen = !leftChar || /\s/.test(leftChar);
+      const rightOpen = !rightChar || /\s/.test(rightChar);
+      const matchItems = [
+        label.substring(prevIndex, start),
+        <MatchHighlight key={start} leftOpen={leftOpen} rightOpen={rightOpen}>
+          {label.substring(start, end)}
+        </MatchHighlight>,
+      ];
+      prevIndex = end;
+      items.push(matchItems);
+    }
+    items.push(label.substring(prevIndex));
+  } else {
+    items.push(label);
+  }
+  return <span>{items}</span>;
+};

package/src/components/Filter/components/SearchAllFilters/common/constants.ts

@@ -0,0 +1,62 @@
+import { PaperProps, PopperProps } from "@mui/material";
+import { DividerItem, ITEM_TYPE, NoResultsItem } from "./entites";
+
+export const DEFAULT_LIST_HEIGHT = 0;
+
+export const DIVIDER_HEIGHT = 17;
+
+export const DEFAULT_PAPER_PROPS: Partial<PaperProps> = {
+  sx: {
+    width: 368,
+  },
+  variant: "menu",
+};
+export const DEFAULT_POPPER_PROPS: Partial<PopperProps> = {
+  modifiers: [
+    {
+      name: "offset",
+      options: {
+        offset: [0, 8],
+      },
+    },
+  ],
+  placement: "bottom-start",
+};
+
+export const DEFAULT_SLOT_PROPS = {
+  paper: DEFAULT_PAPER_PROPS,
+  popper: DEFAULT_POPPER_PROPS,
+};
+
+export const DRAWER_PAPER_PROPS: Partial<PaperProps> = {
+  elevation: 0,
+  sx: {
+    width: 312,
+  },
+};
+
+export const DRAWER_POPPER_PROPS: Partial<PopperProps> = {
+  modifiers: [
+    {
+      name: "offset",
+      options: {
+        offset: [-16, 8],
+      },
+    },
+  ],
+  popperOptions: { strategy: "absolute" },
+};
+
+export const DRAWER_SLOT_PROPS = {
+  paper: DRAWER_PAPER_PROPS,
+  popper: DRAWER_POPPER_PROPS,
+};
+
+export const DIVIDER_ITEM: DividerItem = {
+  type: ITEM_TYPE.DIVIDER,
+};
+
+export const NO_RESULTS_ITEM: NoResultsItem = {
+  key: "noResults",
+  type: ITEM_TYPE.NO_RESULTS,
+};

package/src/components/Filter/components/SearchAllFilters/common/entites.ts

@@ -0,0 +1,44 @@
+import { SelectCategoryValueView } from "../../../../../common/entities";
+import { FilterMenuSearchMatchRange } from "../../../common/entities";
+
+export enum ITEM_TYPE {
+  CATEGORY = "CATEGORY",
+  DIVIDER = "DIVIDER",
+  NO_RESULTS = "NO_RESULTS",
+  VALUE = "VALUE",
+}
+
+export interface CategoryItem {
+  categoryLabel: string;
+  key: string;
+  type: ITEM_TYPE.CATEGORY;
+}
+
+export interface DividerItem {
+  type: ITEM_TYPE.DIVIDER;
+}
+
+export interface NoResultsItem {
+  key: "noResults";
+  type: ITEM_TYPE.NO_RESULTS;
+}
+
+export enum OVERFLOW_STYLE {
+  HIDDEN = "hidden",
+  NONE = "",
+}
+
+export interface ValueItem {
+  categoryKey: string;
+  key: string;
+  matchRanges?: FilterMenuSearchMatchRange[];
+  type: ITEM_TYPE.VALUE;
+  value: SelectCategoryValueView;
+}
+
+export type SearchAllFiltersDynamicItem =
+  | CategoryItem
+  | ValueItem
+  | NoResultsItem;
+
+export type SearchAllFiltersItem = SearchAllFiltersDynamicItem | DividerItem;

package/src/components/Filter/components/SearchAllFilters/common/utils.ts

@@ -0,0 +1,15 @@
+/**
+ * Sets overflow style for the given list of elements.
+ * @param elements - Elements.
+ * @param overflowStyle - Overflow style value.
+ */
+export function setElementsOverflowStyle(
+  elements: (HTMLElement | null)[],
+  overflowStyle: string
+): void {
+  for (const element of elements) {
+    if (element) {
+      element.style.overflow = overflowStyle;
+    }
+  }
+}

package/src/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.ts

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { Popper as MPopper } from "@mui/material";
+import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+
+export const AutocompletePopper = styled(MPopper)`
+  ${mediaDesktopSmallDown} {
+    .MuiPaper-root {
+      background-color: ${smokeLight};
+
+      .MuiList-root {
+        margin: 0;
+      }
+    }
+  }
+`;