Update immer

packages/circus-web-ui/package.json

@@ -62,7 +62,7 @@
     "classnames": "^2.3.1",
     "fflate": "^0.6.10",
     "history": "^4.10.1",
-    "immer": "^7.0.5",
+    "immer": "^10.1.1",
     "lodash": "^4.17.15",
     "merge": "^1.2.1",
     "moment": "^2.24.0",

packages/circus-web-ui/src/components/CaseExportModal.tsx

@@ -1,6 +1,6 @@
 import { Editor } from '@smikitky/rb-components/lib/editor-types';
 import ShrinkSelect from '@smikitky/rb-components/lib/ShrinkSelect';
-import produce from 'immer';
+import { produce } from 'immer';
 import { ExternalLabel } from 'pages/case-detail/labelData';
 import { Revision } from 'pages/case-detail/revisionData';
 import RevisionSelector from 'pages/case-detail/RevisionSelector';
@@ -47,16 +47,17 @@ const createCaseExportOptionsEditor: (
   };
 
   const RevSelector = useMemo<Editor<number>>(
-    () => ({ value, onChange }) => {
-      if (!revisions) return null;
-      return (
-        <RevisionSelector
-          selected={value}
-          onSelect={onChange}
-          revisions={revisions}
-        />
-      );
-    },
+    () =>
+      ({ value, onChange }) => {
+        if (!revisions) return null;
+        return (
+          <RevisionSelector
+            selected={value}
+            onSelect={onChange}
+            revisions={revisions}
+          />
+        );
+      },
     []
   );
 

packages/circus-web-ui/src/components/GridContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
-import produce from 'immer';
+import { produce } from 'immer';
 
 export const defaultDragDataMimeType = 'text/grid-container-drop';
 
@@ -300,10 +300,8 @@ const GridContainer = <T extends { key: string }>(
     className
   } = props;
 
-  const [
-    dropDestination,
-    setDropDestination
-  ] = useState<DropDestination | null>(null);
+  const [dropDestination, setDropDestination] =
+    useState<DropDestination | null>(null);
   const [fromKey, setFromKey] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 

packages/circus-web-ui/src/components/SeriesSelector.tsx

@@ -8,7 +8,7 @@ import DataGrid, { DataGridColumnDefinition } from 'components/DataGrid';
 import IconButton from 'components/IconButton';
 import { Panel } from 'components/react-bootstrap';
 import SearchResultsView from 'components/SearchResultsView';
-import produce from 'immer';
+import { produce } from 'immer';
 import { multirange } from 'multi-integer-range';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';

packages/circus-web-ui/src/pages/case-detail/CaseDetail.tsx

@@ -18,7 +18,7 @@ import {
   MenuItem,
   Modal
 } from 'components/react-bootstrap';
-import produce from 'immer';
+import { produce } from 'immer';
 import React, {
   useCallback,
   useEffect,

packages/circus-web-ui/src/pages/case-detail/RevisionEditor.tsx

@@ -17,7 +17,7 @@ import Collapser from 'components/Collapser';
 import Icon from 'components/Icon';
 import { createStateChanger } from 'components/ImageViewer';
 import StyledJsonSchemaEditor from 'components/StyledJsonSchemaEditor';
-import produce from 'immer';
+import { produce } from 'immer';
 import { debounce } from 'lodash';
 import useToolbar from 'pages/case-detail/useToolbar';
 import React, {
@@ -255,8 +255,8 @@ const RevisionEditor: React.FC<{
         newPlaneFigureOption.zDimmedThreshold === 0
           ? 'hide'
           : isFinite(newPlaneFigureOption.zDimmedThreshold)
-          ? 'infinity'
-          : 'show'
+            ? 'infinity'
+            : 'show'
     });
   };
 
@@ -700,12 +700,12 @@ const RevisionEditor: React.FC<{
         viewOptions.windowPropagationScope === 'viewer'
           ? editingData.activeLayoutKey
           : viewOptions.windowPropagationScope === 'series'
-          ? editingData.layoutItems
-              .filter(
-                item => item.seriesIndex === editingData.activeSeriesIndex
-              )
-              .map(item => item.key)
-          : editingData.layoutItems.map(item => item.key);
+            ? editingData.layoutItems
+                .filter(
+                  item => item.seriesIndex === editingData.activeSeriesIndex
+                )
+                .map(item => item.key)
+            : editingData.layoutItems.map(item => item.key);
       if (!targetKeys) return;
       stateChanger((state, viewer, id) => {
         if (targetKeys.indexOf(id as string) < 0) return state;

packages/circus-web-ui/src/pages/case-detail/SeriesSelectorDialog.tsx

@@ -1,6 +1,6 @@
 import { Button, Modal } from 'components/react-bootstrap';
 import SeriesSelector, { SeriesEntry } from 'components/SeriesSelector';
-import produce from 'immer';
+import { produce } from 'immer';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useApi } from 'utils/api';
@@ -28,12 +28,15 @@ const SeriesSelectorDialog: React.FC<{
 
   const handleResolve = async () => {
     // Fill label arrays
-    const labelAdded: SeriesEntryWithLabels[] = produce(entries, entries => {
-      entries.forEach(entry => {
-        if (!('labels' in entry)) (entry as any).labels = [];
-      });
-      return entries as SeriesEntryWithLabels[];
-    });
+    const labelAdded: SeriesEntryWithLabels[] = produce(
+      entries as SeriesEntryWithLabels[],
+      entries => {
+        entries.forEach(entry => {
+          if (!('labels' in entry)) (entry as any).labels = [];
+        });
+        return entries as SeriesEntryWithLabels[];
+      }
+    );
     // fill empty PVDs
     const pvdFilled = (await fillPartialVolumeDescriptors(
       labelAdded,

packages/circus-web-ui/src/pages/case-detail/createCurrentLabelsUpdator.ts

@@ -1,6 +1,6 @@
 import { EditingData, EditingDataUpdater } from './revisionData';
 import { InternalLabel } from './labelData';
-import produce from 'immer';
+import { produce } from 'immer';
 // Small wrapper around updateEditingData
 const createCurrentLabelsUpdator = (
   editingData: EditingData,

packages/circus-web-ui/src/pages/case-detail/labelData.ts

@@ -7,7 +7,7 @@ import {
 } from '@utrad-ical/circus-rs/src/browser/section-util';
 import focusBy from '@utrad-ical/circus-rs/src/browser/tool/state/focusBy';
 import { gzipSync } from 'fflate';
-import produce from 'immer';
+import { produce, createDraft, finishDraft } from 'immer';
 import { ApiCaller } from 'utils/api';
 import { sha1 } from 'utils/util';
 
@@ -306,12 +306,11 @@ export const internalLabelToExternal = async (
     }
   };
 
-  return produce(label, async label => {
-    if (label.type === 'voxel') label.data = await saveVoxels();
-    delete (label as any).temporaryKey;
-    delete (label as any).hidden;
-    return label as ExternalLabel;
-  });
+  const draft = createDraft(label);
+  if (draft.type === 'voxel') draft.data = await saveVoxels();
+  delete (draft as any).temporaryKey;
+  delete (draft as any).hidden;
+  return finishDraft(draft) as ExternalLabel;
 };
 
 const rgbaColor = (rgb: string, alpha: number): string =>

packages/circus-web-ui/src/pages/case-detail/revisionData.ts

@@ -1,6 +1,6 @@
 import { PartialVolumeDescriptor } from '@utrad-ical/circus-lib';
 import { LayoutInfo } from 'components/GridContainer';
-import produce from 'immer';
+import { createDraft, finishDraft } from 'immer';
 import { ApiCaller } from 'utils/api';
 import asyncMap from '../../utils/asyncMap';
 import {
@@ -96,14 +96,14 @@ export const externalRevisionToInternal = async (
   revision: Revision<ExternalLabel>,
   api: ApiCaller
 ): Promise<Revision<InternalLabel>> => {
-  return await produce(revision, async revision => {
-    for (const series of revision.series) {
-      (series as any).labels = await asyncMap(series.labels, label =>
-        externalLabelToInternal(label, api)
-      );
-    }
-    return revision as Revision<InternalLabel>;
-  });
+  const draft = createDraft(revision);
+  for (const series of draft.series) {
+    (series as any).labels = await asyncMap(series.labels, label =>
+      externalLabelToInternal(label, api)
+    );
+  }
+
+  return finishDraft(draft) as Revision<InternalLabel>;
 };
 
 const internalSeriesToExternal = async (
@@ -113,10 +113,10 @@ const internalSeriesToExternal = async (
   const newLabels = await asyncMap(series.labels, async label =>
     internalLabelToExternal(label, api)
   );
-  return produce(series, series => {
-    (series as any).labels = newLabels;
-    return series as SeriesEntryWithLabels<ExternalLabel>;
-  });
+
+  const draft = createDraft(series);
+  draft.labels = newLabels as any;
+  return finishDraft(draft) as SeriesEntryWithLabels<ExternalLabel>;
 };
 
 /**

packages/circus-web-ui/src/pages/plugin-job-detail/MainDisplay.tsx

@@ -8,7 +8,7 @@ import {
 } from '@utrad-ical/circus-ui-kit';
 import Section from './Section';
 import LoadingIndicator from '@smikitky/rb-components/lib/LoadingIndicator';
-import produce from 'immer';
+import { produce } from 'immer';
 
 const MainDisplay: Display<FeedbackTarget[], any> = props => {
   const {

packages/circus-web-ui/src/utils/partialVolumeDescriptor.ts

@@ -1,6 +1,6 @@
 import { PartialVolumeDescriptor } from '@utrad-ical/circus-lib';
 import { SeriesEntry } from 'components/SeriesSelector';
-import produce from 'immer';
+import { createDraft, finishDraft } from 'immer';
 import { multirange } from 'multi-integer-range';
 import Series from 'types/Series';
 import { RootState } from '../store';
@@ -35,17 +35,17 @@ export const fillPartialVolumeDescriptors = async (
   api: ApiCaller,
   state?: RootState
 ): Promise<SeriesEntry[]> => {
-  return await asyncMap(entries, async entry =>
-    produce(entry, async entry => {
-      if (!entry.partialVolumeDescriptor) {
-        entry.partialVolumeDescriptor = await defaultPvdFromSeries(
-          entry.seriesUid,
-          api,
-          state
-        );
-      }
-    })
-  );
+  const draft = createDraft(entries);
+  await asyncMap(draft, async entry => {
+    if (!entry.partialVolumeDescriptor) {
+      entry.partialVolumeDescriptor = await defaultPvdFromSeries(
+        entry.seriesUid,
+        api,
+        state
+      );
+    }
+  });
+  return finishDraft(draft);
 };
 
 export default fillPartialVolumeDescriptors;