Merge pull request #930 from thewtex/demo-prerun

perf: support demo pre-runs
InsightSoftwareConsortium · Sep 10, 2023 · 09fecfe · 09fecfe
2 parents d3e6fac + 9ad1dfa
commit 09fecfe
Show file tree

Hide file tree

Showing 21 changed files with 457 additions and 152 deletions.
diff --git a/...ages/compare-images/typescript/test/browser/demo-app/compare-images-load-sample-inputs.ts b/...ages/compare-images/typescript/test/browser/demo-app/compare-images-load-sample-inputs.ts
@@ -27,3 +27,5 @@ export default null
 
 //   return model
 // }
+
+export const usePreRun = true
diff --git a/...ages/compress-stringify/typescript/test/browser/demo-app/compress-stringify-controller.ts b/...ages/compress-stringify/typescript/test/browser/demo-app/compress-stringify-controller.ts
@@ -1,7 +1,7 @@
 // Generated file. To retain edits, remove this comment.
 
 import * as compressStringify from '../../../dist/bundles/compress-stringify.js'
-import compressStringifyLoadSampleInputs from "./compress-stringify-load-sample-inputs.js"
+import compressStringifyLoadSampleInputs, { usePreRun } from "./compress-stringify-load-sample-inputs.js"
 
 class CompressStringifyModel {
 
@@ -79,6 +79,23 @@ class CompressStringifyController  {
         }
     })
 
+    const tabGroup = document.querySelector('sl-tab-group')
+    tabGroup.addEventListener('sl-tab-show', async (event) => {
+      if (event.detail.name === 'compressStringify-panel') {
+        const params = new URLSearchParams(window.location.search)
+        if (!params.has('functionName') || params.get('functionName') !== 'compressStringify') {
+          params.set('functionName', 'compressStringify')
+          const url = new URL(document.location)
+          url.search = params
+          window.history.replaceState({ functionName: 'compressStringify' }, '', url)
+        }
+        if (!this.webWorker && loadSampleInputs && usePreRun) {
+          await loadSampleInputs(model, true)
+          await this.run()
+        }
+      }
+    })
+
     const runButton = document.querySelector('#compressStringifyInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {
       event.preventDefault()
@@ -91,16 +108,11 @@ class CompressStringifyController  {
 
       try {
         runButton.loading = true
-        const t0 = performance.now()
-
-        const { webWorker, output, } = await compressStringify.compressStringify(this.webWorker,
-          model.inputs.get('input').slice(),
-          Object.fromEntries(model.options.entries())
-        )
 
+        const t0 = performance.now()
+        const { output, } = await this.run()
         const t1 = performance.now()
         globalThis.notify("compressStringify successfully completed", `in ${t1 - t0} milliseconds.`, "success", "rocket-fill")
-        this.webWorker = webWorker
 
         model.outputs.set("output", output)
         outputOutputDownload.variant = "success"
@@ -116,6 +128,16 @@ class CompressStringifyController  {
       }
     })
   }
+
+  async run() {
+    const { webWorker, output, } = await compressStringify.compressStringify(this.webWorker,
+      this.model.inputs.get('input').slice(),
+      Object.fromEntries(this.model.options.entries())
+    )
+    this.webWorker = webWorker
+
+    return { output, }
+  }
 }
 
 const compressStringifyController = new CompressStringifyController(compressStringifyLoadSampleInputs)
diff --git a/...press-stringify/typescript/test/browser/demo-app/compress-stringify-load-sample-inputs.ts b/...press-stringify/typescript/test/browser/demo-app/compress-stringify-load-sample-inputs.ts
@@ -1,22 +1,34 @@
-export default async function compressStringifyLoadSampleInputs (model) {
+export default async function compressStringifyLoadSampleInputs (model, preRun=false) {
   const sampleInput = new Uint8Array([222, 173, 190, 239])
   model.inputs.set("input", sampleInput)
-  const inputElement = document.getElementById("compressStringify-input-details")
-  inputElement.innerHTML = `<pre>${globalThis.escapeHtml(sampleInput.toString())}</pre>`
-  inputElement.disabled = false
+  if (!preRun) {
+    const inputElement = document.getElementById("compressStringify-input-details")
+    inputElement.innerHTML = `<pre>${globalThis.escapeHtml(sampleInput.toString())}</pre>`
+    inputElement.disabled = false
+  }
 
   const stringify = true
   model.options.set("stringify", stringify)
-  const stringifyElement = document.querySelector('#compressStringifyInputs sl-checkbox[name=stringify]')
-  stringifyElement.checked = stringify
+  if (!preRun) {
+    const stringifyElement = document.querySelector('#compressStringifyInputs sl-checkbox[name=stringify]')
+    stringifyElement.checked = stringify
+  }
 
   const compressionLevel = 5
   model.options.set("compressionLevel", compressionLevel)
-  const compressionLevelElement = document.querySelector('#compressStringifyInputs sl-input[name=compression-level]')
-  compressionLevelElement.value = compressionLevel
+  if (!preRun) {
+    const compressionLevelElement = document.querySelector('#compressStringifyInputs sl-input[name=compression-level]')
+    compressionLevelElement.value = compressionLevel
+  }
 
   const dataUrlPrefix = 'data:application/iwi+cbor+zstd;base64,'
   model.options.set("dataUrlPrefix", dataUrlPrefix)
-  const dataUrlPrefixElement = document.querySelector('#compressStringifyInputs sl-input[name=data-url-prefix]')
-  dataUrlPrefixElement.value = dataUrlPrefix
-}
+  if (!preRun) {
+    const dataUrlPrefixElement = document.querySelector('#compressStringifyInputs sl-input[name=data-url-prefix]')
+    dataUrlPrefixElement.value = dataUrlPrefix
+  }
+
+  return model
+}
+
+export const usePreRun = true
diff --git a/packages/compress-stringify/typescript/test/browser/demo-app/index.ts b/packages/compress-stringify/typescript/test/browser/demo-app/index.ts
@@ -10,3 +10,12 @@ compressStringify.setPipelineWorkerUrl(pipelineWorkerUrl)
 
 import './compress-stringify-controller.js'
 import './parse-string-decompress-controller.js'
+
+const tabGroup = document.querySelector('sl-tab-group')
+const params = new URLSearchParams(window.location.search)
+if (params.has('functionName')) {
+  const functionName = params.get('functionName')
+  tabGroup.show(functionName + '-panel')
+} else {
+  tabGroup.show('compressStringify-panel')
+}
diff --git a/...compress-stringify/typescript/test/browser/demo-app/parse-string-decompress-controller.ts b/...compress-stringify/typescript/test/browser/demo-app/parse-string-decompress-controller.ts
@@ -1,7 +1,7 @@
 // Generated file. To retain edits, remove this comment.
 
 import * as compressStringify from '../../../dist/bundles/compress-stringify.js'
-import parseStringDecompressLoadSampleInputs from "./parse-string-decompress-load-sample-inputs.js"
+import parseStringDecompressLoadSampleInputs, { usePreRun } from "./parse-string-decompress-load-sample-inputs.js"
 
 class ParseStringDecompressModel {
 
@@ -69,6 +69,23 @@ class ParseStringDecompressController  {
         }
     })
 
+    const tabGroup = document.querySelector('sl-tab-group')
+    tabGroup.addEventListener('sl-tab-show', async (event) => {
+      if (event.detail.name === 'parseStringDecompress-panel') {
+        const params = new URLSearchParams(window.location.search)
+        if (!params.has('functionName') || params.get('functionName') !== 'parseStringDecompress') {
+          params.set('functionName', 'parseStringDecompress')
+          const url = new URL(document.location)
+          url.search = params
+          window.history.replaceState({ functionName: 'parseStringDecompress' }, '', url)
+        }
+        if (!this.webWorker && loadSampleInputs && usePreRun) {
+          await loadSampleInputs(model, true)
+          await this.run()
+        }
+      }
+    })
+
     const runButton = document.querySelector('#parseStringDecompressInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {
       event.preventDefault()
@@ -81,16 +98,11 @@ class ParseStringDecompressController  {
 
       try {
         runButton.loading = true
-        const t0 = performance.now()
-
-        const { webWorker, output, } = await compressStringify.parseStringDecompress(this.webWorker,
-          model.inputs.get('input').slice(),
-          Object.fromEntries(model.options.entries())
-        )
 
+        const t0 = performance.now()
+        const { output, } = await this.run()
         const t1 = performance.now()
         globalThis.notify("parseStringDecompress successfully completed", `in ${t1 - t0} milliseconds.`, "success", "rocket-fill")
-        this.webWorker = webWorker
 
         model.outputs.set("output", output)
         outputOutputDownload.variant = "success"
@@ -106,6 +118,16 @@ class ParseStringDecompressController  {
       }
     })
   }
+
+  async run() {
+    const { webWorker, output, } = await compressStringify.parseStringDecompress(this.webWorker,
+      this.model.inputs.get('input').slice(),
+      Object.fromEntries(this.model.options.entries())
+    )
+    this.webWorker = webWorker
+
+    return { output, }
+  }
 }
 
 const parseStringDecompressController = new ParseStringDecompressController(parseStringDecompressLoadSampleInputs)
diff --git a/...-stringify/typescript/test/browser/demo-app/parse-string-decompress-load-sample-inputs.ts b/...-stringify/typescript/test/browser/demo-app/parse-string-decompress-load-sample-inputs.ts
@@ -1,13 +1,19 @@
-export default async function parseStringDecompressLoadSampleInputs (context) {
+export default async function parseStringDecompressLoadSampleInputs (model, preRun=false) {
   // const sampleInput = TextDecoder().decode('data:application/iwi+cbor+zstd;base64,KLUv/SAEIQAA3q2+7w==')
   const sampleInput = new Uint8Array([100,97,116,97,58,97,112,112,108,105,99,97,116,105,111,110,47,105,119,105,43,99,98,111,114,43,122,115,116,100,59,98,97,115,101,54,52,44,75,76,85,118,47,83,65,69,73,81,65,65,51,113,50,43,55,119,61,61])
-  context.inputs.set("input", sampleInput)
-  const inputElement = document.getElementById("parseStringDecompress-input-details")
-  inputElement.innerHTML = `<pre>${globalThis.escapeHtml(sampleInput.toString())}</pre>`
-  inputElement.disabled = false
+  model.inputs.set("input", sampleInput)
+  if (!preRun) {
+    const inputElement = document.getElementById("parseStringDecompress-input-details")
+    inputElement.innerHTML = `<pre>${globalThis.escapeHtml(sampleInput.toString())}</pre>`
+    inputElement.disabled = false
+  }
 
   const parseString = true
-  context.options.set("parseString", parseString)
-  const parseStringElement = document.querySelector('#parseStringDecompressInputs sl-checkbox[name=parse-string]')
-  parseStringElement.checked = parseString
-}
+  model.options.set("parseString", parseString)
+  if (!preRun) {
+    const parseStringElement = document.querySelector('#parseStringDecompressInputs sl-checkbox[name=parse-string]')
+    parseStringElement.checked = parseString
+  }
+}
+
+export const usePreRun = true
diff --git a/...es/dicom/typescript/test/browser/demo-app/apply-presentation-state-to-image-controller.ts b/...es/dicom/typescript/test/browser/demo-app/apply-presentation-state-to-image-controller.ts
@@ -2,7 +2,7 @@
 
 import { writeImageArrayBuffer, copyImage } from 'itk-wasm'
 import * as dicom from '../../../dist/bundles/dicom.js'
-import applyPresentationStateToImageLoadSampleInputs from "./apply-presentation-state-to-image-load-sample-inputs.js"
+import applyPresentationStateToImageLoadSampleInputs, { usePreRun } from "./apply-presentation-state-to-image-load-sample-inputs.js"
 
 class ApplyPresentationStateToImageModel {
 
@@ -118,6 +118,23 @@ class ApplyPresentationStateToImageController  {
         }
     })
 
+    const tabGroup = document.querySelector('sl-tab-group')
+    tabGroup.addEventListener('sl-tab-show', async (event) => {
+      if (event.detail.name === 'applyPresentationStateToImage-panel') {
+        const params = new URLSearchParams(window.location.search)
+        if (!params.has('functionName') || params.get('functionName') !== 'applyPresentationStateToImage') {
+          params.set('functionName', 'applyPresentationStateToImage')
+          const url = new URL(document.location)
+          url.search = params
+          window.history.replaceState({ functionName: 'applyPresentationStateToImage' }, '', url)
+        }
+        if (!this.webWorker && loadSampleInputs && usePreRun) {
+          await loadSampleInputs(model, true)
+          await this.run()
+        }
+      }
+    })
+
     const runButton = document.querySelector('#applyPresentationStateToImageInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {
       event.preventDefault()
@@ -134,17 +151,11 @@ class ApplyPresentationStateToImageController  {
 
       try {
         runButton.loading = true
-        const t0 = performance.now()
-
-        const { webWorker, presentationStateOutStream, outputImage, } = await dicom.applyPresentationStateToImage(this.webWorker,
-          { data: model.inputs.get('imageIn').data.slice(), path: model.inputs.get('imageIn').path },
-          { data: model.inputs.get('presentationStateFile').data.slice(), path: model.inputs.get('presentationStateFile').path },
-          Object.fromEntries(model.options.entries())
-        )
 
+        const t0 = performance.now()
+        const { presentationStateOutStream, outputImage, } = await this.run()
         const t1 = performance.now()
         globalThis.notify("applyPresentationStateToImage successfully completed", `in ${t1 - t0} milliseconds.`, "success", "rocket-fill")
-        this.webWorker = webWorker
 
         model.outputs.set("presentationStateOutStream", presentationStateOutStream)
         presentationStateOutStreamOutputDownload.variant = "success"
@@ -169,6 +180,17 @@ class ApplyPresentationStateToImageController  {
       }
     })
   }
+
+  async run() {
+    const { webWorker, presentationStateOutStream, outputImage, } = await dicom.applyPresentationStateToImage(this.webWorker,
+      { data: this.model.inputs.get('imageIn').data.slice(), path: this.model.inputs.get('imageIn').path },
+      { data: this.model.inputs.get('presentationStateFile').data.slice(), path: this.model.inputs.get('presentationStateFile').path },
+      Object.fromEntries(this.model.options.entries())
+    )
+    this.webWorker = webWorker
+
+    return { presentationStateOutStream, outputImage, }
+  }
 }
 
 const applyPresentationStateToImageController = new ApplyPresentationStateToImageController(applyPresentationStateToImageLoadSampleInputs)
diff --git a/.../typescript/test/browser/demo-app/apply-presentation-state-to-image-load-sample-inputs.ts b/.../typescript/test/browser/demo-app/apply-presentation-state-to-image-load-sample-inputs.ts
@@ -1,23 +1,33 @@
-export default async function applyPresentationStateToImageLoadSampleInputs (model) {
+export default async function applyPresentationStateToImageLoadSampleInputs (model, preRun=false) {
   const imageInButton = document.querySelector('#applyPresentationStateToImageInputs sl-button[name=image-in-file-button]')
-  imageInButton.loading = true
+  if (!preRun) {
+    imageInButton.loading = true
+  }
   const imageInReponse = await fetch('https://bafybeihmnqsufckyjxt2z3yunppqggtq2rle7fta27rbetmf7fgviytghi.ipfs.w3s.link/ipfs/bafybeihmnqsufckyjxt2z3yunppqggtq2rle7fta27rbetmf7fgviytghi/input/gsps-pstate-test-input-image.dcm')
   const imageInData = new Uint8Array(await imageInReponse.arrayBuffer())
   model.inputs.set('imageIn', { data: imageInData, path: 'gsps-pstate-test-input-image.dcm' })
   const imageInElement = document.getElementById('applyPresentationStateToImage-image-in-details')
-  imageInElement.innerHTML = `<pre>${globalThis.escapeHtml(imageInData.subarray(0, 50).toString())}</pre>`
-  imageInElement.disabled = false
-  imageInButton.loading = false
+  if (!preRun) {
+    imageInElement.innerHTML = `<pre>${globalThis.escapeHtml(imageInData.subarray(0, 50).toString())}</pre>`
+    imageInElement.disabled = false
+    imageInButton.loading = false
+  }
 
   const pstateButton = document.querySelector('#applyPresentationStateToImageInputs sl-button[name=presentation-state-file-file-button]')
-  pstateButton.loading = true
+  if (!preRun) {
+    pstateButton.loading = true
+  }
   const pstateReponse = await fetch('https://bafybeihmnqsufckyjxt2z3yunppqggtq2rle7fta27rbetmf7fgviytghi.ipfs.w3s.link/ipfs/bafybeihmnqsufckyjxt2z3yunppqggtq2rle7fta27rbetmf7fgviytghi/input/gsps-pstate-test-input-pstate.dcm')
   const pstateData = new Uint8Array(await pstateReponse.arrayBuffer())
   model.inputs.set('presentationStateFile', { data: pstateData, path: 'gsps-pstate-test-input-pstate.dcm' })
-  const pstateElement = document.getElementById('applyPresentationStateToImage-presentation-state-file-details')
-  pstateElement.innerHTML = `<pre>${globalThis.escapeHtml(pstateData.subarray(0, 50).toString())}</pre>`
-  pstateElement.disabled = false
-  pstateButton.loading = false
+  if (!preRun) {
+    const pstateElement = document.getElementById('applyPresentationStateToImage-presentation-state-file-details')
+    pstateElement.innerHTML = `<pre>${globalThis.escapeHtml(pstateData.subarray(0, 50).toString())}</pre>`
+    pstateElement.disabled = false
+    pstateButton.loading = false
+  }
 
   return model
 }
+
+export const usePreRun = true
diff --git a/packages/dicom/typescript/test/browser/demo-app/index.ts b/packages/dicom/typescript/test/browser/demo-app/index.ts
@@ -14,3 +14,12 @@ import './structured-report-to-html-controller.js'
 import './structured-report-to-text-controller.js'
 import './read-dicom-tags-controller.js'
 import './read-image-dicom-file-series-controller.js'
+
+const tabGroup = document.querySelector('sl-tab-group')
+const params = new URLSearchParams(window.location.search)
+if (params.has('functionName')) {
+  const functionName = params.get('functionName')
+  tabGroup.show(functionName + '-panel')
+} else {
+  tabGroup.show('applyPresentationStateToImage-panel')
+}