ViewControls.tsx

import {
  IconBoundingBox,
  IconClockTimeFourOutline,
  IconCursor,
  IconList,
  IconOutlinerEyeClosed,
  IconOutlinerEyeOpened,
  IconPredictions,
  IconSortDown,
  IconSortUp,
  IconTimelineRegion,
} from "@humansignal/icons";
import { Button } from "@humansignal/ui";
import { type FC, useCallback, useContext, useEffect, useMemo } from "react";
import { Dropdown } from "@humansignal/ui";
// eslint-disable-next-line
// @ts-ignore
import { Menu } from "../../../common/Menu/Menu";
// local merge icon
import MergeIcon from "./MergeIcon";
import { cn } from "../../../utils/bem";
import { SidePanelsContext } from "../SidePanelsContext";
import "./ViewControls.prefix.css";
import { observer } from "mobx-react";

export type GroupingOptions = "manual" | "label" | "type";

export type OrderingOptions = "score" | "date" | "mediaStartTime";

export type OrderingDirection = "asc" | "desc";

interface ViewControlsProps {
  ordering: OrderingOptions;
  orderingDirection?: OrderingDirection;
  regions: any;
  onOrderingChange: (ordering: OrderingOptions) => void;
  onGroupingChange: (grouping: GroupingOptions) => void;
}

const mediaStartTimeSupportedTags = [
  ["labels", "audio"],
  ["labels", "videorectangle", "video"],
  ["timelinelabels", "video"],
  ["timeserieslabels", "timeseries"],
];

export const ViewControls: FC<ViewControlsProps> = observer(
  ({ ordering, regions, orderingDirection, onOrderingChange, onGroupingChange }) => {
    const grouping = regions.group;
    const context = useContext(SidePanelsContext);

    // Check labeling configuration for media-time-capable object tags
    const mediaTimeSupport: boolean | null = useMemo(() => {
      const names = regions.annotation?.names;
      if (!names || names.size === 0) return null;

      const tags = Array.from(names.values());
      // Check if all tag types from the tuple exist in the configuration
      return mediaStartTimeSupportedTags.some((requiredTagTypes) => {
        return requiredTagTypes.every((requiredType) => tags.some((tag: any) => tag?.type === requiredType));
      });
    }, [regions.annotation?.names]);

    // Auto-fallback to "date" if current ordering is "mediaStartTime" but no media-time support in config
    useEffect(() => {
      if (ordering === "mediaStartTime" && mediaTimeSupport === false) {
        onOrderingChange("date");
      }
    }, [ordering, mediaTimeSupport, onOrderingChange]);

    const getGroupingLabels = useCallback((value: GroupingOptions): LabelInfo => {
      switch (value) {
        case "manual":
          return {
            label: (
              <>
                <IconList /> Group Manually
              </>
            ),
            selectedLabel: "Manual",
            icon: <IconList width={16} height={16} />,
            tooltip: "Manually Grouped",
          };
        case "label":
          return {
            label: (
              <>
                <IconBoundingBox /> Group by Label
              </>
            ),
            selectedLabel: "By Label",
            icon: <IconBoundingBox width={16} height={16} />,
            tooltip: "Grouped by Label",
          };
        case "type":
          return {
            label: (
              <>
                <IconCursor /> Group by Tool
              </>
            ),
            selectedLabel: "By Tool",
            icon: <IconCursor width={16} height={16} />,
            tooltip: "Grouped by Tool",
          };
      }
    }, []);

    const getOrderingLabels = useCallback((value: OrderingOptions): LabelInfo => {
      switch (value) {
        case "date":
          return {
            label: (
              <>
                <IconClockTimeFourOutline /> Order by Time
              </>
            ),
            selectedLabel: "By Time",
            icon: <IconClockTimeFourOutline width={16} height={16} />,
          };
        case "score":
          return {
            label: (
              <>
                <IconPredictions /> Order by Score
              </>
            ),
            selectedLabel: "By Score",
            icon: <IconPredictions width={16} height={16} />,
          };
        case "mediaStartTime":
          return {
            label: (
              <>
                <IconTimelineRegion /> Order by Media Start Time
              </>
            ),
            selectedLabel: "By Media Start Time",
            icon: <IconTimelineRegion width={16} height={16} />,
          };
      }
    }, []);

    const renderOrderingDirectionIcon = orderingDirection === "asc" ? <IconSortUp /> : <IconSortDown />;

    return (
      <div className={cn("view-controls").mod({ collapsed: context.locked }).toClassName()}>
        <Grouping
          value={grouping}
          options={["manual", "type", "label"]}
          onChange={(value) => onGroupingChange(value)}
          readableValueForKey={getGroupingLabels}
        />
        {grouping === "manual" && (
          <div className={cn("view-controls").elem("sort").toClassName()}>
            <Grouping
              value={ordering}
              direction={orderingDirection}
              options={mediaTimeSupport ? ["score", "date", "mediaStartTime"] : ["score", "date"]}
              onChange={(value) => onOrderingChange(value)}
              readableValueForKey={getOrderingLabels}
              allowClickSelected
              extraIcon={renderOrderingDirectionIcon}
              width={230}
            />
          </div>
        )}
        <MergeRegionsButton regions={regions} />
        <ToggleRegionsVisibilityButton regions={regions} />
      </div>
    );
  },
);

interface LabelInfo {
  label: string | React.ReactNode | JSX.Element;
  selectedLabel: string;
  icon: JSX.Element;
  tooltip?: string;
}

interface GroupingProps<T extends string> {
  value: T;
  options: T[];
  direction?: OrderingDirection;
  allowClickSelected?: boolean;
  onChange: (value: T) => void;
  readableValueForKey: (value: T) => LabelInfo;
  extraIcon?: JSX.Element;
  width?: number;
}

const Grouping = <T extends string>({
  value,
  options,
  direction,
  allowClickSelected,
  onChange,
  readableValueForKey,
  extraIcon,
  width = 200,
}: GroupingProps<T>) => {
  const readableValue = useMemo(() => {
    return readableValueForKey(value);
  }, [value]);

  const optionsList: [T, LabelInfo][] = useMemo(() => {
    return options.map((key) => [key, readableValueForKey(key)]);
  }, [options, readableValueForKey]);

  const dropdownContent = useMemo(() => {
    return (
      <Menu
        size="medium"
        style={{
          width,
          minWidth: width,
          borderRadius: 4,
        }}
        selectedKeys={[value]}
        allowClickSelected={allowClickSelected}
      >
        {optionsList.map(([key, label]) => (
          <GroupingMenuItem
            key={key}
            name={key}
            value={value}
            direction={direction}
            label={label}
            onChange={(value) => onChange(value)}
          />
        ))}
      </Menu>
    );
  }, [value, optionsList, readableValue, direction, onChange]);

  return (
    <Dropdown.Trigger content={dropdownContent} style={{ width }}>
      <Button
        variant="neutral"
        size="smaller"
        data-testid={`grouping-${value}`}
        look="string"
        leading={readableValue.icon}
        trailing={extraIcon}
      >
        {readableValue.selectedLabel}
      </Button>
    </Dropdown.Trigger>
  );
};

interface GroupingMenuItemProps<T extends string> {
  name: T;
  label: LabelInfo;
  value: T;
  direction?: OrderingDirection;
  onChange: (key: T) => void;
}

const GroupingMenuItem = <T extends string>({ value, name, label, direction, onChange }: GroupingMenuItemProps<T>) => {
  return (
    <Menu.Item name={name} onClick={() => onChange(name)}>
      <div className={cn("view-controls").elem("label").toClassName()}>
        {label.label}
        <DirectionIndicator direction={direction} name={name} value={value} />
      </div>
    </Menu.Item>
  );
};

interface DirectionIndicator {
  direction?: OrderingDirection;
  value: string;
  name: string;
  wrap?: boolean;
}

const DirectionIndicator: FC<DirectionIndicator> = ({ direction, value, name, wrap = true }) => {
  const content = direction === "asc" ? <IconSortUp /> : <IconSortDown />;

  if (!direction || value !== name) return null;
  if (!wrap) return content;

  return <span>{content}</span>;
};

interface ToggleRegionsVisibilityButton {
  regions: any;
}

const ToggleRegionsVisibilityButton = observer<FC<ToggleRegionsVisibilityButton>>(({ regions }) => {
  const toggleRegionsVisibility = useCallback(
    (e) => {
      e.preventDefault();
      e.stopPropagation();
      regions.toggleVisibility();
    },
    [regions],
  );

  const isDisabled = !regions?.regions?.length;
  const isAllHidden = !isDisabled && regions.isAllHidden;

  return (
    <Button
      variant="neutral"
      size="smaller"
      look="string"
      disabled={isDisabled}
      onClick={toggleRegionsVisibility}
      aria-label={isAllHidden ? "Show all regions" : "Hide all regions"}
      tooltip={isAllHidden ? "Show all regions" : "Hide all regions"}
    >
      {isAllHidden ? (
        <IconOutlinerEyeClosed width={16} height={16} />
      ) : (
        <IconOutlinerEyeOpened width={16} height={16} />
      )}
    </Button>
  );
});

const MergeRegionsButton = observer<FC<ToggleRegionsVisibilityButton>>(({ regions }) => {
  const merge = useCallback(
    (e) => {
      e.preventDefault();
      e.stopPropagation();
      regions.annotation.mergeSelectedRegions?.();
    },
    [regions],
  );

  const isDisabled = !regions?.selection || regions.selection.size < 2;

  return (
    <Button
      variant="neutral"
      size="smaller"
      look="string"
      disabled={isDisabled}
      onClick={merge}
      aria-label={"Merge selected regions"}
      tooltip={"Merge selected regions"}
    >
      <MergeIcon width={16} height={16} />
    </Button>
  );
});