Merge pull request #12 from gaiborjosue/reload-vanilla

feat: Added new functionalities to slicedrop reloaded

reload/css/styles.css

@@ -1,25 +1,27 @@
 :root {
-  --tp-base-background-color: hsla(0, 0%, 10%, 0.00);
-  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.00);
-  --tp-button-background-color: hsla(0, 0%, 80%, 1.00);
-  --tp-button-background-color-active: hsla(0, 0%, 100%, 1.00);
-  --tp-button-background-color-focus: hsla(0, 0%, 95%, 1.00);
-  --tp-button-background-color-hover: hsla(0, 0%, 85%, 1.00);
-  --tp-button-foreground-color: hsla(0, 0%, 0%, 0.80);
-  --tp-container-background-color: hsla(0, 0%, 0%, 0.22);
-  --tp-container-background-color-active: hsla(0, 0%, 0%, 0.28);
-  --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.50);
-  --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.40);
-  --tp-container-foreground-color: hsla(0, 0%, 100%, 1.00);
-  --tp-groove-foreground-color: hsla(0, 0%, 100%, 0.00);
-  --tp-input-background-color: hsla(0, 0%, 0%, 0.30);
-  --tp-input-background-color-active: hsla(0, 0%, 0%, 0.60);
-  --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.50);
-  --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.40);
-  --tp-input-foreground-color: hsla(0, 0%, 100%, 0.50);
-  --tp-label-foreground-color: hsla(0, 0%, 100%, 0.95);
-  --tp-monitor-background-color: hsla(0, 0%, 0%, 0.30);
-  --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.30);
+  --tp-base-background-color: hsla(0, 0%, 10%, 0.5);
+  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
+  --tp-button-background-color: hsla(0, 0%, 80%, 1);
+  --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
+  --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);
+  --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);
+  --tp-button-foreground-color: hsla(0, 0%, 0%, 0.8);
+  --tp-container-background-color: hsla(0, 0%, 0%, 0.3);
+  --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);
+  --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);
+  --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);
+  --tp-container-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);
+  --tp-input-background-color: hsla(0, 0%, 0%, 0.3);
+  --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);
+  --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);
+  --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);
+  --tp-input-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-label-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
+  --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
+
+
     /** Max height of dropdown panel. */
     --tp-plugin-thumbnail-list-height: 400px;
 
@@ -472,9 +474,6 @@ body {
   width: 26px !important; /* Force width reset when not hovering */
 }
 
-.drawer.active:hover {
-  background-color: #333;
-}
 
 .drawer.active:hover .drawer-content {
   opacity: 1;

reload/js/dropHandler.js

@@ -57,7 +57,7 @@ export class DropZoneHandler {
     const loadPromises = dataFiles.map(file => this.viewer.loadFile(file));
     await Promise.all(loadPromises);
 
-    // Then apply any JSON configurations after data is loaded
+
     for (const jsonFile of jsonFiles) {
       try {
         const content = await this.readJSONFile(jsonFile);
@@ -82,7 +82,6 @@ export class DropZoneHandler {
     const loadPromises = dataFiles.map(file => this.viewer.loadFile(file));
     await Promise.all(loadPromises);
 
-    // Then apply any JSON configurations after data is loaded
     for (const jsonFile of jsonFiles) {
       try {
         const content = await this.readJSONFile(jsonFile);

reload/js/fiberPane.js

@@ -14,17 +14,18 @@ export class FiberPane {
       radius: 0.0,
       length: 3,
       dither: 0.1,
-      colorationMode: "Global direction",
+      colorationMode: "",
+      colorMap: "",
+      shader: "",
       reductionLevel: "100%",
     };
 
     // Define available options
     this.colorationOptions = {
-      "Global direction": "globalDirection",
-      "Local direction": "localDirection",
-      Fixed: "fixed",
-      "First Per Vertex Type": "firstPerVertex",
-      "First Per Streamline Type": "firstPerStreamline",
+      "Global direction": "Global",
+      "Local direction": "Local",
+      "Fixed": "Fixed",
+      "First Per Vertex Type (if available)": "DPV0",
     };
 
     this.reductionOptions = {
@@ -34,6 +35,14 @@ export class FiberPane {
       "10%": 10,
     };
 
+    this.colorMapOptions = {
+      actc: "actc",
+      inferno: "inferno",
+      plasma: "plasma",
+      warm: "warm",
+      winter: "winter",
+    };
+
     this.setupControls();
   }
 
@@ -132,6 +141,7 @@ export class FiberPane {
       expanded: true,
     });
 
+    console.log(this.viewer);
     // Coloration Mode
     visualFolder
       .addBinding(this.state, "colorationMode", {
@@ -151,6 +161,24 @@ export class FiberPane {
         updateUtilities();
       });
 
+      visualFolder
+      .addBinding(this.state, "colorMap", {
+        options: this.colorMapOptions,
+        label: "Color Map",
+      })
+      .on("change", (ev) => {
+        const compatibleFiber = getFirstCompatibleFiber(this.viewer);
+        if (compatibleFiber) {
+          this.viewer.setMeshProperty(
+            compatibleFiber.mesh.id,
+            "colormap",
+            ev.value
+          );
+        }
+
+        updateUtilities();
+      });
+
     // Reduction Level
     visualFolder
       .addBinding(this.state, "reductionLevel", {
@@ -169,6 +197,27 @@ export class FiberPane {
 
         updateUtilities();
       });
+
+    // Get available shaders from NiiVue
+    const shaderOptions = {};
+
+    this.viewer.meshShaderNames().forEach(shader => {
+      shaderOptions[shader] = shader;
+    });
+
+    // Shader Dropdown
+    visualFolder.addBinding(this.state, 'shader', {
+      options: shaderOptions,
+      label: 'Shader Type'
+    }).on('change', (ev) => {
+      const compatibleFiber = getFirstCompatibleFiber(this.viewer);
+      if (compatibleFiber) {
+        this.viewer.setMeshShader(compatibleFiber.mesh.id, ev.value);
+
+      }
+
+      updateUtilities();
+    });
   }
 
   // Method to show/hide the pane based on fiber availability

reload/js/utilitiesPane.js

@@ -7,7 +7,8 @@ export class UtilitiesPane {
   constructor(viewer) {
     this.viewer = viewer;
     this.state = {
-      json: '' // This will store the JSON representation of all pane states
+      json: '', // This will store the JSON representation of all pane states
+      wave: 0,
     };
 
     this.pane = new Pane({
@@ -75,6 +76,13 @@ export class UtilitiesPane {
       expanded: true,
     });
 
+    this.memoryGraph = performanceFolder.addBinding(this.state, "wave",{
+      readonly: true,
+      view: 'graph',  
+      label: 'Memory (%)',
+      rows: 2,
+    })
+
     this.profiler = performanceFolder.addBlade({
       view: 'profiler',
       label: 'Profiler',
@@ -126,6 +134,11 @@ export class UtilitiesPane {
     let frames = 0;
 
     const measure = () => {
+      const usedHeap = performance.memory.usedJSHeapSize;
+      const totalHeap = performance.memory.jsHeapSizeLimit;
+      const memoryPercentage = (usedHeap / totalHeap) * 100;
+      this.state.wave = memoryPercentage;
+
       // Measure overall frame time
       this.profiler.measure('Frame', () => {
         const now = performance.now();

reload/js/utils.js

@@ -1,4 +1,4 @@
-const acceptedFiberFormats = ['.trk', '.tko', '.trx'];
+const acceptedFiberFormats = ['.trk', '.tko', '.trx', '.tck'];
 const acceptedMeshFormats = [".obj", ".vtk", ".stl", ".mz3", ".smoothwm"];
 
 export function getFirstCompatibleFiber(viewer) {

reload/js/viewer.js

@@ -140,6 +140,8 @@ export class NiiVueViewer {
       show3Dcrosshair: true,
       onImageLoaded: () => {
         this.updateDrawerStates();
+        this.originalImage = this.viewer.volumes[0].img.slice();
+
       },
       onOverlayLoaded: () => {
         this.updateDrawerStates();
@@ -150,6 +152,9 @@ export class NiiVueViewer {
     });
 
     this.viewer.attachTo(this.canvasId);
+    this.viewer.setMultiplanarLayout(Number(0));
+    this.viewer.setHeroImage(7 * 0.1)
+    this.viewer.opts.multiplanarEqualSize = true;
     this.viewer.setSliceType(this.viewer.sliceTypeMultiplanar);
     this.viewer.setClipPlane([-0.12, 180, 40]);