3
\$\begingroup\$

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:

enter image description here

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 + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

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) => {

    const parte = getParameterByName('parte') || 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) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.