Merge branch 'master' into joss-paper-branch

Update the paper branch to include all the changes implented during the paper review process.

.circleci/config.yml

@@ -2,14 +2,10 @@ version : 2.1
 jobs:
   build:
     docker:
-      - image: circleci/node:16-browsers
+      - image: mcr.microsoft.com/playwright:v1.41.2-jammy
     steps:
       - checkout
       - run: npm install
-      - run:
-          name: Run server in background
-          command: 'npm start'
-          background: true
       - run:
           name: Run tests
           command: 'npm test'

Contributing.md

@@ -14,14 +14,19 @@ improving the documentation, creating tutorials. We are also open
 to hearing your ideas for improvement
 and extension of Thresholdmann.
 
-You can check out if there is an open [issues](https://github.com/neuroanatomy/thresholdmann/issues) you'd like to jump on, and get in touch with us there.  
+You can check out if there is an open [issue](https://github.com/neuroanatomy/thresholdmann/issues) you'd like to jump on, and get in touch with us there.  
 You can also open a new issue to let us know about bugs, or request a new feature.
 
 We will be happy to work with anyone who would love to join our effort.  
 
+**Test new functionalities**  
+
+If you would like to change the code, please make sure the existing tests run using ```npm install && npm run test```.  
+If you add a new functionality, please also implement new test(s) to make sure of its correct working. Thank you. 
+
 **Get in touch with us!**
 
-You can also write us on twitter to [katjaq](https://twitter.com/katjaQheuer) and [R3RT0](https://twitter.com/r3rt0)!
+You can also write us on twitter (X) to [katjaq](https://twitter.com/katjaQheuer) and [R3RT0](https://twitter.com/r3rt0)!
 
 **We are looking forward to meeting you!**
 

doc.html

@@ -153,9 +153,18 @@ <h2 id="workflow" style="padding-top:20px;padding-bottom:0px;">Workflow example<
         </p>
         <img style="max-width:700px;padding-top:30px;padding-bottom:3px;padding-left:25px;padding-right:25px;" src="https://raw.githubusercontent.com/neuroanatomy/thresholdmann/master/img/thresholdmann_fig4_dark.png" alt=""/>
         <p style="padding-left:26px;padding-right:26px;font-size:12px;text-indent: 0rem;">
-          <b>Usage example: Final mask.</b> Download the mask created based on your set of control points. Make sure that the brain region is sufficiently disjoint from the rest of the head so that a mathematical morphology closing will be enough to completely separate it. This will give you a mask like shown in this image with its reconstructed surface as an example.<br /><br /><br />
+          <b>Usage example: Final mask.</b> Download the mask created based on your set of control points. Make sure that the brain region is sufficiently disjoint from the rest of the head so that a mathematical morphology closing will be enough to completely separate it. This will give you a mask like shown in this image with its reconstructed surface as an example.<br />
         </p>
 
+        <h2 id="performance" style="padding-top:20px;padding-bottom:20px;">Notes on performance</h2>
+        <p>
+          <b>Data file size.</b> Thresholdmann can load, display and segment very large MRI files. We tested as an extreme case with the 250µm 1.64GB ultra-high resolution human brain <i>in vivo</i> dataset from <a href="https://doi.org/10.5061/dryad.38s74" style="color:white;" target="_blank">Lüsebrink et al. (2018)</a>. Loading took about 30 seconds until the data was displayed. The interface was perfectly fluid when browsing the slices, adding as many control points as to have a long scrolling list of points, and switching between view planes. Saving the control points was instantaneous, and saving the mask took a bit over a minute. If the browser asks to exit or wait, simply select wait and you should have no problem to save the mask. In general, we recommend to save control points before attempting to save the mask. 🤓 The 3D render took a bit more than half a minute and then was fluidly interactive and zoomable as usual. However, if the data is very large and at the same time noisy, so that the segmentation will have many flying dots, this will result in lots of triangles, and a 3D render on the fly will not be possible.<br /><br /><br />  
+        </p>
+        <!-- <p>
+          <b>Interpolation: The ε value in the code.</b> ε adds a distance of 0.001 times voxel size to prevent a division by 0 at the exact position of control points. While it does change the exact space at which a control point faints out, in practice, the amount of voxels in an MRI even if it were smaller or bigger, is usually about 300 and the behaviour of the tool doesn't perceivably change. We tested with high resolution data of small brains (for example a mouse: dim: 420 x 548 x 282, pixdim: 0.03 x 0.03 x 0.03) and also with a big dolphin brain (dim: 461 x 424 x 304, pixdim: 0.30 x 0.30 x 0.30). If you'd like to change the behaviour of the control points, you could play with this value which is set in <a href="https://github.com/neuroanatomy/thresholdmann/blob/25090ab07c7e51b4122f1ffb0997e8720d6b1daf/thresholdmann-worker.js#L29" style="color:white;" target="_blank">thresholdmann-worker.js</a> and <a href="https://github.com/neuroanatomy/thresholdmann/blob/25090ab07c7e51b4122f1ffb0997e8720d6b1daf/thresholdmann.js#L42" style="color:white;" target="_blank">thresholdmann.js</a>.
+          <br /><br /><br />
+        </p> -->
+
       </div>
 
     </div>

fixtures.mjs

@@ -0,0 +1,22 @@
+import { createServer } from 'http-server';
+
+let server;
+
+const startServer = () => {
+  server = createServer({
+    root: '.'
+  });
+  server.listen('8080', '127.0.0.1');
+
+  return server;
+};
+
+export const mochaGlobalSetup = () => {
+  server = startServer({port: '8080'});
+  console.log('server started at 8080');
+};
+
+export const mochaGlobalTeardown = async () => {
+  await server.close();
+  console.log('server stopped');
+};

index.html

@@ -37,7 +37,8 @@
           <path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"></path>
         </svg>
         <br />
-        <strong id="loadNifti" class="mui mui-push mui-no-border" style="font-weight:500;font-size:16px">Choose</strong> a .nii.gz or a .nii file or drag it here.
+        <strong id="loadNifti" class="mui mui-push mui-no-border" style="font-weight:500;font-size:16px">Choose</strong> a .nii.gz or a .nii file or drag it here. <br/><br/>
+        Or try with this <strong id="loadDemoData" class="mui mui-push mui-no-border" style="font-weight:500;font-size:16px">MRI from a Sloth bear</strong>.
       </div>
       <div class="box_uploading">Uploading&hellip;</div>
       <div class="box_error">Error! <span></span>.</div>
@@ -153,8 +154,8 @@
 
             <div id="image-adjust">
               <img class="adjustsicon" src="./img/alpha.svg" width="16px"/><input type="range" min="0" max="100" value="50" style="width: 180px" oninput="changeAlpha(event)"><br />
-              <img class="adjustsicon" src="./img/adjust.svg" width="16px"/><input type="range" min="0" max="200" value="100" style="width: 180px" oninput="changeBrightness(event)"><br />
-              <img class="adjustsicon" src="./img/sun-o.svg" width="16px"/><input type="range" min="0" max="200" value="100" style="width: 180px" oninput="changeContrast(event)"><br />
+              <img class="adjustsicon" src="./img/adjust.svg" width="16px"/><input type="range" min="0" max="200" value="100" style="width: 180px" oninput="changeContrast(event)"><br />
+              <img class="adjustsicon" src="./img/sun-o.svg" width="16px"/><input type="range" min="0" max="200" value="100" style="width: 180px" oninput="changeBrightness(event)"><br />
             </div>
             <br />
 
@@ -193,7 +194,7 @@
 
     <!-- footer -->
     <div id="footer">
-      Made with &nbsp; 🤍 &nbsp; Katja Heuer & Roberto Toro
+      Made with &nbsp; 🤍 &nbsp; Katja Heuer, Nicolas Traut & Roberto Toro
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
@@ -238,6 +239,7 @@
       });
 
       MUI.push(document.querySelector('#loadNifti'), loadNifti);
+      MUI.push(document.querySelector('#loadDemoData'), loadDemoData);
   </script>
 
   </body>