web/libs/editor/src/stores/RegionStore.js - develop - vshmidt/label-studio

web/libs/editor/src/stores/RegionStore.js
711 строк21 KB
Yousif Yassi
fix: FIT-1516: Hide/Show Regions by Group Not Working (#9593)
11 мар 2026, 22:31
11 мар 2026, 22:3148e605b
import { destroy, detach, getEnv, getParent, onPatch, types } from "mobx-state-tree";

import { Hotkey } from "../core/Hotkey";
import { isDefined } from "../utils/utilities";
import { AllRegionsType } from "../regions";
import { debounce } from "@humansignal/core/lib/utils/debounce";
import Tree, { TRAVERSE_STOP } from "../core/Tree";
import { FF_DEV_2755, isFF } from "../utils/feature-flags";

const hotkeys = Hotkey("RegionStore");

const localStorageKeys = {
  sort: "outliner:sort",
  sortDirection: "outliner:sort-direction",
  group: "outliner:group",
  view: "regionstore:view",
};

const SelectionMap = types
  .model({
    selected: types.optional(types.map(types.safeReference(AllRegionsType)), {}),
    drawingSelected: types.optional(types.map(types.safeReference(AllRegionsType)), {}),
  })
  .views((self) => {
    return {
      get keys() {
        return Array.from(self.selected.keys());
      },
      get annotation() {
        return getParent(self).annotation;
      },
      get highlighted() {
        return self.selected.size === 1 ? self.selected.values().next().value : null;
      },
      get size() {
        return self.selected.size;
      },
      get list() {
        return Array.from(self.selected.values());
      },
      isSelected(region) {
        return self.selected.has(region.id);
      },
    };
  })
  .actions((self) => {
    const updateResultsFromSelection = debounce(() => {
      self._updateResultsFromSelection();
    }, 0);

    return {
      beforeUnselect(region) {
        region.perRegionTags.forEach((tag) => tag.submitChanges?.());
      },
      afterUnselect(region) {
        region.afterUnselectRegion?.();
      },
      drawingSelect(region) {
        self.drawingSelected.put(region);
      },
      drawingUnselect() {
        Array.from(self.drawingSelected.values()).forEach((region) => {
          self.drawingSelected.delete(region.id);
        });
      },
      select(region) {
        self.selected.put(region);
        region.selectRegion && region.selectRegion();

        if (self.highlighted) {
          // @todo some backward compatibility, should be rewritten to state handling
          // @todo but there are some actions should be performed like scroll to region
          self.highlighted.perRegionTags.forEach((tag) => tag.updateFromResult?.(undefined));
          // special case for Taxonomy as labeling tool
          self.highlighted.labelingTags.forEach((tag) => tag.updateFromResult?.(undefined));
          updateResultsFromSelection();
        } else {
          updateResultsFromSelection();
        }

        // hook for side effects after region selected
        region.object?.afterRegionSelected?.(region);
      },
      _updateResultsFromSelection() {
        self._updateResultsFromRegions(self.selected.values());
      },
      _updateResultsFromRegions(regions) {
        const valuesFromControls = {};
        const controlsByName = {};

        Array.from(regions).map((region) => {
          region.results.forEach((result) => {
            const controlName = result.from_name.name;
            const currentValue = valuesFromControls[controlName];

            if (currentValue !== undefined) {
              valuesFromControls[controlName] = result.mergeMainValue(currentValue);
            } else {
              controlsByName[controlName] = result.from_name;
              valuesFromControls[controlName] = result.mainValue;
            }
          });
        });
        self.annotation.unselectStates();
        for (const [controlName, value] of Object.entries(valuesFromControls)) {
          const control = controlsByName[controlName];

          control.updateFromResult?.(value);
        }
      },
      unselect(region) {
        self.beforeUnselect(region);
        self.selected.delete(region.id);
        self.afterUnselect(region);
      },
      clear() {
        // clear() in the middle empties selected regions, so store them in separate array
        const regionEntries = [...self.selected.values()];

        for (const region of regionEntries) {
          self.beforeUnselect(region);
        }
        self.selected.clear();
        for (const region of regionEntries) {
          self.afterUnselect(region);
        }
      },
      highlight(region) {
        self.clear();
        self.select(region);
      },
    };
  });

export default types
  .model("RegionStore", {
    sort: types.optional(
      types.enumeration(["date", "score", "mediaStartTime"]),
      () => window.localStorage.getItem(localStorageKeys.sort) ?? "date",
    ),

    sortOrder: types.optional(
      types.enumeration(["asc", "desc"]),
      () => window.localStorage.getItem(localStorageKeys.sortDirection) ?? "asc",
    ),

    group: types.optional(
      types.enumeration(["type", "label", "manual"]),
      () => window.localStorage.getItem(localStorageKeys.group) ?? "manual",
    ),

    filter: types.maybeNull(types.array(types.safeReference(AllRegionsType)), null),

    view: types.optional(
      types.enumeration(["regions", "labels"]),
      window.localStorage.getItem(localStorageKeys.view) ?? "regions",
    ),
    selection: types.optional(SelectionMap, {}),
  })
  .views((self) => {
    let lastClickedItem;
    const getShiftClickSelectedRange = (item, tree) => {
      const regions = [];
      let clickedRegionsFound = 0;

      Tree.traverseTree({ children: tree }, (node) => {
        if (!node.isArea) return;
        if (node.item === lastClickedItem || node.item === item || clickedRegionsFound === 1) {
          if (node.item) regions.push(node.item);
          if (node.item === lastClickedItem) ++clickedRegionsFound;
          if (node.item === item) ++clickedRegionsFound;
        }
        if (clickedRegionsFound >= 2) {
          return TRAVERSE_STOP;
        }
      });

      return regions;
    };
    const createClickRegionInTreeHandler = (tree) => {
      return (ev, item) => {
        if (ev.shiftKey) {
          const regions = getShiftClickSelectedRange(item, tree);

          regions.forEach((region) => {
            self.selection.select(region);
          });

          lastClickedItem = null;
          return;
        }
        lastClickedItem = item;
        if (ev.metaKey || ev.ctrlKey) {
          self.toggleSelection(item);
          return;
        }
        if (self.selection.highlighted === item) {
          self.clearSelection();
          return;
        }
        self.highlight(item);
      };
    };

    return {
      get annotation() {
        return getParent(self);
      },

      get classifications() {
        const textAreas = Array.from(self.annotation.names.values())
          .filter((t) => isDefined(t))
          .filter((t) => t.type === "textarea" && !t.perregion)
          .map((t) => t.regions);

        return [].concat(...textAreas);
      },

      get regions() {
        return Array.from(self.annotation.areas.values()).filter((area) => !area.classification);
      },

      get filteredRegions() {
        return self.filter || self.regions;
      },

      get suggestions() {
        return Array.from(self.annotation.suggestions.values()).filter((area) => !area.classification);
      },

      get isAllHidden() {
        return !self.regions.find((area) => !area.hidden);
      },

      get sortedRegions() {
        const sorts = {
          date: (isDesc) =>
            [...self.filteredRegions].sort(isDesc ? (a, b) => b.ouid - a.ouid : (a, b) => a.ouid - b.ouid),
          score: (isDesc) =>
            [...self.filteredRegions].sort(isDesc ? (a, b) => b.score - a.score : (a, b) => a.score - b.score),
          mediaStartTime: (isDesc) =>
            [...self.filteredRegions].sort((a, b) => {
              const aTime = self.getRegionMediaTime(a);
              const bTime = self.getRegionMediaTime(b);

              // Handle regions without media time (put them at the end)
              if (aTime === null && bTime === null) return 0;
              if (aTime === null) return 1;
              if (bTime === null) return -1;

              return isDesc ? bTime - aTime : aTime - bTime;
            }),
        };

        const sorted = sorts[self.sort](self.sortOrder === "desc");

        return sorted;
      },

      get regionIndexMap() {
        const map = {};
        self.sortedRegions.forEach((region, idx) => {
          map[region.id] = idx + 1;
        });
        return map;
      },

      getRegionMediaTime(region) {
        // Handle audio regions - they have start time in seconds
        if ((region.type === "audioregion" || region.type === "timeseriesregion") && typeof region.start === "number") {
          return region.start;
        }

        // Handle timeline regions (video) - they have ranges with start frame
        if (region.type === "timelineregion" && region.ranges?.[0]) {
          return region.ranges[0].start;
        }

        // Handle video rectangle regions - they have sequence with frames
        if (region.type === "videorectangleregion" && region.sequence?.[0]) {
          return region.sequence[0].frame;
        }

        // Return null for regions without media time information
        return null;
      },

      getRegionsTree(enrich) {
        if (self.group === null || self.group === "manual") {
          return self.asTree(enrich);
        }
        if (self.group === "label") {
          return self.asLabelsTree(enrich);
        }
        if (self.group === "type") {
          return self.asTypeTree(enrich);
        }
        console.error(`Grouping by ${self.group} is not implemented`);
      },

      asTree(enrich) {
        const regions = self.sortedRegions;
        const tree = [];
        const lookup = new Map();
        const onClick = createClickRegionInTreeHandler(tree);

        // every region has a parentID
        // parentID is an empty string - "" if it's top level
        // or it can contain a string key to the parent region
        // [ { id: "1", parentID: "" }, { id: "2", parentID: "1" } ]
        // would create a tree of two elements

        regions.forEach((el, idx) => {
          const result = enrich(el, idx, onClick);

          Object.assign(result, {
            item: el,
            children: [],
            isArea: true,
          });

          lookup.set(el.cleanId, result);
        });

        lookup.forEach((el) => {
          const pid = el.item.parentID;
          const parent = pid ? (lookup.get(pid) ?? lookup.get(pid.replace(/#(.+)/i, ""))) : null;

          if (parent) return parent.children.push(el);

          tree.push(el);
        });

        return tree;
      },

      asLabelsTree(enrich) {
        // collect all label states into two maps
        const groups = {};
        const result = [];
        const onClick = createClickRegionInTreeHandler(result);
        let index = 0;
        const getLabelGroup = (label, key) => {
          const labelGroup = groups[key];

          if (labelGroup) return labelGroup;

          return (groups[key] = {
            ...enrich(label, index, true),
            id: key,
            isGroup: true,
            isNotLabel: true,
            children: [],
          });
        };
        const getRegionLabel = (region) =>
          region.labeling?.selectedLabels || (region.emptyLabel && [region.emptyLabel]);
        const addToLabelGroup = (key, label, region) => {
          const group = getLabelGroup(label, key);
          const groupId = group.id;
          const labelHotKey = getRegionLabel(region)?.[0]?.hotkey;

          if (isFF(FF_DEV_2755)) {
            group.hotkey = labelHotKey;
            group.pos = groupId.slice(0, groupId.indexOf("#"));
          }
          group.children.push({
            ...enrich(region, index, false, null, onClick, groupId),
            item: region,
            isArea: true,
          });
        };
        const addRegionsToLabelGroup = (labels, region) => {
          if (labels) {
            for (const label of labels) {
              addToLabelGroup(`${label.value}#${label.id}`, label, region);
            }
          } else {
            addToLabelGroup("no-label", undefined, region);
          }
        };

        for (const region of self.regions) {
          addRegionsToLabelGroup(region.labeling?.selectedLabels, region);

          index++;
        }

        const groupsArray = Object.values(groups);

        if (isFF(FF_DEV_2755)) {
          groupsArray.sort((a, b) => (a.hotkey > b.hotkey ? 1 : a.hotkey < b.hotkey ? -1 : 0));
        }
        result.push(...groupsArray);

        return result;
      },

      asTypeTree(enrich) {
        // collect all label states into two maps
        const groups = {};
        const result = [];
        const onClick = createClickRegionInTreeHandler(result);

        let index = 0;

        const getTypeGroup = (region, key) => {
          const group = groups[key];

          if (group) return group;

          const groupingEntity = {
            type: "tool",
            value: key.replace("region", ""),
            background: "#000",
          };

          return (groups[key] = {
            ...enrich(groupingEntity, index, true),
            id: key,
            key,
            isArea: false,
            children: [],
            isGroup: true,
            entity: region,
          });
        };

        const addToLabelGroup = (region) => {
          const key = region.type;
          const group = getTypeGroup(region, key);

          group.children.push({
            ...enrich(region, index, false, null, onClick),
            item: region,
            isArea: true,
          });
        };

        for (const region of self.regions) {
          addToLabelGroup(region);

          index++;
        }

        result.push(...Object.values(groups));

        return result;
      },

      get hasSelection() {
        return !!self.selection.size;
      },
      isSelected(region) {
        return self.selection.isSelected(region);
      },

      get selectedIds() {
        return Array.from(self.selection.selected.values()).map((reg) => reg.id);
      },

      get persistantView() {
        return window.localStorage.getItem(localStorageKeys.view) ?? self.view;
      },
    };
  })
  .actions((self) => ({
    addRegion(region) {
      self.regions.push(region);
      getEnv(self).events.invoke("entityCreate", region);
    },

    toggleSortOrder() {
      if (self.sortOrder === "asc") self.sortOrder = "desc";
      else self.sortOrder = "asc";
    },

    setView(view) {
      if (isFF(FF_DEV_2755)) {
        window.localStorage.setItem(localStorageKeys.view, view);
      }
      self.view = view;
    },

    setSort(sort) {
      if (self.sort === sort) {
        self.toggleSortOrder();
      } else {
        self.sortOrder = "asc";
        self.sort = sort;
      }

      window.localStorage.setItem(localStorageKeys.sort, self.sort);
      window.localStorage.setItem(localStorageKeys.sortDirection, self.sortOrder);

      self.initHotkeys();
      self.annotation.updateAppearenceFromState();
    },

    setGrouping(group) {
      self.group = group;
      window.localStorage.setItem(localStorageKeys.group, self.group);
    },

    setFilteredRegions(filter) {
      if (self.regions.length === filter.length) {
        self.filter = null;
        self.regions.forEach((region) => region.filtered && region.toggleFiltered());
      } else {
        const filteredIds = filter.map((filter) => filter.id);

        self.filter = filter;

        self.regions.forEach((region) => {
          if (!region.hideable || (region.hidden && !region.filtered)) return;
          if (filteredIds.includes(region.id)) region.hidden && region.toggleFiltered();
          else if (!region.hidden) region.toggleFiltered();
        });
      }
      self.annotation.updateAppearenceFromState();
    },

    /**
     * Delete region
     * @param {obj} region
     */
    deleteRegion(region) {
      detach(region);

      // find regions that have that region as a parent
      const children = self.filterByParentID(region.id);

      children && children.forEach((r) => r.setParentID(region.parentID));

      getEnv(self).events.invoke("entityDelete", region);

      destroy(region);
      self.initHotkeys();
    },

    findRegionID(id) {
      if (!id) return null;
      return self.regions.find((r) => r.id === id);
    },

    findRegion(id) {
      return self.findRegionID(id);
    },

    filterByParentID(id) {
      return self.regions.filter((r) => r.parentID === id);
    },

    normalizeRegionID(regionId) {
      if (!regionId) return "";
      if (!regionId.includes("#")) {
        regionId = `${regionId}#${self.annotation.id}`;
      }
      return regionId;
    },

    afterCreate() {
      onPatch(self, (patch) => {
        if ((patch.op === "add" || patch.op === "delete") && patch.path.indexOf("/regions/") !== -1) {
          self.initHotkeys();
        }
      });
      self.view =
        window.localStorage.getItem(localStorageKeys.view) ??
        (self.annotation.store.settings.displayLabelsByDefault ? "labels" : "regions");
    },

    // init Alt hotkeys for regions selection
    initHotkeys() {
      const PREFIX = "alt+shift+";

      hotkeys.unbindAll();

      self.sortedRegions.forEach((r, n) => {
        hotkeys.addKey(PREFIX + (n + 1), () => {
          self.unselectAll();
          r.selectRegion();
        });
      });

      // this is added just for the reference to show up in the
      // settings page
      hotkeys.addKey("alt+shift+$n", () => {}, "Select a region");
    },

    /**
     * @param {boolean} tryToKeepStates try to keep states selected if such settings enabled
     */
    unselectAll() {
      self.annotation.unselectAll();
    },

    unhighlightAll() {
      self.regions.forEach((r) => r.setHighlight(false));
    },

    selectNext() {
      const { regions } = self;
      const idx = self.regions.findIndex((r) => r.selected);

      if (idx < 0) {
        const region = regions[0];

        region && self.annotation.selectArea(region);
      } else {
        const next = isDefined(regions[idx + 1]) ? regions[idx + 1] : regions[0];

        next && self.annotation.selectArea(next);
      }
    },

    toggleVisibility() {
      const shouldBeHidden = !self.isAllHidden;

      self.regions.forEach((area) => {
        if (area.hidden !== shouldBeHidden) {
          area.toggleHidden();
        }
      });
    },

    selectRegionByID(regionId) {
      const normalizedRegionId = self.normalizeRegionID(regionId);
      const targetRegion = self.findRegionID(normalizedRegionId);
      if (!targetRegion) return;
      self.toggleSelection(targetRegion, true);
    },

    setRegionVisible(regionId) {
      const normalizedRegionId = self.normalizeRegionID(regionId);
      const targetRegion = self.findRegionID(normalizedRegionId);
      if (!targetRegion) return;

      self.regions.forEach((area) => {
        if (!area.hidden) {
          area.toggleHidden();
        }
      });

      targetRegion.toggleHidden();
    },

    setHiddenByTool(shouldBeHidden, label) {
      // Support both direct region type (e.g. { type: "rectangleregion" }) and
      // By Tool group entity from asTypeTree (e.g. { type: "tool", value: "rectangle" })
      const matchType =
        label?.type === "tool" && label?.value != null
          ? `${String(label.value).replace(/region$/i, "")}region`
          : label?.type;

      if (!matchType) return;

      self.regions.forEach((area) => {
        if (area.hidden !== shouldBeHidden && area.type === matchType) {
          area.toggleHidden();
        }
      });
    },

    setHiddenByLabel(shouldBeHidden, label) {
      // Match by label value/id so group hide/show works when entity is from
      // a different region's selectedLabels (reference equality can fail)
      const matchByValue =
        label?.value != null && label?.id != null
          ? (selected) => selected.some((s) => s.value === label.value && s.id === label.id)
          : (selected) => selected.includes(label);

      self.regions.forEach((area) => {
        if (area.hidden !== shouldBeHidden) {
          const l = area.labeling;

          if (l) {
            const selected = l.selectedLabels;

            if (selected && matchByValue(selected)) {
              area.toggleHidden();
            }
          }
        }
      });
    },

    highlight(area) {
      self.selection.highlight(area);
    },

    clearSelection() {
      self.selection.clear();
    },

    selectRegionsByIds(ids) {
      self.regions.map((region) => {
        if (ids.indexOf(region.id) === -1) return;
        self.toggleSelection(region, true);
      });
    },

    toggleSelection(region, isSelected) {
      if (!isDefined(isSelected)) isSelected = !self.selection.isSelected(region);
      if (isSelected) {
        self.selection.select(region);
      } else {
        self.selection.unselect(region);
      }
    },
  }));