trjhtr

I am creating a program to show NRRDs which are a format of medical images. In addition it loads a gallery of thumbnails, where each thumbnail has a link to change the selected NRRD. Plus there is a list on the bottom left with a list of the different bones inside the current NRRD.

Here is an explanation using the UI itself:

I will explain the code:

The Gallery component loads all the head, which is a JSON with the structure:

[
 
 "original": "atlas/caballo/cabeza/original/cabeza01.nrrd",
 "segmentado": "atlas/caballo/cabeza/cabezasegmentado01.nrrd",
 "miniatura": "atlas/caballo/cabeza/original/cabeza01.png",
 "etiquetas": "atlas/caballo/cabeza/etiquetas/cabeza01-es-latin1.txt"
 ,
 
 "original": "atlas/caballo/cabeza/original/cabeza02.nrrd",
 "segmentado": "atlas/caballo/cabeza/cabezasegmentado02.nrrd",
 "miniatura": "atlas/caballo/cabeza/original/cabeza02.png",
 "etiquetas": "atlas/caballo/cabeza/etiquetas/cabeza02-es-latin1.txt"
 ,
...

Where original means the NRRD on the left, in black and white. Segmentado is the NRRD on the right with the plain black and white areas. Miniatura is the thumbnail. Etiquetas is a file where the first line contains the head's part's names, and in the second line its colors as:

"" "Body of mandible" "Maxilla bone" "Nasal bone"

"0 0 0" "255 255 255" "0 50 215" "255 242 0"

The Gallery code:

import React, Component from 'react';
import head from '../atlas/json/cabeza.json';


export default class Gallery extends Component 
 render() 
 return (
 head.map((headPart, index) => 
 return <div key=index>
 <a href=`?parte=$index`>
 <img
 className='miniature'
 src=headPart.miniatura
 />
 </a>
 </div>
 )
 );
 ;
;

My concerns is that it loads a JSON, and also it is giving an 'a' to an img.

The SegmentsList is the component on the bottom left which lists all the parts (segments), the different bones, inside the current NRRD.

It gets the current nrrd being selected by the user as the URL parameter 'parte', and loads the specified head's part. Then it is also responsible to split the etiquetas.txt in lines and in words.

import React, Component from 'react';
import Link from "react-router-dom/es/Link";
import Button from 'reactstrap';
import head from '../atlas/json/cabeza.json';
import SegmentsListItem from "./SegmentsListItem";

const headPart = getParameterByName('parte') || 0;


export default class SegmentsList extends Component 
 constructor(props) 
 super(props);
 

 render() 
 console.log(head[headPart].etiquetas);
 readTextFile(head[headPart].etiquetas);

 function readTextFile(url) 
 const rawFile = new XMLHttpRequest();
 rawFile.open("GET", url, false);
 rawFile.overrideMimeType('text/xml; charset=iso-8859-1');
 rawFile.onreadystatechange = function () 
 if (rawFile.readyState === 4) 
 const text = rawFile.responseText;
 // console.log(rawFile.responseText);
 const lines = splitLines(text);
 // console.log(lines);
 const words = splitWords(lines[0]);
 // console.log(words);
 window.words = words;
 
 return;

 function splitLines(text) 
 return text.split('n');
 

 function splitWords(line) 
 return line.split('" "').slice(1);
 
 ;
 rawFile.send();
 


 return (
 <div>
 <ol>
 window.words.map((word, index) =>
 <SegmentsListItem word=word key=index/>
 )
 </ol>

 <Button
 color='primary'
 className='mt-3 ml-3'
 >
 <Link to='/'/>
 Volver a la portada
 </Button>
 </div>

 );
 


function getParameterByName(name, url) 
 if (!url) url = window.location.href;
 name = name.replace(/[[]]/g, "\$&");
 var regex = new RegExp("[?&]" + name + "(=([^&#]*)

My concern is that it is loading the same JSON as Gallery, and has a synchronous request, and has logic to get parameters in the URL.

Finally we have SceneSubject which has the responsibility to load the NRRD requested by the user in the URL as parte, and then puts it into the scene:

import NRRDLoader from "../../loaders/NRRDLoader";
import cabeza from '../../atlas/json/cabeza.json';

export default (scene, originalNrrd) => 0;

 // console.log(originalNrrd);
 let loader = new NRRDLoader();
 const filename = originalNrrd ? cabeza[parte].original : cabeza[parte].segmentado;
 loader.load(filename, function (volume) 

 //z plane
 let sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));

 scene.add(sliceZ.mesh);
 );

 function getParameterByName(name, url) $)"),
 results = regex.exec(url);
 if (!results) return null;
 if (!results[2]) return '';
 return decodeURIComponent(results[2].replace(/+/g, " "));
 

 function update(time) 

 

 return 
 update
 

My concern here is that it also loads the head JSON.