fix(compareUI): slowing performance with image mix animation

Kitware · May 16, 2023 · 5261928 · 5261928
1 parent 461a2dc
commit 5261928
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 192 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "itk-mesh-io": "^1.0.0-b.84",
     "itk-viewer-color-maps": "^1.2.0",
     "itk-viewer-icons": "11.13.1",
-    "itk-viewer-transfer-function-editor": "^1.2.2",
+    "itk-viewer-transfer-function-editor": "^1.2.5",
     "itk-wasm": "^1.0.0-b.83",
     "mobx": "^5.15.7",
     "mousetrap": "^1.6.5",

diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
diff --git a/src/UI/reference-ui/package-lock.json b/src/UI/reference-ui/package-lock.json
diff --git a/src/UI/reference-ui/package.json b/src/UI/reference-ui/package.json
@@ -45,7 +45,7 @@
     "@material/web": "^1.0.0-pre.4",
     "itk-viewer-color-maps": "^1.2.0",
     "itk-viewer-icons": "^11.13.1",
-    "itk-viewer-transfer-function-editor": "^1.2.2",
+    "itk-viewer-transfer-function-editor": "^1.2.5",
     "lit": "^2.4.0",
     "xstate-lit": "^1.3.1"
   }

diff --git a/src/UI/reference-ui/src/ItkVtkViewer.module.css b/src/UI/reference-ui/src/ItkVtkViewer.module.css
@@ -310,6 +310,10 @@
   padding-right: 6px;
 }
 
+.noFlexBasis {
+  flex-basis: auto;
+}
+
 .layerIcon {
   display: inline-block;
 }

diff --git a/src/UI/reference-ui/src/Layers/compareUI.js b/src/UI/reference-ui/src/Layers/compareUI.js
@@ -34,7 +34,7 @@ export const compareUI = context => (send, onReceive) => {
     <div style="display: flex; justify-content: space-between;">
       <label class="${style.inputLabel}">Image Mix</label>
       <input id="${playImageMixButtonId}" type="checkbox" class="${style.toggleInput}">
-        <label itk-vtk-tooltip itk-vtk-tooltip-top-annotations itk-vtk-tooltip-content="animate" class="${style.visibleButton} ${style.toggleButton}" for="${playImageMixButtonId}">
+        <label itk-vtk-tooltip itk-vtk-tooltip-top-annotations itk-vtk-tooltip-content="animate" class="${style.visibleButton} ${style.noFlexBasis} ${style.toggleButton}" for="${playImageMixButtonId}">
           <img src="${playIconDataUri}" id="${playImageMixImgId}" alt="animate" />
         </label>
       </input>