HumanSignal · robot-ci-heartex · Jul 7, 2025 · Jul 3, 2025 · Jul 3, 2025 · Jul 3, 2025
@@ -97,7 +97,7 @@
     } = this.props;
 
     const activeStates = parent?.activeStates();
-    const statesSelected = activeStates && activeStates.length;
+    const statesSelected = activeStates?.length;
     const readonly = parent?.annotation?.isReadOnly();
 
     // skip if event fired by .move() - prevent recursion and bugs
@@ -108,10 +108,13 @@
       const x = d3.mouse(d3.event.sourceEvent.target)[0];
       const newRegion = this.newRegion;
 
+      // double click handler to create instant region
       // when 2nd click happens during 300ms after 1st click and in the same place
       if (newRegion && Math.abs(newRegion.x - x) < 4) {
         clearTimeout(this.newRegionTimer);
-        parent?.regionChanged(newRegion.range, ranges.length, newRegion.states);
+        if (!readonly) {
+          parent?.regionChanged(newRegion.range, ranges.length, newRegion.states);
+        }
         this.newRegion = null;
         this.newRegionTimer = null;
       } else if (statesSelected) {

@@ -32,6 +32,7 @@
   speed,
   className,
   formatPosition,
+  readonly = false,
   ...props
 }) => {
   const View = Views[mode];
@@ -106,8 +107,9 @@
       seekOffset,
       settings: View.settings,
       visibleWidth: seekVisibleWidth,
+      readonly,
     }),
-    [position, seekOffset, seekVisibleWidth, length, regions, step, playing, View.settings, data],
+    [position, seekOffset, seekVisibleWidth, length, regions, step, playing, View.settings, data, readonly],
   );
 
   useEffect(() => {

@@ -32,6 +32,7 @@ export interface TimelineProps<D extends ViewTypes = "frames"> {
   controlsOnTop?: boolean;
   controls?: TimelineControls;
   customControls?: TimelineCustomControls[];
+  readonly?: boolean;
   onReady?: (data: Record<string, any>) => void;
   onPlay?: () => void;
   onPause?: () => void;
@@ -121,6 +122,7 @@ export interface TimelineContextValue {
   settings?: TimelineSettings;
   changeSetting?: (key: string, value: any) => void;
   data?: any;
+  readonly?: boolean;
 }
 
 export interface TimelineMinimapProps {

@@ -10,7 +10,7 @@ type DataType = {
 };
 
 export const Controls: FC<TimelineExtraControls<Actions, DataType>> = ({ onAction }) => {
-  const { position, regions } = useContext(TimelineContext);
+  const { position, regions, readonly } = useContext(TimelineContext);
   const hasSelectedRegion = regions.some(({ selected, timeline }) => selected && !timeline);
   const closestKeypoint = useMemo(() => {
     const region = regions.find((r) => r.selected && !r.timeline);
@@ -69,11 +69,11 @@ export const Controls: FC<TimelineExtraControls<Actions, DataType>> = ({ onActio
 
   return (
     <>
-      <ControlButton onClick={onKeypointToggle} disabled={!hasSelectedRegion} tooltip="Toggle Keypoint">
+      <ControlButton onClick={onKeypointToggle} disabled={!hasSelectedRegion || readonly} tooltip="Toggle Keypoint">
         {keypointIcon}
       </ControlButton>
 
-      <ControlButton onClick={onLifespanToggle} disabled={!closestKeypoint} tooltip="Toggle Interpolation">
+      <ControlButton onClick={onLifespanToggle} disabled={!closestKeypoint || readonly} tooltip="Toggle Interpolation">
         {interpolationIcon}
       </ControlButton>
     </>

@@ -2,13 +2,11 @@
 import { getEnv, getRoot, getType, types } from "mobx-state-tree";
 import { createRef } from "react";
 import { customTypes } from "../../../core/CustomTypes";
-import { guidGenerator } from "../../../core/Helpers.ts";
 import { AnnotationMixin } from "../../../mixins/AnnotationMixin";
 import IsReadyMixin from "../../../mixins/IsReadyMixin";
 import ProcessAttrsMixin from "../../../mixins/ProcessAttrs";
 import { SyncableMixin } from "../../../mixins/Syncable";
 import { AudioRegionModel } from "../../../regions/AudioRegion";
-import Utils from "../../../utils";
 import { FF_LSDV_E_278, isFF } from "../../../utils/feature-flags";
 import { isDefined } from "../../../utils/utilities";
 import ObjectBase from "../Base";
@@ -156,13 +154,13 @@
       activeStates() {
         const states = self.states();
 
-        return states && states.filter((s) => getType(s).name === "LabelsModel" && s.isSelected);
+        return states?.filter((s) => getType(s).name === "LabelsModel" && s.isSelected);
       },
 
       get activeState() {
         const states = self.states();
 
-        return states && states.filter((s) => getType(s).name === "LabelsModel" && s.isSelected)[0];
+        return states?.filter((s) => getType(s).name === "LabelsModel" && s.isSelected)[0];
       },
 
       get activeLabel() {
@@ -176,6 +174,9 @@
         // use label to generate a unique key to ensure that adding/deleting can trigger changes
         return labels ? labels.join(",") : "";
       },
+      get readonly() {
+        return self.annotation.isReadOnly();
+      },
     }))
     ////// Sync actions
     .actions((self) => ({
@@ -219,9 +220,9 @@
       ////// Incoming
 
       registerSyncHandlers() {
-        ["play", "pause", "seek"].forEach((event) => {
+        for (const event of ["play", "pause", "seek"]) {
           self.syncHandlers.set(event, self.handleSync);
-        });
+        }
         self.syncHandlers.set("speed", self.handleSyncSpeed);
       },
 
@@ -288,13 +289,13 @@
               const selectedColor = activeState?.selectedColor;
               const labels = activeState?.selectedValues();
 
-              selectedRegions.forEach((r) => {
+              for (const r of selectedRegions) {
                 r.update({ color: selectedColor, labels: labels ?? [] });
 
                 const region = r.isRegion ? self.updateRegion(r) : self.addRegion(r);
 
                 self.annotation.selectArea(region);
-              });
+              }
 
               if (selectedRegions.length) {
                 self.requestWSUpdate();
@@ -341,7 +342,7 @@
             (target) => target.type === "paragraphs" && target.contextscroll,
           );
 
-          syncedParagraphs.forEach((paragraph) => {
+          for (const paragraph of syncedParagraphs) {
             const segments = Object.values(paragraph.regionsStartEnd).map(({ start, end }) => ({
               start,
               end,
@@ -351,7 +352,7 @@
             }));
 
             self._ws.addRegions(segments);
-          });
+          }
         },
 
         handleNewRegions() {
@@ -381,7 +382,7 @@
         },
 
         onHotKey(e) {
-          e && e.preventDefault();
+          e?.preventDefault();
           self._ws.togglePlay();
           return false;
         },
@@ -394,34 +395,6 @@
           self.playBackRate = val;
         },
 
-        createRegion(wsRegion, states) {
-          let bgColor = self.selectedregionbg;
-          const st = states.find((s) => s.type === "labels");
-
-          if (st) bgColor = Utils.Colors.convertToRGBA(st.getSelectedColor(), 0.3);
-
-          const r = AudioRegionModel.create({
-            id: wsRegion.id ? wsRegion.id : guidGenerator(),
-            pid: wsRegion.pid ? wsRegion.pid : guidGenerator(),
-            parentID: wsRegion.parent_id === null ? "" : wsRegion.parent_id,
-            start: wsRegion.start,
-            end: wsRegion.end,
-            score: wsRegion.score,
-            readonly: wsRegion.readonly,
-            regionbg: self.regionbg,
-            selectedregionbg: bgColor,
-            normalization: wsRegion.normalization,
-            states,
-          });
-
-          r.setWSRegion(wsRegion);
-
-          self.regions.push(r);
-          self.annotation.addRegion(r);
-
-          return r;
-        },
-
         addRegion(wsRegion) {
           // area id is assigned to WS region during deserealization
           const find_r = self.annotation.areas.get(wsRegion.id);
@@ -485,9 +458,9 @@
         },
 
         clearRegionMappings() {
-          self.regs.forEach((r) => {
+          for (const r of self.regs) {
             r.setWSRegion(null);
-          });
+          }
         },
 
         onLoad(ws) {

@@ -71,8 +71,6 @@ const AudioView: FC<AudioProps> = ({ item, children, settings = {}, changeSettin
     onError: item.onError,
     regions: {
       createable: !item.readonly,
-      updateable: !item.readonly,
-      deleteable: !item.readonly,
     },
     timeline: {
       backgroundColor: isDarkMode ? "rgb(38, 37, 34)" : "rgba(255,255,255,0.8)",

@@ -303,6 +303,10 @@
     if (!states || states.length === 0 || ev.ctrlKey || ev.metaKey)
       return this._selectRegions(ev.ctrlKey || ev.metaKey);
 
+    if (item.annotation.isReadOnly()) {
+      return;
+    }
+
     const selectedRanges = this.captureDocumentSelection();
 
     if (selectedRanges.length === 0) {

@@ -199,7 +199,7 @@
     } = this.props;
 
     const activeStates = parent?.activeStates();
-    const statesSelected = activeStates && activeStates.length;
+    const statesSelected = activeStates?.length;
     const readonly = parent?.annotation?.isReadOnly();
 
     // skip if event fired by .move() - prevent recursion and bugs
@@ -210,10 +210,13 @@
       const x = d3.mouse(d3.event.sourceEvent.target)[0];
       const newRegion = this.newRegion;
 
+      // double click handler to create instant region
       // when 2nd click happens during 300ms after 1st click and in the same place
       if (newRegion && Math.abs(newRegion.x - x) < 4) {
         clearTimeout(this.newRegionTimer);
-        parent?.regionChanged(newRegion.range, ranges.length, newRegion.states);
+        if (!readonly) {
+          parent?.regionChanged(newRegion.range, ranges.length, newRegion.states);
+        }
         this.newRegion = null;
         this.newRegionTimer = null;
       } else if (statesSelected) {
@@ -364,7 +367,7 @@
     const block = this.gCreator;
     const getRegion = this.getRegion;
     const x = this.x;
-    const brush = (this.brushCreator = d3
+    const brush = d3
       .brushX()
       .extent([
         [0, 0],
@@ -381,7 +384,9 @@
       // replacing default filter to allow ctrl-click action
       .filter(() => {
         return !d3.event.button;
-      }));
+      });
+
+    this.brushCreator = brush;
 
     this.gCreator.call(this.brushCreator);
   }

@@ -531,6 +531,7 @@ const HtxVideoView = ({ item, store }) => {
             disableView={!supportsTimelineRegions && !supportsRegions}
             framerate={item.framerate}
             controls={{ FramesControl: true }}
+            readonly={item.annotation?.isReadOnly()}
             customControls={[
               {
                 position: "left",

@@ -140,7 +140,7 @@ const Model = types
       // normalize framerate — should be string with number of frames per second
       const framerate = Number(parseValue(self.framerate, self.store.task?.dataObj));
 
-      if (!framerate || isNaN(framerate)) self.framerate = "24";
+      if (!framerate || Number.isNaN(framerate)) self.framerate = "24";
       else if (framerate < 1) self.framerate = String(1 / framerate);
       else self.framerate = String(framerate);
     },
@@ -178,9 +178,9 @@ const Model = types
     ////// Incoming
 
     registerSyncHandlers() {
-      ["play", "pause", "seek"].forEach((event) => {
+      for (const event of ["play", "pause", "seek"]) {
         self.syncHandlers.set(event, self.handleSync);
-      });
+      }
       self.syncHandlers.set("speed", self.handleSyncSpeed);
     },
 
@@ -260,9 +260,9 @@ const Model = types
         const area = self.annotation.createResult({ sequence }, {}, control, self);
 
         // add labels
-        self.activeStates().forEach((tag) => {
+        for (const tag of self.activeStates()) {
           area.setValue(tag);
-        });
+        }
 
         return area;
       },
@@ -304,6 +304,9 @@ const Model = types
        * @returns {Object} created region
        */
       startDrawing({ frame, region: id }) {
+        // don't create or edit regions in read-only mode
+        if (self.annotation.isReadOnly()) return null;
+
         if (id) {
           const region = self.annotation.regions.find((r) => r.cleanId === id);
           const range = region?.ranges?.[0];