Skip to content

Commit

Permalink
ENH: App check for input volume
Browse files Browse the repository at this point in the history
  • Loading branch information
thewtex committed Jul 27, 2023
1 parent 811ea48 commit 4638272
Show file tree
Hide file tree
Showing 13 changed files with 152 additions and 20 deletions.
Empty file removed app/converter-controller.ts
Empty file.
14 changes: 7 additions & 7 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="./favicon-64x64.png" />
<link rel="icon" type="image/png" href="./src/favicon-64x64.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./src/style.css" />

<script type="module">
import '@shoelace-style/shoelace/dist/themes/light.css';
Expand Down Expand Up @@ -39,14 +39,14 @@
</head>
<body>

<script src="./utilities.js"></script>
<script src="./src/utilities.js"></script>

<!-- https://tholman.com/github-corners/ -->
<a href="https://github.com/InsightSoftwareConsortium/itk-wasm" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

<div id="app">
<a href="https://github.com/KitwareMedical/ITKIOScanco" target="_blank">
<img src="./logo.png" class="logo vanilla" alt="ITK IO Scanco logo" />
<img src="./src/logo.png" class="logo vanilla" alt="ITK IO Scanco logo" />
</a>

<h2>ITK IO Scanco</h2>
Expand Down Expand Up @@ -82,8 +82,8 @@ <h2>ITK IO Scanco</h2>
</form></div>
<sl-divider></sl-divider>

<div id="compressStringifyOutputs">
<sl-textarea name="output" label="output" help-text="Output compressed binary"><sl-skeleton effect="none"></sl-skeleton></sl-textarea>
<div id="conversionOutputs">
<sl-textarea name="output-file" label="Output file" help-text="Output file information"><sl-skeleton effect="none"></sl-skeleton></sl-textarea>
<sl-button variant="neutral" outline name="output-download" disabled>Download</sl-button>
<br /><br />
</div>
Expand Down Expand Up @@ -120,7 +120,7 @@ <h2>ITK IO Scanco</h2>
</sl-tab-group>
</div>

<script type="module" src="./index.ts"></script>
<script type="module" src="./src/index.ts"></script>

</body>
</html>
10 changes: 0 additions & 10 deletions app/index.ts

This file was deleted.

1 change: 0 additions & 1 deletion app/javascript-logo.svg

This file was deleted.

1 change: 0 additions & 1 deletion app/logo.svg

This file was deleted.

115 changes: 115 additions & 0 deletions app/src/conversion-controller.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import conversionLoadSampleInputs from "./conversion-load-sample-inputs.js"

class ConversionModel {

inputVolume: Uint8Array
outputFormat: string
forceServerSide: boolean

constructor() {
this.outputFormat = "mha"
this.forceServerSide = false
}
}


class ConversionController {

constructor(loadSampleInputs) {
this.loadSampleInputs = loadSampleInputs

this.model = new ConversionModel()
const model = this.model

this.webWorker = null

if (loadSampleInputs) {
const loadSampleInputsButton = document.querySelector("#conversionInputs [name=loadSampleInputs]")
loadSampleInputsButton.setAttribute('style', 'display: block-inline;')
loadSampleInputsButton.addEventListener('click', (event) => {
loadSampleInputs(model)
})
}

// ----------------------------------------------
// Inputs
const inputElement = document.querySelector('#conversionInputs input[name=input-volume-file]')
inputElement.addEventListener('change', (event) => {
const dataTransfer = event.dataTransfer
const files = event.target.files || dataTransfer.files

files[0].arrayBuffer().then((arrayBuffer) => {
model.inputs.set("input", new Uint8Array(arrayBuffer))
const input = document.querySelector("#conversionInputs sl-input[name=input]")
input.value = model.inputs.get("input").toString().substring(0, 50) + ' ...'
})
})

// // ----------------------------------------------
// // Options
// const stringifyElement = document.querySelector('#conversionInputs sl-checkbox[name=stringify]')
// stringifyElement.addEventListener('sl-change', (event) => {
// model.options.set("stringify", stringifyElement.checked)
// })

// const compressionLevelElement = document.querySelector('#conversionInputs sl-input[name=compression-level]')
// compressionLevelElement.addEventListener('sl-change', (event) => {
// model.options.set("compressionLevel", parseInt(compressionLevelElement.value))
// })

// const dataUrlPrefixElement = document.querySelector('#conversionInputs sl-input[name=data-url-prefix]')
// dataUrlPrefixElement.addEventListener('sl-change', (event) => {
// model.options.set("dataUrlPrefix", dataUrlPrefixElement.value)
// })

// ----------------------------------------------
// Outputs
const outputOutputDownload = document.querySelector('#conversionOutputs sl-button[name=output-download]')
outputOutputDownload.addEventListener('click', (event) => {
event.preventDefault()
event.stopPropagation()
if (model.outputs.has("output")) {
globalThis.downloadFile(model.outputs.get("output"), "output.bin")
}
})

const runButton = document.querySelector('#conversionInputs sl-button[name="run"]')
runButton.addEventListener('click', async (event) => {
event.preventDefault()
event.stopPropagation()

if(!model.inputVolume) {
globalThis.notify("Required input volume not provided", "Please provide an AIM or ISQ file", "danger", "exclamation-octagon")
return
}


try {
runButton.loading = true
const t0 = performance.now()

const { webWorker, output } = await conversion.conversion(this.webWorker,
model.inputs.get('input').slice(),
Object.fromEntries(model.options.entries())
)

const t1 = performance.now()
globalThis.notify("conversion successfully completed", `in ${t1 - t0} milliseconds.`, "success", "rocket-fill")
this.webWorker = webWorker

model.outputs.set("output", output)
outputOutputDownload.variant = "success"
outputOutputDownload.disabled = false
const outputOutput = document.querySelector('#conversionOutputs sl-textarea[name=output]')
outputOutput.value = output.toString().substring(0, 200) + ' ...'
} catch (error) {
globalThis.notify("Error while running pipeline", error.toString(), "danger", "exclamation-octagon")
throw error
} finally {
runButton.loading = false
}
})
}
}

const conversionController = new ConversionController(conversionLoadSampleInputs)
23 changes: 23 additions & 0 deletions app/src/conversion-load-sample-inputs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export default function conversionLoadSampleInputs (model) {
const sampleInput = new Uint8Array([222, 173, 190, 239])
context.inputs.set("input", sampleInput)
const inputElement = document.querySelector("#compressStringifyInputs [name=input]")
inputElement.value = sampleInput.toString()

const stringify = true
context.options.set("stringify", stringify)
const stringifyElement = document.querySelector('#compressStringifyInputs sl-checkbox[name=stringify]')
stringifyElement.checked = stringify

const compressionLevel = 5
context.options.set("compressionLevel", compressionLevel)
const compressionLevelElement = document.querySelector('#compressStringifyInputs sl-input[name=compression-level]')
compressionLevelElement.value = compressionLevel

const dataUrlPrefix = 'data:application/iwi+cbor+zstd;base64,'
context.options.set("dataUrlPrefix", dataUrlPrefix)
const dataUrlPrefixElement = document.querySelector('#compressStringifyInputs sl-input[name=data-url-prefix]')
dataUrlPrefixElement.value = dataUrlPrefix

return model
}
File renamed without changes
2 changes: 2 additions & 0 deletions app/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import './conversion-controller.js'
// import './calibration-controller.js'
File renamed without changes
5 changes: 5 additions & 0 deletions app/style.css → app/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,8 @@ li {
background-color: #f9f9f9;
}
}

.sl-toast-stack {
left: 0;
right: auto;
}
File renamed without changes.
1 change: 0 additions & 1 deletion app/typescript-logo.svg

This file was deleted.

0 comments on commit 4638272

Please sign in to comment.