Skip to content

Commit

Permalink
style(dicom-demo): Use spectrum-web-components
Browse files Browse the repository at this point in the history
  • Loading branch information
@thewtex
thewtex committed Sep 12, 2022
1 parent f5650ff commit e3857b1
Show file tree
Hide file tree
Showing 7 changed files with 1,260 additions and 51 deletions.
11 changes: 9 additions & 2 deletions dist/dicom/cypress/e2e/structured_report_to_text.cy.ts
View file
Expand Up @@ -8,7 +8,14 @@ describe('structuredReportToText', () => {
})

it('runs and produces the expected text', function() {
cy.get('input[type=file]').selectFile({ contents: new Uint8Array(this.inputData), fileName: 'inputData.dcm' })
cy.get('textarea').contains('Comprehensive SR Document')
cy.get('input[type=file]').selectFile({ contents: new Uint8Array(this.inputData), fileName: 'inputData.dcm' }, { force: true })
cy.get('sp-textarea').should('include.text', 'Comprehensive SR Document')
})

it('does not contain the document header when option checked', function() {
cy.get('#noDocumentHeader').click()
cy.get('input[type=file]').selectFile({ contents: new Uint8Array(this.inputData), fileName: 'inputData.dcm' }, { force: true })
cy.get('sp-textarea').should('include.text', 'Breast Imaging Report')
cy.get('sp-textarea').should('not.include.text', 'Comprehensive SR Document')
})
})
64 changes: 38 additions & 26 deletions dist/dicom/dist/demo/app.js
View file
@@ -1,5 +1,19 @@
import { structuredReportToText } from '../itk-dicom.js'


// promise-file-reader
function readAsArrayBuffer (file) {
if (!(file instanceof Blob)) {
throw new TypeError('Must be a File or Blob')
}
return new Promise(function(resolve, reject) {
var reader = new FileReader()
reader.onload = function(e) { resolve(e.target.result) }
reader.onerror = function(e) { reject(new Error('Error reading' + file.name + ': ' + e.target.result)) }
reader['readAsArrayBuffer'](file)
})
}

const structuredReportToTextOptions = new Map([
["unknownRelationship", "Accept unknown relationship type"],
["invalidItemValue", "Accept invalid content item value"],
Expand All @@ -20,16 +34,18 @@ const structuredReportToTextOptions = new Map([
["printColor", "Use ANSI escape codes"],
])


function createOptionsElements(context, event) {
context.options = {}
const optionsChildren = []

structuredReportToTextOptions.forEach((description, name) =>{
context.options[name] = false
const entryDiv = document.createElement("div")
entryDiv.innerHTML = `<input name=${name} id=${name} type="checkbox"><label for="${name}">${description}</label>`
entryDiv.addEventListener('click', () => {
context.options[name] = entryDiv.children[0].checked
entryDiv.innerHTML = `<sp-checkbox name=${name} id=${name} ><label for="${name}">${description}</label></sp-checkbox>`
entryDiv.addEventListener('click', (e) => {
context.options[name] = !entryDiv.children[0].checked
context.service.send({ type: 'PROCESS' })
})
optionsChildren.push(entryDiv)
})
Expand All @@ -38,20 +54,6 @@ function createOptionsElements(context, event) {
optionsDiv.replaceChildren(...optionsChildren)
}

// promise-file-reader
function readAsArrayBuffer (file) {
if (!(file instanceof Blob)) {
throw new TypeError('Must be a File or Blob')
}
return new Promise(function(resolve, reject) {
var reader = new FileReader()
reader.onload = function(e) { resolve(e.target.result) }
reader.onerror = function(e) { reject(new Error('Error reading' + file.name + ': ' + e.target.result)) }
reader['readAsArrayBuffer'](file)
})
}

let appWebWorker = null

async function loadData(context, event) {
const arrayBuffer = await readAsArrayBuffer(event.data)
Expand All @@ -60,25 +62,30 @@ async function loadData(context, event) {
return dicomData
}


let appWebWorker = null
async function processData(context, event) {
if (!context.dicomData) {
return
}
console.log(context.options)
const { webWorker, outputText } = await structuredReportToText(appWebWorker, context.dicomData, context.options)
const outputTextArea = document.getElementById('outputTextArea')
outputTextArea.innerText = "Processing..."
const { webWorker, outputText } = await structuredReportToText(appWebWorker, context.dicomData.slice(), context.options)
appWebWorker = webWorker
return outputText
}


function renderResults(context) {
const outputTextArea = document.querySelector('textarea')
const outputTextArea = document.getElementById('outputTextArea')
if (context.processResult) {
outputTextArea.textContent = context.processResult
outputTextArea.innerText = context.processResult
}
}


const context = {
options: new Map(),
options: {},
dicomData: null,
processResult: null,
}
Expand Down Expand Up @@ -152,16 +159,21 @@ const demoAppMachine = XState.createMachine({
})

const demoAppService = XState.interpret(demoAppMachine)
.onTransition((state) => {
console.log(state)
})
context.service = demoAppService
demoAppService.start()

const fileInput = document.querySelector('input')

const fileInput = document.getElementById('inputFile')
fileInput.addEventListener('change', (event) => {
const dataTransfer = event.dataTransfer
const files = event.target.files || dataTransfer.files

demoAppService.send({ type: 'UPLOAD_DATA', data: files[0] })
})

const dropzoneInput = document.getElementById('fileDropzone')
dropzoneInput.addEventListener('drop', (event) => {
const files = event.dataTransfer.files

demoAppService.send({ type: 'UPLOAD_DATA', data: files[0] })
})
77 changes: 56 additions & 21 deletions dist/dicom/index.html
View file
Expand Up @@ -8,39 +8,74 @@
height: 90%;
}

textarea {
resize: none;
overflow-y: scroll;
position: relative;
box-sizing: border-box;
width: 650px;
height: 500px;
}

section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>
<script src="./dist/demo/xstate.js"></script>
<script src="./dist/demo/spectrum.umd.js"></script>
<!-- <script type="module" async src="./dist/demo/spectrum.js"></script> -->
</head>

<body>
<section>
<div style="flex: 150px;">
<label>Select dicom file:</label>
<input name="inputFile" type="file" />
</div>
<sp-theme
scale="medium"
color="dark"
style="
background: var(--spectrum-global-color-gray-75);
color: var(--spectrum-global-color-gray-800);
padding: var(--spectrum-global-dimension-size-400);
display: block;
margin:
calc(-1 * var(--spectrum-global-dimension-size-400))
calc(-1 * var(--spectrum-global-dimension-size-500))
0;
">
<section>
<div style="flex: 210px;">
<sp-dropzone id="fileDropzone" style="width: 200px; height: 200px">
<sp-illustrated-message heading="Drag and Drop Your File">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 150 103"
width="150"
height="103"
>
<path
d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z"
></path>
</svg>
</sp-illustrated-message>

<div>
<label for="inputFile">
<sp-link
href="javascript:;"
onclick="this.parentElement.nextElementSibling.click()"
>
Select a dicom file
</sp-link>
from your computer
</label>
<input type="file" id="inputFile" name="inputFile" style="display: none" />
</div>
</sp-dropzone>
</div>

<div id="options" style="flex: 20rem;">
</div>
<div style="flex: 180px; padding: 20px;">
<sp-field-group vertical id="options">
</sp-field-group>
</div>

<div style="flex: 700px;">
<textarea readonly name="outputTextArea">Output representation...</textarea>
<div name="outputDiv"></div>
</div>
</section>
<div style="flex: 700px;">
<sp-field-label for="outputTextArea">Output representation</sp-field-label>
<sp-textarea readonly multiline grows id="outputTextArea" name="outputTextArea" placeholder="..."></sp-textarea>
<div name="outputDiv"></div>
</div>
</section>
</sp-theme>

<script type="module" src="./dist/itk-dicom.js"></script>
<script type="module" src="./dist/demo/app.js"></script>
Expand Down
13 changes: 12 additions & 1 deletion dist/dicom/package.json
View file
Expand Up @@ -15,8 +15,9 @@
},
"scripts": {
"dev": "vite --port 8173",
"build": "npm run build:browser && npm run build:node",
"build": "npm run build:spectrum && npm run build:browser && npm run build:node",
"build:node": "rollup -c ./rollup.node.config.js",
"build:spectrum": "rollup -c ./rollup.spectrum.config.js",
"build:browser": "tsc && vite build --sourcemap",
"build:browser:watch": "tsc && vite build --minify false --mode development --watch",
"cypress:open": "npx cypress open",
Expand Down Expand Up @@ -51,10 +52,20 @@
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^14.0.1",
"@rollup/plugin-typescript": "^8.5.0",
"@spectrum-web-components/checkbox": "^0.14.0",
"@spectrum-web-components/dropzone": "^0.10.0",
"@spectrum-web-components/field-group": "^0.7.0",
"@spectrum-web-components/field-label": "^0.8.0",
"@spectrum-web-components/illustrated-message": "^0.9.1",
"@spectrum-web-components/link": "^0.13.0",
"@spectrum-web-components/textfield": "^0.13.1",
"@spectrum-web-components/theme": "^0.14.1",
"ava": "^4.3.3",
"cypress": "^10.7.0",
"rollup": "^2.79.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-styles": "^4.0.0",
"rollup-plugin-visualizer": "^5.8.1",
"start-server-and-test": "^1.14.0",
"typescript": "^4.7.4",
"vite": "^3.0.9",
Expand Down

0 comments on commit e3857b1

Please sign in to comment.