can persist annotation using y-sweet

app/frontend/.eslintrc.json

@@ -1,11 +1,15 @@
 {
-  "extends": [
-    "./node_modules/gts/",
-    "plugin:react/jsx-runtime"
-  ],
+  "extends": ["./node_modules/gts/", "plugin:react/jsx-runtime"],
   "plugins": ["react-hooks"],
   "rules": {
-    "react-hooks/rules-of-hooks": "error", 
+    "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
-  }
-}
+  },
+  "overrides": [
+    {
+      // I don't know why `eslint-disable-next-line` does not work for webpack, so I configure here as a workaround.
+      "files": ["src/state/annotate/annotation-broadcast.ts"],
+      "rules": {"@typescript-eslint/no-explicit-any": "off"}
+    }
+  ]
+}

app/frontend/src/component/panel/entity/Card.tsx

@@ -19,6 +19,7 @@ import type {EntityId} from 'type/annotation';
 import type {ProjectSpec} from 'type/project_spec';
 import {ColorPalette} from './display';
 import {useEntityCategories} from 'common/hook';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 const {Paragraph, Text} = Typography;
 
@@ -73,7 +74,7 @@ export const EntityCard: FC<{
     return Object.keys(g.slices).map(s => parseInt(s));
   }, shallow);
 
-  const deleteEntities = useAnnoStore(s => s.deleteEntities);
+  const deleteEntities = useAnnoBroadcastStore('deleteEntities');
 
   const isSelected = useRenderStore(s => s.select.ids.has(entityId));
   const isHovered = useRenderStore(s => s.mouse.hover?.entityId === entityId);

app/frontend/src/component/panel/entity/Form.tsx

@@ -2,14 +2,14 @@ import {FC} from 'react';
 import intl from 'react-intl-universal';
 import {Form, TreeSelect, TreeSelectProps, Space, Tag} from 'antd';
 
-import {useAnnoStore} from 'state/annotate/annotation';
 import {useStore as useRenderStore} from 'state/annotate/render';
 
 import {CategoryAbbreviation} from 'component/panel/entity/display';
 
 import type {EntityId} from 'type/annotation';
 import type {ProjectSpec, Entry} from 'type/project_spec';
 import {useEntityCategories} from 'common/hook';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 export function makeTreeNode(
   entry: Entry,
@@ -30,8 +30,8 @@ export function makeTreeNode(
 export const EntityForm: FC<{entityId: EntityId; projectSpec: ProjectSpec}> = ({entityId, projectSpec}) => {
   const sidx = useRenderStore(s => s.sliceIndex);
   const categories = useEntityCategories(entityId, sidx);
-  const setEntityCategory = useAnnoStore(s => s.setEntityCategory);
-  const clearEntityCategory = useAnnoStore(s => s.clearEntityCategory);
+  const setEntityCategory = useAnnoBroadcastStore('setEntityCategory');
+  const clearEntityCategory = useAnnoBroadcastStore('clearEntityCategory');
 
   return (
     <Form layout="vertical" style={{width: 200}}>

app/frontend/src/component/panel/layer/Hover.tsx

@@ -27,6 +27,7 @@ import {newComponentAdapter} from 'common/adapter';
 import {ComponentProximity} from 'state/annotate/render/mouse';
 import {ColorPalette} from '../entity/display';
 import {editStyle} from 'common/constant';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 const FullSize: CSSProperties = {position: 'absolute', left: 0, top: 0, width: '100%', height: '100%'};
 
@@ -172,8 +173,8 @@ const TopLevelHover: FC<HTMLAttributes<HTMLDivElement>> = ({...divProps}) => {
       [manipulation]
     )
   );
-  const transferComponent = useAnnoStore(s => s.transferComponent);
-  const addComponents = useAnnoStore(s => s.addComponents);
+  const transferComponent = useAnnoBroadcastStore('transferComponent');
+  const addComponents = useAnnoBroadcastStore('addComponents');
 
   const {isControlOrMetaPressed, isShiftPressed} = useControlMetaShiftPressed();
 

app/frontend/src/component/panel/layer/Idle.tsx

@@ -7,7 +7,6 @@ import {message} from 'antd';
 import {useTemporalAnnoStore} from 'state/annotate/annotation';
 import {EntityComponentId, useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useUIStore} from 'state/annotate/ui';
-import {useAnnoStore} from 'state/annotate/annotation';
 import {useStore as useEditPolyStore} from 'state/annotate/polychain/edit';
 import {useStore as useEditRectStore} from 'state/annotate/rectangle/edit';
 
@@ -22,6 +21,7 @@ import {editStyle, idleStyle} from 'common/constant';
 import {convertRGBA2Hex, isLightBackground} from 'common/color';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {coordinatesImageToCanvas} from 'common/geometry';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 export const IdleLayer: FC<HTMLAttributes<HTMLDivElement>> = ({...divProps}) => {
   console.debug('render IdleLayer');
@@ -88,7 +88,7 @@ const PasteLoaded: FC<{copying: {ecids: EntityComponentId[]; sliceIndex: SliceIn
   copying: {ecids, sliceIndex},
 }) => {
   const sidx = useRenderStore(s => s.sliceIndex);
-  const paste = useAnnoStore(s => s.paste);
+  const paste = useAnnoBroadcastStore('paste');
 
   useHotkeys(
     'ctrl+v, meta+v',

app/frontend/src/component/panel/layer/Translate.tsx

@@ -12,6 +12,7 @@ import {newComponentAdapter} from 'common/adapter';
 import {createComponentSVG} from 'common/svg';
 import {editStyle} from 'common/constant';
 import {ColorPalette} from '../entity/display';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   data: TranslateData;
@@ -30,7 +31,7 @@ export const TranslateLayer: FC<Props> = ({data, ...divProps}) => {
 
   const clearSelect = useRenderStore(s => s.select.clear);
   const finish = useRenderStore(s => s.translate.finish);
-  const translate = useAnnoStore(s => s.translate);
+  const translate = useAnnoBroadcastStore('translate');
 
   const ecs = useAnnoStore(
     useCallback(

app/frontend/src/component/panel/layer/mask/common.ts

@@ -4,13 +4,14 @@ import shallow from 'zustand/shallow';
 import {coordinatesImageToCanvas} from 'common/geometry';
 import {ViewportTransform} from 'state/annotate/render/viewport';
 import {useStore as useRenderStore} from 'state/annotate/render';
-import {UpdateSliceMasksInput, useAnnoStore} from 'state/annotate/annotation';
+import {UpdateSliceMasksInput} from 'state/annotate/annotation';
 import {ComponentId, EntityId, MaskComponent} from 'type/annotation';
 import {editStyle} from 'common/constant';
 import {ColorPalette} from 'component/panel/entity/display';
 import {newComponentAdapter} from 'common/adapter';
 import {encodeRLE} from 'common/algorithm/rle';
 import {useVisibleEntities} from 'common/render';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 // WARN(hxu): consider re-drawing only the updated part when running into performance issue.
 export function updateImageRendering(
@@ -100,7 +101,7 @@ export function useImageContext(init?: (ctx: CanvasRenderingContext2D) => void)
 
 export function useUpdateMask(imageContext: CanvasRenderingContext2D, prevMasks: EntityComponentMask[]) {
   const sliceIndex = useRenderStore(s => s.sliceIndex);
-  const updateSliceMasks = useAnnoStore(s => s.updateSliceMasks);
+  const updateSliceMasks = useAnnoBroadcastStore('updateSliceMasks');
 
   return useCallback(() => {
     const currMasks: EntityComponentMask[] = collectLocalMasks(imageContext).map(m => {

app/frontend/src/component/panel/layer/polychain/Draw.tsx

@@ -22,6 +22,7 @@ import type {ComponentId, Coordinates, EntityId, Vertex} from 'type/annotation';
 import {ColorPalette} from 'component/panel/entity/display';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {useKeyPressed} from 'common/keyboard';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   width: number;
@@ -87,7 +88,7 @@ const LayerWithEntityId: FC<Props & {entityId: EntityId}> = ({entityId, width, h
     )
   );
 
-  const addComponent = useAnnoStore(s => s.addComponent);
+  const addComponent = useAnnoBroadcastStore('addComponent');
 
   const drawPolychain = useDrawPolychain(transform);
   const drawAnnoVertex = useDrawVertex(transform);

app/frontend/src/component/panel/layer/polychain/Edit.tsx

@@ -13,6 +13,7 @@ import {useDrawPolychain, useDrawDashedLine, useDrawVertex} from 'common/render'
 import type {Data as EditData} from 'state/annotate/polychain/edit';
 import {ColorPalette} from 'component/panel/entity/display';
 import {editStyle} from 'common/constant';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 const Canvas: FC<CanvasHTMLAttributes<HTMLCanvasElement> & {data: EditData}> = ({data, ...canvasProps}) => {
   const {width: imw, height: imh} = useRenderStore(s => s.sliceSize!, shallow);
@@ -67,7 +68,7 @@ const Canvas: FC<CanvasHTMLAttributes<HTMLCanvasElement> & {data: EditData}> = (
     )
   );
 
-  const updateVertices = useAnnoStore(s => s.updatePolychainVertices);
+  const updateVertices = useAnnoBroadcastStore('updatePolychainVertices');
   const finishEdit = useEditStore(s => s.finish);
   const finish = useCallback(() => {
     updateVertices({sliceIndex, entityId: eid, componentId: cid, vertices});

app/frontend/src/component/panel/layer/rectangle/Draw.tsx

@@ -7,14 +7,14 @@ import {editStyle} from 'common/constant';
 import {useDrawRect} from 'common/render';
 import {coordinatesCanvasToImage, limitCoordinates} from 'common/geometry';
 
-import {useAnnoStore} from 'state/annotate/annotation';
 import {useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useDrawStore} from 'state/annotate/rectangle/draw';
 import {ColorPalette} from 'component/panel/entity/display';
 import {EntityId} from 'type/annotation';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {Button, Space, Tag, Tooltip} from 'antd';
 import {ClearOutlined} from '@ant-design/icons';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   width: number;
@@ -50,7 +50,7 @@ const LayerWithEntityId: FC<Props & {entityId: EntityId}> = ({entityId, width, h
     )
   );
 
-  const addComponent = useAnnoStore(s => s.addComponent);
+  const addComponent = useAnnoBroadcastStore('addComponent');
   useHotkeys(
     'esc',
     useCallback(() => finish(), [finish])

app/frontend/src/component/panel/layer/rectangle/Edit.tsx

@@ -6,10 +6,10 @@ import {useDrawRect} from 'common/render';
 import {editStyle} from 'common/constant';
 import {coordinatesCanvasToImage, limitCoordinates} from 'common/geometry';
 
-import {useAnnoStore} from 'state/annotate/annotation';
 import {useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useEditStore, Data} from 'state/annotate/rectangle/edit';
 import {ColorPalette} from 'component/panel/entity/display';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 const Canvas: FC<{data: Data} & CanvasHTMLAttributes<HTMLCanvasElement>> = ({data, ...canvasProps}) => {
   const {width: imw, height: imh} = useRenderStore(s => s.sliceSize!, shallow);
@@ -36,7 +36,7 @@ const Canvas: FC<{data: Data} & CanvasHTMLAttributes<HTMLCanvasElement>> = ({dat
   );
 
   const sliceIndex = useRenderStore(s => s.sliceIndex);
-  const updateAnchors = useAnnoStore(s => s.updateRectangleAnchors);
+  const updateAnchors = useAnnoBroadcastStore('updateRectangleAnchors');
   const finishEdit = useEditStore(s => s.finish);
   const finish = useCallback(() => {
     const {p, q} = anchors;

app/frontend/src/component/panel/menu/common.ts

@@ -7,6 +7,7 @@ import {getSlice, useAnnoStore} from 'state/annotate/annotation';
 import {useStore as useRenderStore} from 'state/annotate/render';
 
 import type {EntityId, ComponentId} from 'type/annotation';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 export type Action = {
   title: string;
@@ -22,8 +23,8 @@ export type Action = {
 export function useComponentActions(entityId: EntityId, componentId: ComponentId): Action[] {
   const sliceIndex = useRenderStore(s => s.sliceIndex);
 
-  const separateComponent = useAnnoStore(s => s.separateComponent);
-  const deleteComponents = useAnnoStore(s => s.deleteComponents);
+  const separateComponent = useAnnoBroadcastStore('separateComponent');
+  const deleteComponents = useAnnoBroadcastStore('deleteComponents');
   const startManipulation = useRenderStore(s => s.manipulate.start);
 
   const nc = useAnnoStore(
@@ -71,9 +72,9 @@ export function useEntityActions(): Action[] {
   const selectIds = useRenderStore(s => s.select.ids);
   const sliceIndex = useRenderStore(s => s.sliceIndex);
 
-  const deleteComponents = useAnnoStore(s => s.deleteComponents);
-  const deleteEntities = useAnnoStore(s => s.deleteEntities);
-  const truncateEntities = useAnnoStore(s => s.truncateEntities);
+  const deleteComponents = useAnnoBroadcastStore('deleteComponents');
+  const deleteEntities = useAnnoBroadcastStore('deleteEntities');
+  const truncateEntities = useAnnoBroadcastStore('truncateEntities');
 
   // copy
   const copy = useRenderStore(s => s.copy);
@@ -90,7 +91,7 @@ export function useEntityActions(): Action[] {
   }, [entities, sliceIndex, selectIds]);
 
   // paste
-  const paste = useAnnoStore(s => s.paste);
+  const paste = useAnnoBroadcastStore('paste');
   const actions: Action[] = [
     {
       title: intl.get('paste'),

app/frontend/src/component/panel/menu/mask.ts

@@ -3,13 +3,13 @@ import {v4 as uuidv4} from 'uuid';
 import {Component, EntityId, MaskComponent, SliceIndex} from 'type/annotation';
 import {useStore as useUIStore} from 'state/annotate/ui';
 import {useStore as useRenderStore} from 'state/annotate/render';
-import {useAnnoStore} from 'state/annotate/annotation';
 import {Action} from './common';
 import {useCallback, useContext} from 'react';
 import {ConfigContext} from 'common/context';
 import {expand, rleCountsFromStringCOCO, rleCountsToStringCOCO, shrink} from 'common/algorithm/rle';
 import {Mask, TrackReq} from 'openapi/nutsh';
 import {correctSliceUrl} from 'common/route';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
   const config = useContext(ConfigContext);
@@ -22,7 +22,7 @@ export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
   const currentSliceIndex = useRenderStore(s => s.sliceIndex);
   const currentSliceUrl = useRenderStore(s => correctSliceUrl(s.sliceUrls[s.sliceIndex]));
   const subsequentSliceUrls = useRenderStore(s => s.sliceUrls.slice(s.sliceIndex + 1).map(correctSliceUrl));
-  const addComponents = useAnnoStore(s => s.addComponents);
+  const addComponents = useAnnoBroadcastStore('addComponents');
 
   const track = useCallback(
     (mask: MaskComponent) => {

app/frontend/src/component/panel/menu/polychain.ts

@@ -1,14 +1,14 @@
 import intl from 'react-intl-universal';
 import shallow from 'zustand/shallow';
 import {useStore as useRenderStore} from 'state/annotate/render';
-import {useAnnoStore} from 'state/annotate/annotation';
 import {PolychainComponent} from 'type/annotation';
 
 import {Action} from './common';
+import {useAnnoBroadcastStore} from 'state/annotate/annotation-broadcast';
 
 export function useActions(component: PolychainComponent): Action[] {
-  const setPolychainVertexBezier = useAnnoStore(s => s.setPolychainVertexBezier);
-  const deletePolychainVertex = useAnnoStore(s => s.deletePolychainVertex);
+  const setPolychainVertexBezier = useAnnoBroadcastStore('setPolychainVertexBezier');
+  const deletePolychainVertex = useAnnoBroadcastStore('deletePolychainVertex');
 
   const sidx = useRenderStore(s => s.sliceIndex);
   const hover = useRenderStore(s => s.mouse.hover, shallow);

app/frontend/src/state/annotate/annotation-broadcast.ts

@@ -39,7 +39,7 @@ export function useAnnoBroadcastStore<K extends keyof StateManipulation>(key: K)
   const fn1 = useAnnoStore(s => s[key]);
   const fn2 = useAnnoBroadcast()[key];
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- the input is indeed known byt ts fails to infer
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const fn: StateManipulation[K] = (input: any) => {
     fn1(input);
     fn2(input);
@@ -93,7 +93,7 @@ function useAnnoBroadcast(): StateManipulation {
             comps.delete(cid);
             anchors.delete(cid);
             anchors.set(newComponentId, as);
-            comps.set(newComponentId, {...comp, entityId: newEntityId});
+            comps.set(newComponentId, {...comp, eid: newEntityId});
           });
           break;
         }
@@ -107,7 +107,7 @@ function useAnnoBroadcast(): StateManipulation {
             comps.delete(cid);
             verts.delete(cid);
             verts.set(newComponentId, vs.clone());
-            comps.set(newComponentId, {...comp, entityId: newEntityId});
+            comps.set(newComponentId, {...comp, eid: newEntityId});
           });
           break;
         }
@@ -121,7 +121,7 @@ function useAnnoBroadcast(): StateManipulation {
             comps.delete(cid);
             masks.delete(cid);
             masks.set(newComponentId, mask);
-            comps.set(newComponentId, {...comp, entityId: newEntityId});
+            comps.set(newComponentId, {...comp, eid: newEntityId});
           });
           break;
         }