npm - larvitar - Versions diffs - 0.18.2 → 1.2.0 - Mend

larvitar 0.18.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/.github/workflows/deploy.yml +3 -12
package/MIGRATION.md +25 -0
package/README.md +28 -27
package/docs/documentation/Mixins.polygonSegmentationMixin%20-%20segmentation%20operations%20for%20polyline.html +171 -0
package/docs/documentation/Tools.Annotation.ContoursTool.html +218 -0
package/docs/documentation/Tools.Annotation.DiameterTool.html +219 -0
package/docs/documentation/Tools.Annotation.SeedsTool.html +214 -0
package/docs/documentation/Tools.Brush.BrushTool.html +218 -0
package/docs/documentation/Tools.Brush.ThresholdsBrushTool.html +218 -0
package/docs/documentation/Tools.PolylineScissorsTool.html +218 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Bold.eot +0 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Bold.woff +0 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Bold.woff2 +0 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Regular.eot +0 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Regular.woff +0 -0
package/docs/documentation/fonts/Montserrat/Montserrat-Regular.woff2 +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.eot +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +978 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.ttf +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff2 +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.eot +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1049 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.ttf +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff +0 -0
package/docs/documentation/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff2 +0 -0
package/docs/documentation/global.html +1303 -0
package/docs/documentation/imageAnonymization.js.html +245 -0
package/docs/documentation/imageColormaps.js.html +283 -0
package/docs/documentation/imageContours.js.html +278 -0
package/docs/documentation/imageIo.js.html +291 -0
package/docs/documentation/imageLayers.js.html +188 -0
package/docs/documentation/imageLoading.js.html +297 -0
package/docs/documentation/imageParsing.js.html +385 -0
package/docs/documentation/imagePresets.js.html +207 -0
package/docs/documentation/imageRendering.js.html +849 -0
package/docs/documentation/imageReslice.js.html +162 -0
package/docs/documentation/imageStore.js.html +360 -0
package/docs/documentation/imageTools.js.html +784 -0
package/docs/documentation/imageUtils.js.html +1609 -0
package/docs/documentation/image_colormaps.js.html +283 -0
package/docs/documentation/image_contours.js.html +279 -0
package/docs/documentation/image_io.js.html +288 -0
package/docs/documentation/image_layers.js.html +188 -0
package/docs/documentation/image_loading.js.html +294 -0
package/docs/documentation/image_parsing.js.html +391 -0
package/docs/documentation/image_presets.js.html +207 -0
package/docs/documentation/image_rendering.js.html +845 -0
package/docs/documentation/image_reslice.js.html +164 -0
package/docs/documentation/image_store.js.html +359 -0
package/docs/documentation/image_tools.js.html +792 -0
package/docs/documentation/image_utils.js.html +1609 -0
package/docs/documentation/index.html +175 -0
package/docs/documentation/loaders_commonLoader.js.html +306 -0
package/docs/documentation/loaders_dicomLoader.js.html +130 -0
package/docs/documentation/loaders_fileLoader.js.html +155 -0
package/docs/documentation/loaders_multiframeLoader.js.html +443 -0
package/docs/documentation/loaders_niftiLoader.js.html +150 -0
package/docs/documentation/loaders_nrrdLoader.js.html +545 -0
package/docs/documentation/loaders_resliceLoader.js.html +258 -0
package/docs/documentation/module-imaging_contours.html +954 -0
package/docs/documentation/module-imaging_imageAnonymization.html +544 -0
package/docs/documentation/module-imaging_imageColormaps.html +1012 -0
package/docs/documentation/module-imaging_imageContours.html +954 -0
package/docs/documentation/module-imaging_imageIo.html +1057 -0
package/docs/documentation/module-imaging_imageLayers.html +904 -0
package/docs/documentation/module-imaging_imageLoading.html +1301 -0
package/docs/documentation/module-imaging_imageParsing.html +1356 -0
package/docs/documentation/module-imaging_imagePresets.html +679 -0
package/docs/documentation/module-imaging_imageRendering.html +3223 -0
package/docs/documentation/module-imaging_imageReslice.html +413 -0
package/docs/documentation/module-imaging_imageStore-Larvitar_Store.html +284 -0
package/docs/documentation/module-imaging_imageStore.html +1560 -0
package/docs/documentation/module-imaging_imageTools.html +3617 -0
package/docs/documentation/module-imaging_imageUtils.html +7253 -0
package/docs/documentation/module-imaging_io.html +1057 -0
package/docs/documentation/module-imaging_layers.html +904 -0
package/docs/documentation/module-imaging_loading.html +1301 -0
package/docs/documentation/module-imaging_parsing.html +1375 -0
package/docs/documentation/module-imaging_presets.html +679 -0
package/docs/documentation/module-imaging_rendering.html +8094 -0
package/docs/documentation/module-imaging_reslice.html +411 -0
package/docs/documentation/module-imaging_store-Larvitar_Store.html +284 -0
package/docs/documentation/module-imaging_store.html +1537 -0
package/docs/documentation/module-imaging_strategies_eraseFreehand.html +708 -0
package/docs/documentation/module-imaging_strategies_fillFreehand.html +708 -0
package/docs/documentation/module-imaging_tools.html +3617 -0
package/docs/documentation/module-imaging_tools_custom_contourTool.html +207 -0
package/docs/documentation/module-imaging_tools_custom_diameterTool.html +205 -0
package/docs/documentation/module-imaging_tools_custom_editMaskTool.html +205 -0
package/docs/documentation/module-imaging_tools_custom_polygonScissorsTool.html +203 -0
package/docs/documentation/module-imaging_tools_custom_thresholdBrushTool.html +684 -0
package/docs/documentation/module-imaging_tools_default.html +205 -0
package/docs/documentation/module-imaging_tools_interaction.html +530 -0
package/docs/documentation/module-imaging_tools_io.html +832 -0
package/docs/documentation/module-imaging_tools_main.html +2028 -0
package/docs/documentation/module-imaging_tools_polygonSegmentationMixin.html +567 -0
package/docs/documentation/module-imaging_tools_segmentation.html +3586 -0
package/docs/documentation/module-imaging_tools_state.html +494 -0
package/docs/documentation/module-imaging_utils.html +7253 -0
package/docs/documentation/module-loaders_commonLoader.html +1313 -0
package/docs/documentation/module-loaders_dicomLoader.html +522 -0
package/docs/documentation/module-loaders_fileLoader.html +593 -0
package/docs/documentation/module-loaders_multiframeLoader.html +1169 -0
package/docs/documentation/module-loaders_niftiLoader.html +565 -0
package/docs/documentation/module-loaders_nrrdLoader.html +1459 -0
package/docs/documentation/module-loaders_resliceLoader.html +590 -0
package/docs/documentation/module-monitors_memory.html +980 -0
package/docs/documentation/module-tools_default.html +740 -0
package/docs/documentation/module.exports_module.exports.html +203 -0
package/docs/documentation/monitors_memory.js.html +189 -0
package/docs/documentation/parsers_nrrd.js.html +569 -0
package/docs/documentation/scripts/collapse.js +20 -0
package/docs/documentation/scripts/linenumber.js +25 -0
package/docs/documentation/scripts/nav.js +12 -0
package/docs/documentation/scripts/polyfill.js +4 -0
package/docs/documentation/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/documentation/scripts/prettify/lang-css.js +2 -0
package/docs/documentation/scripts/prettify/prettify.js +28 -0
package/docs/documentation/scripts/search.js +83 -0
package/docs/documentation/styles/jsdoc.css +765 -0
package/docs/documentation/styles/prettify.css +80 -0
package/docs/documentation/tools_contourTool.js.html +1963 -0
package/docs/documentation/tools_custom_contourTool.js.html +1968 -0
package/docs/documentation/tools_custom_diameterTool.js.html +225 -0
package/docs/documentation/tools_custom_editMaskTool.js.html +225 -0
package/docs/documentation/tools_custom_polylineScissorsTool.js.html +143 -0
package/docs/documentation/tools_custom_thresholdsBrushTool.js.html +245 -0
package/docs/documentation/tools_default.js.html +576 -0
package/docs/documentation/tools_diameterTool.js.html +219 -0
package/docs/documentation/tools_editMaskTool.js.html +219 -0
package/docs/documentation/tools_interaction.js.html +258 -0
package/docs/documentation/tools_io.js.html +297 -0
package/docs/documentation/tools_main.js.html +443 -0
package/docs/documentation/tools_polygonSegmentationMixin.js.html +329 -0
package/docs/documentation/tools_polylineScissorsTool.js.html +136 -0
package/docs/documentation/tools_seedTool.js.html +423 -0
package/docs/documentation/tools_segmentation.js.html +558 -0
package/docs/documentation/tools_state.js.html +163 -0
package/docs/documentation/tools_strategies_eraseFreehand.js.html +160 -0
package/docs/documentation/tools_strategies_fillFreehand.js.html +163 -0
package/docs/documentation/tools_thresholdsBrushTool.js.html +239 -0
package/docs/documentation/tools_tools.default.js.html +569 -0
package/docs/documentation/tools_tools.interaction.js.html +251 -0
package/docs/documentation/tools_tools.io.js.html +288 -0
package/docs/documentation/tools_tools.main.js.html +442 -0
package/docs/documentation/tools_tools.segmentation.js.html +445 -0
package/docs/documentation/tools_tools.state.js.html +157 -0
package/docs/examples/base.html +170 -0
package/docs/examples/colorMaps.html +181 -0
package/docs/examples/defaultTools.html +246 -0
package/docs/examples/demo/anon1 +0 -0
package/docs/examples/demo/anon10 +0 -0
package/docs/examples/demo/anon11 +0 -0
package/docs/examples/demo/anon12 +0 -0
package/docs/examples/demo/anon13 +0 -0
package/docs/examples/demo/anon14 +0 -0
package/docs/examples/demo/anon15 +0 -0
package/docs/examples/demo/anon16 +0 -0
package/docs/examples/demo/anon17 +0 -0
package/docs/examples/demo/anon18 +0 -0
package/docs/examples/demo/anon19 +0 -0
package/docs/examples/demo/anon2 +0 -0
package/docs/examples/demo/anon20 +0 -0
package/docs/examples/demo/anon21 +0 -0
package/docs/examples/demo/anon22 +0 -0
package/docs/examples/demo/anon23 +0 -0
package/docs/examples/demo/anon24 +0 -0
package/docs/examples/demo/anon3 +0 -0
package/docs/examples/demo/anon4 +0 -0
package/docs/examples/demo/anon5 +0 -0
package/docs/examples/demo/anon6 +0 -0
package/docs/examples/demo/anon7 +0 -0
package/docs/examples/demo/anon8 +0 -0
package/docs/examples/demo/anon9 +0 -0
package/docs/examples/demo/example.nrrd +0 -0
package/docs/examples/demo/segmentation.nrrd +0 -0
package/docs/examples/demo/xa_integris.dcm +0 -0
package/docs/examples/index.html +129 -0
package/docs/examples/larvitar.js +108623 -0
package/docs/examples/layers.html +250 -0
package/docs/examples/masks.html +273 -0
package/docs/examples/multiframe.html +200 -0
package/docs/examples/nrrd.html +96 -0
package/docs/examples/reslice.html +174 -0
package/docs/index.html +92 -0
package/imaging/dataDictionary.json +21865 -21865
package/imaging/imageAnonymization.js +161 -0
package/imaging/{image_colormaps.js → imageColormaps.js} +2 -2
package/imaging/{image_contours.js → imageContours.js} +1 -2
package/imaging/{image_io.js → imageIo.js} +18 -15
package/imaging/{image_layers.js → imageLayers.js} +2 -2
package/imaging/{image_loading.js → imageLoading.js} +9 -6
package/imaging/imageParsing.js +301 -0
package/imaging/{image_presets.js → imagePresets.js} +2 -2
package/imaging/{image_rendering.js → imageRendering.js} +36 -32
package/imaging/imageReslice.js +78 -0
package/imaging/{image_store.js → imageStore.js} +8 -7
package/imaging/{image_tools.js → imageTools.js} +15 -23
package/imaging/{image_utils.js → imageUtils.js} +1 -1
package/imaging/loaders/commonLoader.js +1 -1
package/imaging/loaders/dicomLoader.js +1 -1
package/imaging/loaders/fileLoader.js +2 -2
package/imaging/loaders/multiframeLoader.js +6 -2
package/imaging/loaders/nrrdLoader.js +11 -7
package/imaging/tools/{contourTool.js → custom/contourTool.js} +25 -20
package/imaging/tools/{diameterTool.js → custom/diameterTool.js} +9 -3
package/imaging/tools/{editMaskTool.js → custom/editMaskTool.js} +7 -1
package/imaging/tools/{polylineScissorsTool.js → custom/polylineScissorsTool.js} +12 -5
package/imaging/tools/{seedTool.js → custom/seedTool.js} +3 -3
package/imaging/tools/{thresholdsBrushTool.js → custom/thresholdsBrushTool.js} +7 -1
package/imaging/tools/{tools.default.js → default.js} +10 -3
package/imaging/tools/{tools.interaction.js → interaction.js} +13 -6
package/imaging/tools/{tools.io.js → io.js} +15 -6
package/imaging/tools/{tools.main.js → main.js} +16 -14
package/imaging/tools/polygonSegmentationMixin.js +8 -4
package/imaging/tools/{tools.segmentation.js → segmentation.js} +171 -58
package/imaging/tools/segmentations.md +38 -0
package/imaging/tools/setLabelMap3D.js +248 -0
package/imaging/tools/{tools.state.js → state.js} +7 -1
package/imaging/tools/strategies/eraseFreehand.js +8 -9
package/imaging/tools/strategies/fillFreehand.js +8 -9
package/index.js +44 -39
package/modules/vuex/larvitar.js +13 -3
package/package.json +13 -10
package/imaging/image_parsing.js +0 -307
package/imaging/image_reslice.js +0 -80

package/docs/examples/layers.html ADDED Viewed

@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html class="h-100 overflow-hidden">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css"
+    />
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
+    <script>
+      hljs.highlightAll();
+    </script>
+    <title>Larvitar - Layers rendering example</title>
+  </head>
+  <body class="h-100" style="background-color: #000000">
+    <div class="row h-100">
+      <div
+        id="viewer"
+        class="col-8 h-100"
+        style="background-color: black"
+      ></div>
+      <p style="position: absolute; color: white">
+        Press "a" to change the active layer
+      </p>
+      <p style="position: absolute; top: 20px; color: white">
+        Press "o" to change the opacity of the active layer
+      </p>
+      <p
+        id="active-layer"
+        style="position: absolute; top: 40px; color: white"
+      ></p>
+      <p id="opacity" style="position: absolute; top: 60px; color: white"></p>
+      <div class="col-4 h-100">
+        <pre class="h-100">
+          <code class="javascript" style="background-color: #000000">
+          <p style="font-size:0.6vw;">
+            let demoFiles = [];
+            let counter = 0;
+            const getDemoFileNames = function () {
+              let demoFileList = [];
+              for (let i = 1; i < 25; i++) {
+                let filename = "anon" + i;
+                demoFileList.push(filename);
+              }
+              return demoFileList;
+            };
+            // init all
+            larvitar.initLarvitarStore();
+            larvitar.initializeImageLoader();
+            larvitar.initializeCSTools();
+            larvitar.larvitar_store.addViewport("viewer");
+            async function createFile(fileName, cb) {
+              let response = await fetch("./demo/" + fileName);
+              let data = await response.blob();
+              let file = new File([data], fileName);
+              demoFiles.push(file);
+              counter++;
+              if (counter == 24) {
+                cb();
+              }
+            }
+            let layer_1, layer_2;
+            function renderSerie() {
+              larvitar
+                .readFiles(demoFiles)
+                .then(seriesStack => {
+                  let seriesId = _.keys(seriesStack)[0];
+                  let serie_1 = { ...seriesStack[seriesId] };
+                  let serie_2 = { ...seriesStack[seriesId] };
+                  layer_1 = larvitar.buildLayer(serie_1, "main");
+                  layer_2 = larvitar.buildLayer(serie_2, "colored", {
+                    opacity: 0.25,
+                    colormap: "hotIron"
+                  });
+                  // define a layer into the series object to be rendered
+                  serie_1.layer = layer_1;
+                  serie_2.layer = layer_2;
+                  larvitar.renderImage(serie_1, "viewer").then(() => {
+                    console.log("Image 1 has been rendered");
+                  });
+                  larvitar.renderImage(serie_2, "viewer").then(() => {
+                    console.log("Image 2 has been rendered");
+                  });
+                  $("#active-layer").html("Active Layer: main");
+                  $("#opacity").html("Opacity: 1.0");
+                  larvitar.addDefaultTools();
+                })
+                .catch(err => console.log(err));
+            }
+            let demoFileList = getDemoFileNames();
+            _.each(demoFileList, function (demoFile) {
+              createFile(demoFile, renderSerie);
+            });
+            document.onkeypress = function (e) {
+              e = e || window.event;
+              if (e.keyCode == 97) {
+                let activeLayer = larvitar.getActiveLayer("viewer");
+                let newActiveLayer =
+                  activeLayer.layerId == layer_1.id ? layer_2 : layer_1;
+                larvitar.setActiveLayer("viewer", newActiveLayer.id);
+                $("#active-layer").html(
+                  "Active Layer: " + newActiveLayer.options.name
+                );
+                $("#opacity").html("Opacity: " + newActiveLayer.options.opacity);
+              }
+              if (e.keyCode == 111) {
+                let activeLayer = larvitar.getActiveLayer("viewer");
+                let opacity =
+                  activeLayer.options.opacity == 1.0
+                    ? 0.0
+                    : activeLayer.options.opacity + 0.25;
+                larvitar.updateLayer("viewer", activeLayer.layerId, {
+                  opacity: opacity
+                });
+                $("#opacity").html("Opacity: " + opacity);
+              }
+            };
+          </p>
+          </code>
+        </pre>
+      </div>
+    </div>
+    <script src="./larvitar.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+    <script
+      src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
+      integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
+      crossorigin="anonymous"
+    ></script>
+    <script>
+      let demoFiles = [];
+      let counter = 0;
+      const getDemoFileNames = function () {
+        let demoFileList = [];
+        for (let i = 1; i < 25; i++) {
+          let filename = "anon" + i;
+          demoFileList.push(filename);
+        }
+        return demoFileList;
+      };
+      // init all
+      larvitar.initLarvitarStore();
+      larvitar.initializeImageLoader();
+      larvitar.initializeCSTools();
+      larvitar.larvitar_store.addViewport("viewer");
+      async function createFile(fileName, cb) {
+        let response = await fetch("./demo/" + fileName);
+        let data = await response.blob();
+        let file = new File([data], fileName);
+        demoFiles.push(file);
+        counter++;
+        if (counter == 24) {
+          cb();
+        }
+      }
+      let layer_1, layer_2;
+      function renderSerie() {
+        larvitar
+          .readFiles(demoFiles)
+          .then(seriesStack => {
+            let seriesId = _.keys(seriesStack)[0];
+            let serie_1 = { ...seriesStack[seriesId] };
+            let serie_2 = { ...seriesStack[seriesId] };
+            layer_1 = larvitar.buildLayer(serie_1, "main");
+            layer_2 = larvitar.buildLayer(serie_2, "colored", {
+              opacity: 0.25,
+              colormap: "hotIron"
+            });
+            // define a layer into the series object to be rendered
+            serie_1.layer = layer_1;
+            serie_2.layer = layer_2;
+            larvitar.renderImage(serie_1, "viewer").then(() => {
+              console.log("Image 1 has been rendered");
+            });
+            larvitar.renderImage(serie_2, "viewer").then(() => {
+              console.log("Image 2 has been rendered");
+            });
+            $("#active-layer").html("Active Layer: main");
+            $("#opacity").html("Opacity: 1.0");
+            larvitar.addDefaultTools();
+          })
+          .catch(err => console.log(err));
+      }
+      let demoFileList = getDemoFileNames();
+      _.each(demoFileList, function (demoFile) {
+        createFile(demoFile, renderSerie);
+      });
+      document.onkeypress = function (e) {
+        e = e || window.event;
+        if (e.keyCode == 97) {
+          let activeLayer = larvitar.getActiveLayer("viewer");
+          let newActiveLayer =
+            activeLayer.layerId == layer_1.id ? layer_2 : layer_1;
+          larvitar.setActiveLayer("viewer", newActiveLayer.id);
+          $("#active-layer").html(
+            "Active Layer: " + newActiveLayer.options.name
+          );
+          $("#opacity").html("Opacity: " + newActiveLayer.options.opacity);
+        }
+        if (e.keyCode == 111) {
+          let activeLayer = larvitar.getActiveLayer("viewer");
+          let opacity =
+            activeLayer.options.opacity == 1.0
+              ? 0.0
+              : activeLayer.options.opacity + 0.25;
+          larvitar.updateLayer("viewer", activeLayer.layerId, {
+            opacity: opacity
+          });
+          $("#opacity").html("Opacity: " + opacity);
+        }
+      };
+    </script>
+  </body>
+</html>

package/docs/examples/masks.html ADDED Viewed

@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html class="h-100 overflow-hidden">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css"
+    />
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
+    <script>
+      hljs.highlightAll();
+    </script>
+    <title>Larvitar - Masks rendering example</title>
+  </head>
+  <body class="h-100" style="background-color: #000000">
+    <div class="row h-100">
+      <div
+        id="viewer"
+        class="col-8 h-100"
+        style="background-color: black"
+      ></div>
+      <div class="col-4 h-100">
+        <pre class="h-100">
+          <p style="color: #ffffff">
+          Example of loading a segmentation
+          mask on the image.
+          You can modify the mask using Brush tool.
+          (press ctrl to delete instead of adding)
+          </p>
+          <button id="btn-label" class="btn btn-danger m-1" onclick="switchLabel()">Switch label</button>
+          <button class="btn btn-primary m-1" onclick="undo()">Undo</button><button class="btn btn-primary m-1" onclick="redo()">Redo</button>
+          <code class="javascript" style="background-color: #000000">
+          <p style="font-size:0.6vw;">
+            let demoFiles = [];
+            let counter = 0;
+            const getDemoFileNames = function () {
+              let demoFileList = [];
+              for (let i = 1; i < 25; i++) {
+                let filename = "anon" + i;
+                demoFileList.push(filename);
+              }
+              return demoFileList;
+            };
+            // init all
+            larvitar.initLarvitarStore();
+            larvitar.initializeImageLoader();
+            larvitar.initializeCSTools();
+            larvitar.larvitar_store.addViewport("viewer");
+            larvitar.registerNRRDImageLoader();
+            async function createFile(fileName, cb) {
+              let response = await fetch("./demo/" + fileName);
+              let data = await response.blob();
+              let file = new File([data], fileName);
+              demoFiles.push(file);
+              counter++;
+              if (counter == 24) {
+                cb();
+              }
+            }
+            function renderSerie() {
+              larvitar.resetLarvitarManager();
+              larvitar.readFiles(demoFiles, function (seriesStack, err) {
+                if (seriesStack) {
+                  // render the first series of the study
+                  let seriesId = _.keys(seriesStack)[0];
+                  let serie = seriesStack[seriesId];
+                  larvitar.renderImage(serie, "viewer").then(function () {
+                    larvitar.addDefaultTools();
+                    demoFiles = [];
+                    loadMasks();
+                  });
+                } else {
+                  console.log(err);
+                }
+              });
+            }
+            let demoFileList = getDemoFileNames();
+            _.each(demoFileList, function (demoFile) {
+              createFile(demoFile, renderSerie);
+            });
+            /**
+            * Load an image as in base example, then:
+            **/
+            async function loadMasks() {
+              larvitar.initSegmentationModule();
+              // fetch data
+              let response = await fetch("./demo/" + "segmentation.nrrd");
+              let data = await response.blob();
+              let nrrd_file = new File([data], "segmentation.nrrd");
+              // read file
+              let reader = new FileReader();
+              reader.readAsArrayBuffer(nrrd_file);
+              reader.onload = function () {
+                // create volume
+                let volume = larvitar.importNRRDImage(reader.result);
+                // define mask properties
+                let properties = {
+                  // color: "#00ff00",
+                  opacity: 0.2,
+                  labelId: 0
+                };
+                // add to viewport
+                larvitar
+                  .addSegmentationMask(properties, volume.data, "viewer")
+                  .then(() => {
+                    // activate brush on this labelmap
+                    larvitar.setActiveLabelmap(0, "viewer");
+                    larvitar.setToolActive("Brush");
+                  });
+              };
+            }
+            let activeLabel = 1;
+            function switchLabel() {
+              let nextLabel = activeLabel == 1 ? 2 : 1;
+              larvitar.setActiveSegment(nextLabel, "viewer");
+              activeLabel = nextLabel;
+              let btn = document.getElementById("btn-label");
+              let btnClass = btn.className;
+              if (activeLabel == 1) {
+                btn.className = btnClass.replace("warning", "danger");
+              } else {
+                btn.className = btnClass.replace("danger", "warning");
+              }
+            }
+            function undo() {
+              larvitar.undoLastStroke("viewer");
+            }
+            function redo() {
+              larvitar.redoLastStroke("viewer");
+            }
+            /**
+            * Undo: larvitar.undoLastStroke("viewer");
+            * Redo: larvitar.redoLastStroke("viewer");
+            * Switch: larvitar.setActiveSegment(1|2, "viewer");
+            */
+          </p>
+          </code>
+        </pre>
+      </div>
+    </div>
+    <script src="./larvitar.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+    <script>
+      let demoFiles = [];
+      let counter = 0;
+      const getDemoFileNames = function () {
+        let demoFileList = [];
+        for (let i = 1; i < 25; i++) {
+          let filename = "anon" + i;
+          demoFileList.push(filename);
+        }
+        return demoFileList;
+      };
+      // init all
+      larvitar.initLarvitarStore();
+      larvitar.initializeImageLoader();
+      larvitar.initializeCSTools();
+      larvitar.larvitar_store.addViewport("viewer");
+      larvitar.registerNRRDImageLoader();
+      async function createFile(fileName, cb) {
+        let response = await fetch("./demo/" + fileName);
+        let data = await response.blob();
+        let file = new File([data], fileName);
+        demoFiles.push(file);
+        counter++;
+        if (counter == 24) {
+          cb();
+        }
+      }
+      function renderSerie() {
+        larvitar.resetLarvitarManager();
+        larvitar
+          .readFiles(demoFiles)
+          .then(seriesStack => {
+            // render the first series of the study
+            let seriesId = _.keys(seriesStack)[0];
+            let serie = seriesStack[seriesId];
+            larvitar.renderImage(serie, "viewer").then(() => {
+              larvitar.addDefaultTools();
+              demoFiles = [];
+              loadMasks();
+            });
+          })
+          .catch(err => console.log(err));
+      }
+      let demoFileList = getDemoFileNames();
+      _.each(demoFileList, function (demoFile) {
+        createFile(demoFile, renderSerie);
+      });
+      /**
+       * Load an image as in base example, then:
+       **/
+      async function loadMasks() {
+        larvitar.initSegmentationModule();
+        // fetch data
+        let response = await fetch("./demo/" + "segmentation.nrrd");
+        let data = await response.blob();
+        let nrrd_file = new File([data], "segmentation.nrrd");
+        // read file
+        let reader = new FileReader();
+        reader.readAsArrayBuffer(nrrd_file);
+        reader.onload = function () {
+          // create volume
+          let volume = larvitar.importNRRDImage(reader.result);
+          // define mask properties
+          let properties = {
+            // color: "#00ff00",
+            opacity: 0.2,
+            labelId: 0
+          };
+          // add to viewport
+          larvitar
+            .addSegmentationMask(properties, volume.data, "viewer")
+            .then(() => {
+              // activate brush on this labelmap
+              larvitar.setActiveLabelmap(0, "viewer");
+              larvitar.setToolActive("Brush");
+            });
+        };
+      }
+      let activeLabel = 1;
+      function switchLabel() {
+        let nextLabel = activeLabel == 1 ? 2 : 1;
+        larvitar.setActiveSegment(nextLabel, "viewer");
+        activeLabel = nextLabel;
+        let btn = document.getElementById("btn-label");
+        let btnClass = btn.className;
+        if (activeLabel == 1) {
+          btn.className = btnClass.replace("warning", "danger");
+        } else {
+          btn.className = btnClass.replace("danger", "warning");
+        }
+      }
+      function undo() {
+        larvitar.undoLastStroke("viewer");
+      }
+      function redo() {
+        larvitar.redoLastStroke("viewer");
+      }
+    </script>
+  </body>
+</html>