Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(demo): File and stream inputs use sl-details #891

Merged
merged 2 commits into from
Aug 14, 2023
Merged

refactor(demo): File and stream inputs use sl-details #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97db2b2
refactor(demo): File and stream inputs use sl-details
thewtex Aug 13, 2023
327bf66
ci(examples): Run apt-get update for disk-usage workaround
thewtex Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .github/workflows/examples.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -54,6 +55,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -127,6 +129,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -207,6 +210,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -235,6 +239,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -270,6 +275,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -308,6 +314,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -347,6 +354,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down Expand Up @@ -387,6 +395,7 @@ jobs:
run: |
# Workaround for https://github.com/actions/virtual-environments/issues/709
df -h
sudo apt-get update
sudo apt-get remove -y '^dotnet-.*'
sudo apt-get remove -y '^llvm-.*'
sudo apt-get remove -y 'php.*'
Expand Down
16 changes: 10 additions & 6 deletions packages/compress-stringify/python-web-demo/compress_stringify_controller.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,19 @@ def __init__(self, load_sample_inputs):
self.run_button = run_button
add_event_listener(run_button, 'click', self.on_run)

def on_load_sample_inputs_click(self, event):
self.model = self.load_sample_inputs(self.model)
async def on_load_sample_inputs_click(self, event):
load_sample_inputs_button = js.document.querySelector("#compress_stringify-inputs [name=load-sample-inputs]")
load_sample_inputs_button.loading = True
self.model = await self.load_sample_inputs(self.model)
load_sample_inputs_button.loading = False

async def on_input_change(self, event):
files = event.target.files
array_buffer = await files.item(0).arrayBuffer()
input_bytes = array_buffer.to_bytes()
self.model.inputs['input'] = input_bytes
input_element = js.document.querySelector("#compress_stringify-inputs sl-input[name=input]")
input_element.value = str(np.frombuffer(input_bytes[:50], dtype=np.uint8)) + ' ...'
input_element = js.document.getElementById("#compress_stringify-input-details")
input_element.innerHTML = f"<pre>{str(np.frombuffer(input_bytes[:50], dtype=np.uint8)) + ' ...'}</pre>"

def on_stringify_change(self, event):
self.model.options['stringify'] = self.stringify_element.checked
Expand Down Expand Up @@ -100,8 +103,9 @@ async def on_run(self, event):
self.model.outputs["output"] = output
self.output_download_element.variant = "success"
self.output_download_element.disabled = False
output_element = js.document.querySelector('#compress_stringify-outputs sl-textarea[name=output]')
output_element.value = str(np.frombuffer(output[:200], dtype=np.uint8)) + ' ...'
output_element = js.document.getElementById('compress_stringify-output-details')
output_element.innerHTML = f"<pre>{str(np.frombuffer(output[:200], dtype=np.uint8)) + ' ...'}</pre>"
output_element.disabled = False

except Exception as error:
js.globalThis.notify("Error while running pipeline", str(error), "danger", "exclamation-octagon")
Expand Down
9 changes: 4 additions & 5 deletions packages/compress-stringify/python-web-demo/compress_stringify_load_sample_inputs.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import js

# load_sample_inputs = None

def load_sample_inputs(model):
async def load_sample_inputs(model):
sample_input = bytes([222, 173, 190, 239])
model.inputs['input'] = sample_input
input_element = js.document.querySelector('#compress_stringify-inputs sl-input[name=input]')
input_element.value = str(sample_input)
input_element = js.document.getElementById('compress_stringify-input-details')
input_element.innerHTML = f"<pre>{str(sample_input)}</pre>"
input_element.disabled = False

stringify = True
model.options['stringify'] = stringify
Expand Down
10 changes: 5 additions & 5 deletions packages/compress-stringify/python-web-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</head>
<body>

<script src="./utilities.js"></script>
<script type="module" 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>
Expand All @@ -51,7 +51,7 @@ <h2>itkwasm-compress-stringify<img src="./python-logo.svg" alt="Python logo" cla
<small><i>Given a binary, compress and optionally base64 encode.</i></small><br /><br />

<div id="compress_stringify-inputs"><form action="">
<sl-input required name="input" type="text" label="input" help-text="Input binary" disabled></sl-input>
<sl-details id="compress_stringify-input-details" summary="input: Input binary" disabled></sl-details>
<label for="input-file"><sl-button name="input-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file" name="input-file" style="display: none"/>
<br /><br />
<sl-checkbox name="stringify">stringify - <i>Stringify the output</i></sl-checkbox>
Expand All @@ -67,7 +67,7 @@ <h2>itkwasm-compress-stringify<img src="./python-logo.svg" alt="Python logo" cla
<sl-divider></sl-divider>

<div id="compress_stringify-outputs">
<sl-textarea resize="auto" filled disabled name="output" label="output" help-text="Output compressed binary"><sl-skeleton effect="none"></sl-skeleton></sl-textarea>
<sl-details disabled id="compress_stringify-output-details" summary="output: Output compressed binary"></sl-details>
<sl-button variant="neutral" outline name="output-download" disabled>Download</sl-button>
<br /><br />
</div>
Expand All @@ -80,7 +80,7 @@ <h2>itkwasm-compress-stringify<img src="./python-logo.svg" alt="Python logo" cla
<small><i>Given a binary or string produced with compress-stringify, decompress and optionally base64 decode.</i></small><br /><br />

<div id="parse_string_decompress-inputs"><form action="">
<sl-input required name="input" type="text" label="input" help-text="Compressed input" disabled></sl-input>
<sl-details id="parse_string_decompress-input-details" summary="input: Compressed input" disabled></sl-details>
<label for="input-file"><sl-button name="input-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file" name="input-file" style="display: none"/>
<br /><br />
<sl-checkbox name="parse-string">parse_string - <i>Parse the input string before decompression</i></sl-checkbox>
Expand All @@ -93,7 +93,7 @@ <h2>itkwasm-compress-stringify<img src="./python-logo.svg" alt="Python logo" cla
<sl-divider></sl-divider>

<div id="parse_string_decompress-outputs">
<sl-textarea resize="auto" filled disabled name="output" label="output" help-text="Output decompressed binary"><sl-skeleton effect="none"></sl-skeleton></sl-textarea>
<sl-details disabled id="parse_string_decompress-output-details" summary="output: Output decompressed binary"></sl-details>
<sl-button variant="neutral" outline name="output-download" disabled>Download</sl-button>
<br /><br />
</div>
Expand Down
16 changes: 10 additions & 6 deletions packages/compress-stringify/python-web-demo/parse_string_decompress_controller.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,19 @@ def __init__(self, load_sample_inputs):
self.run_button = run_button
add_event_listener(run_button, 'click', self.on_run)

def on_load_sample_inputs_click(self, event):
self.model = self.load_sample_inputs(self.model)
async def on_load_sample_inputs_click(self, event):
load_sample_inputs_button = js.document.querySelector("#parse_string_decompress-inputs [name=load-sample-inputs]")
load_sample_inputs_button.loading = True
self.model = await self.load_sample_inputs(self.model)
load_sample_inputs_button.loading = False

async def on_input_change(self, event):
files = event.target.files
array_buffer = await files.item(0).arrayBuffer()
input_bytes = array_buffer.to_bytes()
self.model.inputs['input'] = input_bytes
input_element = js.document.querySelector("#parse_string_decompress-inputs sl-input[name=input]")
input_element.value = str(np.frombuffer(input_bytes[:50], dtype=np.uint8)) + ' ...'
input_element = js.document.getElementById("#parse_string_decompress-input-details")
input_element.innerHTML = f"<pre>{str(np.frombuffer(input_bytes[:50], dtype=np.uint8)) + ' ...'}</pre>"

def on_parse_string_change(self, event):
self.model.options['parse_string'] = self.parse_string_element.checked
Expand Down Expand Up @@ -86,8 +89,9 @@ async def on_run(self, event):
self.model.outputs["output"] = output
self.output_download_element.variant = "success"
self.output_download_element.disabled = False
output_element = js.document.querySelector('#parse_string_decompress-outputs sl-textarea[name=output]')
output_element.value = str(np.frombuffer(output[:200], dtype=np.uint8)) + ' ...'
output_element = js.document.getElementById('parse_string_decompress-output-details')
output_element.innerHTML = f"<pre>{str(np.frombuffer(output[:200], dtype=np.uint8)) + ' ...'}</pre>"
output_element.disabled = False

except Exception as error:
js.globalThis.notify("Error while running pipeline", str(error), "danger", "exclamation-octagon")
Expand Down
7 changes: 4 additions & 3 deletions packages/compress-stringify/python-web-demo/parse_string_decompress_load_sample_inputs.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import js

def load_sample_inputs(model):
async def load_sample_inputs(model):
sample_input = bytes([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])
model.inputs["input"] = sample_input
input_element = js.document.querySelector("#parse_string_decompress-inputs sl-input[name=input]")
input_element.value = str(sample_input)
input_element = js.document.getElementById("parse_string_decompress-input-details")
input_element.innerHTML = f"<pre>{str(sample_input)}</pre>"
input_element.disabled = False

parse_string = True
model.options["parse_string"] = parse_string
Expand Down
15 changes: 15 additions & 0 deletions packages/compress-stringify/python-web-demo/utilities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// Generated file. To retain edits, remove this comment.

function downloadFile(content, filename) {
const url = URL.createObjectURL(new Blob([content]))
const a = document.createElement('a')
Expand All @@ -14,6 +16,15 @@ function downloadFile(content, filename) {
a.click()
return a
}
globalThis.downloadFile = downloadFile

function interfaceTypeJsonReplacer (key, value) {
if (!!value && value.byteLength !== undefined) {
return String(value.slice(0, 6)) + '...'
}
return value
}
globalThis.interfaceTypeJsonReplacer = interfaceTypeJsonReplacer

function escapeHtml(html) {
const div = document.createElement('div');
Expand All @@ -22,6 +33,7 @@ function escapeHtml(html) {
div.remove()
return escaped
}
globalThis.escapeHtml = escapeHtml

function notify(title, message, variant = 'primary', icon = 'info-circle', duration = 3000) {
const slAlert = Object.assign(document.createElement('sl-alert'), {
Expand All @@ -38,6 +50,7 @@ function notify(title, message, variant = 'primary', icon = 'info-circle', durat
document.body.append(slAlert);
setTimeout(() => slAlert.toast(), 300)
}
globalThis.notify = notify

function disableInputs(inputId) {
document.querySelectorAll(`#${inputId} sl-button`).forEach(button => {
Expand All @@ -51,6 +64,7 @@ function disableInputs(inputId) {
input.disabled = true
})
}
globalThis.disableInputs = disableInputs

function enableInputs(inputId) {
document.querySelectorAll(`#${inputId} sl-button`).forEach(button => {
Expand All @@ -64,3 +78,4 @@ function enableInputs(inputId) {
input.disabled = false
})
}
globalThis.enableInputs = enableInputs
6 changes: 3 additions & 3 deletions packages/compress-stringify/typescript/cypress/e2e/spec.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ describe('@itk-wasm/compress-stringify', () => {
cy.visit(demoServer)

cy.get('#compressStringifyInputs sl-button[name=loadSampleInputs]').click()
cy.get('#compressStringifyInputs sl-input[name=input]').should('have.value', '222,173,190,239')
cy.get('#compressStringify-input-details').should('contain', '222,173,190,239')
cy.get('#compressStringifyInputs sl-input[name=data-url-prefix]').should('have.value', 'data:application/iwi+cbor+zstd;base64,')

cy.get('#compressStringifyInputs sl-button[name="run"]').click()

cy.get('#compressStringifyOutputs sl-textarea[name=output]').should('have.value', '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 ...')
cy.get('#compressStringify-output-details').should('contain', '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')
})

it('parseStringDecompress runs sample inputs and produces expected outputs', () => {
Expand All @@ -22,6 +22,6 @@ describe('@itk-wasm/compress-stringify', () => {

cy.get('#parseStringDecompressInputs sl-button[name="run"]').click()

cy.get('#parseStringDecompressOutputs sl-textarea[name=output]').should('have.value', '222,173,190,239 ...')
cy.get('#parseStringDecompress-output-details').should('contain', '222,173,190,239')
})
})
13 changes: 8 additions & 5 deletions ...ages/compress-stringify/typescript/test/browser/demo-app/compress-stringify-controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@ class CompressStringifyController {
if (loadSampleInputs) {
const loadSampleInputsButton = document.querySelector("#compressStringifyInputs [name=loadSampleInputs]")
loadSampleInputsButton.setAttribute('style', 'display: block-inline;')
loadSampleInputsButton.addEventListener('click', (event) => {
loadSampleInputs(model)
loadSampleInputsButton.addEventListener('click', async (event) => {
loadSampleInputsButton.loading = true
await loadSampleInputs(model)
loadSampleInputsButton.loading = false
})
}

Expand All @@ -45,7 +47,8 @@ class CompressStringifyController {
const arrayBuffer = await files[0].arrayBuffer()
model.inputs.set("input", new Uint8Array(arrayBuffer))
const input = document.querySelector("#compressStringifyInputs sl-input[name=input]")
input.value = model.inputs.get("input").subarray(0, 50).toString() + ' ...'
details.innerHTML = `<pre>${globalThis.escapeHtml(model.inputs.get("input").subarray(0, 50).toString() + ' ...')}</pre>`
details.disabled = false
})

// ----------------------------------------------
Expand Down Expand Up @@ -102,8 +105,8 @@ class CompressStringifyController {
model.outputs.set("output", output)
outputOutputDownload.variant = "success"
outputOutputDownload.disabled = false
const outputOutput = document.querySelector('#compressStringifyOutputs sl-textarea[name=output]')
outputOutput.value = output.subarray(0, 1024).toString() + ' ...'
const outputOutput = document.getElementById("compressStringify-output-details")
outputOutput.innerHTML = `<pre>${globalThis.escapeHtml(output.subarray(0, 1024).toString() + ' ...')}</pre>`
outputOutput.disabled = false
} catch (error) {
globalThis.notify("Error while running pipeline", error.toString(), "danger", "exclamation-octagon")
Expand Down
7 changes: 4 additions & 3 deletions ...press-stringify/typescript/test/browser/demo-app/compress-stringify-load-sample-inputs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
export default function compressStringifyLoadSampleInputs (model) {
export default async function compressStringifyLoadSampleInputs (model) {
const sampleInput = new Uint8Array([222, 173, 190, 239])
model.inputs.set("input", sampleInput)
const inputElement = document.querySelector("#compressStringifyInputs [name=input]")
inputElement.value = sampleInput.toString()
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)
Expand Down
Loading
Loading