feat!: Add Zoo

src/MetadataDrawer.tsx

@@ -13,9 +13,7 @@ import makeStyles from "@mui/styles/makeStyles";
 import { theme, HtmlTooltip, icons, Typography } from "@gliff-ai/style";
 import SVG from "react-inlinesvg";
 import { MetaItem } from "@/interfaces";
-import { getLabelsFromKeys, MetadataLabel } from "@/search/SearchBar";
-
-type MetadataNameMap = { [index: string]: string };
+import { getLabelsFromKeys } from "@/helpers";
 
 const useStyles = makeStyles({
   paperHeader: {
@@ -85,7 +83,7 @@ const useStyles = makeStyles({
   svgSmall: { width: "12px", height: "100%" },
 });
 
-export const metadataNameMap: MetadataNameMap = {
+export const dataNameMap: { [index: string]: string } = {
   imageName: "Name",
   size: "Size",
   dateCreated: "Created",
@@ -103,6 +101,8 @@ export const metadataNameMap: MetadataNameMap = {
   assignees: "Assignees",
 };
 
+type DataKeyLabel = { key: string; label: string };
+
 interface Props {
   metadata: MetaItem;
   close: () => void;
@@ -111,13 +111,13 @@ interface Props {
 export default function MetadataDrawer(props: Props): ReactElement {
   const classes = useStyles();
   const [hover, sethover] = useState(false);
-  const [metaKeys, setMetaKeys] = useState<MetadataLabel[]>([]);
+  const [metaKeys, setMetaKeys] = useState<DataKeyLabel[]>([]);
 
   useEffect(() => {
     setMetaKeys(
       Object.keys(props.metadata).reduce(
-        getLabelsFromKeys,
-        [] as MetadataLabel[]
+        getLabelsFromKeys(dataNameMap)(),
+        [] as DataKeyLabel[]
       )
     );
   }, [props.metadata]);
@@ -178,8 +178,8 @@ export default function MetadataDrawer(props: Props): ReactElement {
                   <ListItemText
                     primaryTypographyProps={{ variant: "h6" }}
                     className={classes.metaKey}
-                    title={`${metadataNameMap[key] || key}`}
-                    primary={`${metadataNameMap[key] || key}:`}
+                    title={`${dataNameMap[key] || key}`}
+                    primary={`${dataNameMap[key] || key}:`}
                     classes={{
                       primary: classes.metaKey,
                       root: classes.metaRoot,

src/components/Tooltips.ts

@@ -49,14 +49,6 @@ const tooltips: Tooltips = {
     name: "Download Dataset",
     icon: icons.download,
   },
-  sort: {
-    name: "Sort",
-    icon: icons.searchFilter,
-  },
-  search: {
-    name: "Search",
-    icon: icons.search,
-  },
   addLabels: {
     name: "Update Image Labels",
     icon: icons.annotationLabel,

src/components/plugins/PluginsAccordion.tsx

@@ -139,7 +139,7 @@ export const PluginsAccordion = ({
       } else {
         data = {
           collectionUid,
-          imageUid: selectedImagesUid[0] || undefined,
+          imageUids: selectedImagesUid,
         };
       }
 

src/components/plugins/interfaces.ts

@@ -9,7 +9,7 @@ interface PluginElement {
 
 type PluginInput = Partial<{
   collectionUid: string;
-  imageUid: string;
+  imageUids: string[];
   metadata: Metadata;
 }>;
 

src/filter/index.ts

@@ -0,0 +1,204 @@
+import type { Filter, FilterData, FilterDataItem } from "./interfaces";
+
+export class Filters {
+  activeFilters: Filter[];
+
+  isGrouped: boolean;
+
+  sortedBy: string | null;
+
+  constructor() {
+    this.activeFilters = [];
+    this.isGrouped = false;
+    this.sortedBy = null;
+  }
+
+  private compare = (
+    a: string | Date | number,
+    b: string | Date | number,
+    ascending: boolean
+  ): number => {
+    // Compare two values. Undefined values are always at the end.
+    if (a === undefined) {
+      return 1;
+    }
+    if (b === undefined) {
+      return -1;
+    }
+    if (a < b) {
+      return ascending ? -1 : 1;
+    }
+    if (a > b) {
+      return ascending ? 1 : -1;
+    }
+    return 0;
+  };
+
+  getDataKeys = (item: FilterDataItem): string[] =>
+    Object.keys(item).filter((k) => k !== "selected");
+
+  hasAnyFilters = (): boolean => this.activeFilters.length > 0;
+
+  private hasFilter = (filter: Filter): boolean =>
+    this.activeFilters.some(
+      (filt) => filt.key === filter.key && filt.value === filter.value
+    );
+
+  resetFilters = (data: FilterData): FilterData => {
+    this.activeFilters = [];
+    return this.selectAll(data);
+  };
+
+  selectAll = (data: FilterData): FilterData =>
+    data.map((i) => ({ ...i, filterShow: true }));
+
+  isSelectAll = (filter: Filter): boolean => {
+    const { value, key } = filter;
+    return value === "All values" || key === "" || value === "";
+  };
+
+  toggleFilter = (filter: Filter): void => {
+    if (this.hasFilter(filter)) {
+      this.activeFilters.splice(this.activeFilters.indexOf(filter), 1);
+    } else {
+      this.activeFilters.push(filter);
+    }
+  };
+
+  addFilter = (filter: Filter): void => {
+    if (!this.hasFilter(filter)) {
+      this.activeFilters.push(filter);
+    }
+  };
+
+  applyFilter = (data: FilterData, filter: Filter): FilterData => {
+    if (this.isSelectAll(filter)) {
+      return this.resetFilters(data);
+    }
+    this.addFilter(filter);
+    return this.filterData(data);
+  };
+
+  private getKeyType = (data: FilterData, key: string): string => {
+    if (key?.toLowerCase().includes("date")) return "date";
+    for (const mitem of data) {
+      const someType = typeof mitem[key];
+      if (someType !== "undefined") {
+        return someType;
+      }
+    }
+    return "undefined";
+  };
+
+  sortData = (
+    data: FilterData,
+    key: string,
+    ascending = true
+  ): FilterData | null => {
+    const dataCopy = [...data];
+    const dataType = this.getKeyType(data, key);
+
+    function toDate(value: string): Date {
+      return value !== undefined ? new Date(value) : undefined;
+    }
+
+    this.sortedBy = key;
+
+    switch (dataType) {
+      case "number":
+        dataCopy.sort((a: FilterDataItem, b: FilterDataItem): number =>
+          this.compare(a[key] as number, b[key] as number, ascending)
+        );
+        return dataCopy;
+      case "date":
+        dataCopy.sort((a, b): number =>
+          this.compare(
+            toDate(a[key] as string),
+            toDate(b[key] as string),
+            ascending
+          )
+        );
+        return dataCopy;
+
+      case "string":
+        dataCopy.sort((a: FilterDataItem, b: FilterDataItem): number =>
+          this.compare(a[key] as number, b[key] as number, ascending)
+        );
+        return dataCopy;
+
+      default:
+        console.warn(`Cannot sort values with type "${dataType}".`);
+        this.sortedBy = null;
+        return null;
+    }
+  };
+
+  filterData = (data: FilterData): FilterData => {
+    const dataCopy = [...data];
+    if (this.activeFilters.length > 0) {
+      dataCopy.forEach((item) => {
+        this.activeFilters.forEach((filter, fi) => {
+          const value = item[filter.key];
+
+          // current filter selection
+          const currentSel = Number(
+            Array.isArray(value)
+              ? value.some((v) => v.includes(filter.value))
+              : String(value).includes(filter.value)
+          );
+
+          // selection for all filters up to current
+          const prevSel = fi === 0 ? 1 : Number(item.filterShow);
+
+          // update 'filterShow' field
+          item.filterShow = Boolean(prevSel * currentSel);
+        });
+      });
+      return dataCopy;
+    }
+    // select all items
+    return this.selectAll(dataCopy);
+  };
+
+  private getMonthAndYear = (date: string): string =>
+    date !== undefined
+      ? new Date(date).toLocaleDateString("en-GB", {
+          month: "short",
+          year: "numeric",
+        })
+      : "";
+
+  toggleIsGrouped = (): void => {
+    this.isGrouped = !this.isGrouped;
+  };
+
+  resetSort = (): void => {
+    this.sortedBy = null;
+  };
+
+  groupByValue = (data: FilterData): FilterData => {
+    // Assign the newGroup field to all items, based on the same key used for sort
+    if (!this.sortedBy || !this.isGrouped) return data;
+
+    const areValuesEqual = this.sortedBy?.toLowerCase().includes("date")
+      ? (value: unknown, previousValue: unknown) =>
+          this.getMonthAndYear(value as string) !==
+          this.getMonthAndYear(previousValue as string)
+      : (value: unknown, previousValue: unknown) => value !== previousValue;
+
+    let prevValue: unknown = null;
+    data.forEach((item) => {
+      if (!item.filterShow) return;
+      // Number.MAX_VALUE added to handle missing values
+      const value = (item[this.sortedBy] as string) || Number.MAX_VALUE;
+      if (!prevValue || areValuesEqual(value, prevValue)) {
+        item.newGroup = true;
+      } else {
+        item.newGroup = false;
+      }
+      prevValue = value;
+    });
+    return data;
+  };
+}
+export type { Filter, FilterData, FilterDataItem };

src/filter/interfaces.ts

@@ -0,0 +1,14 @@
+type Filter = {
+  key: string;
+  value: string;
+};
+
+interface FilterDataItem {
+  [key: string]: string | number | boolean | string[] | undefined | null;
+  filterShow: boolean;
+  newGroup: boolean;
+}
+
+type FilterData = FilterDataItem[];
+
+export type { Filter, FilterDataItem, FilterData };

src/helpers.test.ts

@@ -1,7 +1,8 @@
-import { Filter, MetaItem } from "@/interfaces";
-import { sortMetadata, filterMetadata } from "./helpers";
+import { MetaItem } from "@/interfaces";
+import { Filter, FilterData, Filters } from "./filter";
 
 type TestMetaData = Partial<MetaItem>[];
+const filters = new Filters();
 const metadata: Partial<MetaItem>[] = [
   {
     string: "through",
@@ -31,8 +32,12 @@ describe("sort metadata with missing values", () => {
   test.each(testSample)(
     `sort values of type %s`,
     (key: string, output: any[]) => {
-      const metadataAsc = sortMetadata(cloneMetadata(), key);
-      const metadataDes = sortMetadata(cloneMetadata(), key, false);
+      const metadataAsc = filters.sortData(cloneMetadata() as FilterData, key);
+      const metadataDes = filters.sortData(
+        cloneMetadata() as FilterData,
+        key,
+        false
+      );
       const arrayUndefined = Array.from(
         metadata.filter((mitem) => !Object.keys(mitem).includes(key))
       ).fill(undefined);
@@ -48,8 +53,9 @@ describe("sort metadata with missing values", () => {
   );
 });
 
-const testFilter = (filters: Filter[], outcome: TestMetaData): void => {
-  const newMetadata = filterMetadata(cloneMetadata(), filters);
+const testFilter = (activeFilters: Filter[], outcome: TestMetaData): void => {
+  filters.activeFilters = activeFilters;
+  const newMetadata = filters.filterData(cloneMetadata() as FilterData);
   expect(
     newMetadata
       .filter(({ filterShow }) => filterShow)