forked from bioimage-io/bioimageio-uploader
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mostly working uploader, final upload needs completion WIP
- Loading branch information
Showing
26 changed files
with
2,170 additions
and
213 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <script> | ||
| import { Diamonds } from 'svelte-loading-spinners'; | ||
| import Dropzone from "svelte-file-dropzone/Dropzone.svelte"; | ||
| import JSZip from "jszip"; | ||
| import yaml from "js-yaml"; | ||
| import { createEventDispatcher } from 'svelte'; | ||
| export let zip_package; | ||
| export let rdf; | ||
| let rdf_text; | ||
| let files = []; | ||
| let file_info = []; | ||
| let processing = false; | ||
| const dispatch = createEventDispatcher(); | ||
| function completed_step() { | ||
| dispatch('done', {}); | ||
| } | ||
| async function read_model(rdf_text){ | ||
| rdf = yaml.load(rdf_text); | ||
| console.log('RDF:'); | ||
| console.log(rdf); | ||
| completed_step(); | ||
| } | ||
| async function handle_files_select(e){ | ||
| const regex_zip = /\.zip$/gi | ||
| const regex_rdf = /(rdf\.yml|rdf\.yaml)$/gi | ||
| const { acceptedFiles } = e.detail; | ||
| files = acceptedFiles; | ||
| if(files.length !== 1){ | ||
| console.error(`File-count not supported: ${files.length}`); | ||
| return | ||
| } | ||
| let file = files[0]; | ||
| if(file.name.search(regex_zip) !== -1){ | ||
| zip_package = await JSZip.loadAsync(file); | ||
| console.log(zip_package); | ||
| // Obtain the RDF file | ||
| let file_names = Object.keys(zip_package.files); | ||
| let candidates = file_names.filter((file) => file.search(regex_rdf) !== -1) | ||
| console.log(file_names); | ||
| console.log(candidates); | ||
| if(candidates.length === 0){ | ||
| console.error("Unable to find any RDF files in Zip"); | ||
| file_info = [ | ||
| "Invalid Zip file: no RDF file found!", | ||
| "Entries in zip file:", | ||
| ...Object.keys(zip_package.files) | ||
| ]; | ||
| return | ||
| } | ||
| const rdf_file = zip_package.files[candidates[0]]; | ||
| rdf_text = await rdf_file.async("string"); | ||
| file_info = [ | ||
| `Zip file: ${file.name}`, | ||
| `with ${Object.keys(zip_package.files).length} entries`, | ||
| `And RDF file: ${rdf_file.name}`]; | ||
| }else if (file.name.search(regex_rdf) !== -1){ | ||
| file_info = [`RDF file given: ${file.name}`]; | ||
| rdf_text = await new Promise((resolve, reject) => { | ||
| const reader = new FileReader(); | ||
| reader.onload = (event) => {resolve(event.target.result);}; | ||
| reader.onerror = reject; | ||
| reader.readAsText(file); | ||
| }); | ||
| }else{ | ||
| file_info = ["Invalid file given"]; | ||
| return | ||
| } | ||
| read_model(rdf_text); | ||
| } | ||
| </script> | ||
|
|
||
| <h1>Add model information</h1> | ||
|
|
||
| {#if processing} | ||
| Reading model... <Diamonds /> | ||
| <button on:click={completed_step()}>Next</button> | ||
| {:else} | ||
| Please upload your model zip file here | ||
|
|
||
| <Dropzone on:drop={handle_files_select} multiple={false}> | ||
| {#if files.length === 0} | ||
| Click here or drop files | ||
| {:else} | ||
| {#each file_info as line} | ||
| {line}<br> | ||
| {/each} | ||
| {/if} | ||
|
|
||
| </Dropzone> | ||
| <!--input bind:files id="zip-file-upload" type="file" /--> | ||
|
|
||
| <!-- | ||
| {#if files.length > 0} | ||
| <button on:click={read_model}>Upload</button> | ||
| {/if} | ||
| --> | ||
| {/if} | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <script> | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import EditForm from './EditForm/index.svelte'; | ||
| import Validate from './Validate.svelte'; | ||
| export let rdf; | ||
| export let zip_package; | ||
| export let api; | ||
| const dispatch = createEventDispatcher(); | ||
| function completed_step() { | ||
| dispatch('done', {}); | ||
| } | ||
| </script> | ||
|
|
||
| <h2>Edit your submission</h2> | ||
|
|
||
| <EditForm bind:rdf bind:zip_package/> | ||
|
|
||
| <Validate {rdf} on:done={completed_step} {api}/> | ||
|
|
||
| <button on:click={completed_step}>Next</button> |
137 changes: 137 additions & 0 deletions
137
uploader/src/components/HyphaUploader/EditForm/AuthorsInput.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| <script> | ||
| export let authors =[]; | ||
| export let error; | ||
| export let affiliation=false; | ||
| export let orcid=false; | ||
| export let email=false; | ||
| export let github=false; | ||
| function delete_author_at_index(index){ | ||
| authors.splice(index, 1); | ||
| authors = authors; | ||
| } | ||
| </script> | ||
|
|
||
| <div> | ||
|
|
||
| {#each authors as author, index} | ||
| <input | ||
| type="text" | ||
| placeholder="Full Name (required)" | ||
| bind:value={author.name} | ||
| maxlength="1000" | ||
| /> | ||
| {#if affiliation} | ||
| <input | ||
| type="text" | ||
| placeholder="Affiliation (optional)" | ||
| bind:value={author.affiliation} | ||
| maxlength="100" | ||
| /> | ||
| {/if} | ||
| {#if orcid} | ||
| <input | ||
| type="text" | ||
| placeholder="ORCID (optional)" | ||
| bind:value={author.orchid} | ||
| maxlength="100" | ||
| /> | ||
| {/if} | ||
| {#if email} | ||
| <input | ||
| type="text" | ||
| placeholder="Email (optional)" | ||
| bind:value={author.orchid} | ||
| maxlength="100" | ||
| /> | ||
| {/if} | ||
| {#if github} | ||
| <input | ||
| type="text" | ||
| placeholder="Github username (required)" | ||
| bind:value={author.github_user} | ||
| maxlength="100" | ||
| /> | ||
| {/if} | ||
| <button | ||
| class="button button-outline" | ||
| on:click={()=> delete_author_at_index(index)}>Delete</button> | ||
| {/each} | ||
|
|
||
| <br> | ||
| <button | ||
| class="button" | ||
| on:click={()=> {authors = [...authors, {}]}}>Add</button> | ||
|
|
||
| <!-- | ||
| <div class="control"> | ||
| <div v-for="(author, i) in value" :key="i"> | ||
| <b-field> | ||
| <b-input | ||
| @input="commitValue" | ||
| type="text" | ||
| placeholder="Full Name (required)" | ||
| v-model="author.name" | ||
| maxlength="1000" | ||
| > | ||
| </b-input> | ||
| <b-input | ||
| @input="commitValue" | ||
| type="text" | ||
| v-if="item.options.includes('affiliation')" | ||
| placeholder="Affiliation (optional)" | ||
| v-model="author.affiliation" | ||
| maxlength="100" | ||
| > | ||
| </b-input> | ||
| <b-input | ||
| @input="commitValue" | ||
| type="text" | ||
| v-if="item.options.includes('orcid')" | ||
| placeholder="ORCID (optional)" | ||
| v-model="author.orcid" | ||
| maxlength="1000" | ||
| > | ||
| </b-input> | ||
| <b-input | ||
| @input="commitValue" | ||
| type="text" | ||
| v-if="item.options.includes('github_user')" | ||
| placeholder="Github User (required)" | ||
| v-model="author.github_user" | ||
| maxlength="100" | ||
| > | ||
| </b-input> | ||
| <b-input | ||
| @input="commitValue" | ||
| type="text" | ||
| v-if="item.options.includes('email')" | ||
| placeholder="Email (optional)" | ||
| v-model="author.email" | ||
| maxlength="1000" | ||
| > | ||
| </b-input> | ||
| <b-button | ||
| v-if="value.length > 1" | ||
| style="text-transform:none;" | ||
| class="button" | ||
| icon-left="delete" | ||
| @click="removeAuthor(author)" | ||
| ></b-button> | ||
| <b-button | ||
| v-if=" | ||
| i === value.length - 1 && !(!author.name || author.name === '') | ||
| " | ||
| style="text-transform:none;" | ||
| class="button" | ||
| icon-left="plus" | ||
| @click="addNewAuthor" | ||
| ></b-button> | ||
| </b-field> | ||
| </div> | ||
| --> | ||
| {#if error } | ||
| <p class="help is-danger">{error }</p> | ||
| {/if} | ||
| </div> |
21 changes: 21 additions & 0 deletions
21
uploader/src/components/HyphaUploader/EditForm/FileEntry.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <script charset="utf-8"> | ||
| export let name | ||
| export let handleClick = () => {}; | ||
| </script> | ||
|
|
||
| <style type="text/css" media="screen"> | ||
| .button{ | ||
| padding-right:0rem | ||
| } | ||
| .button-small { | ||
| font-size: .8rem; | ||
| height: 2.8rem; | ||
| line-height: 2.8rem; | ||
| padding: 0 1.5rem; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="button button-outline"> | ||
| {name} | ||
| <div class="button button-small" on:click={handleClick}>❌</div> | ||
| </div> |
24 changes: 24 additions & 0 deletions
24
uploader/src/components/HyphaUploader/EditForm/Files.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <script charset="utf-8"> | ||
| import Dropzone from "svelte-file-dropzone/Dropzone.svelte"; | ||
| import FileEntry from './FileEntry.svelte'; | ||
| export let files = []; | ||
| export let handle_files_select = () => {}; | ||
| export let remove_file = () => {}; | ||
| </script> | ||
|
|
||
|
|
||
| <style type="text/css" media="screen"> | ||
| .dropzone{ | ||
| flex-direction: row; | ||
| } | ||
| </style> | ||
|
|
||
| <Dropzone containerStyles="flex-direction:row;flex-wrap:wrap;" containerClasses="dropzone" on:drop={handle_files_select} multiple={true}> | ||
| {#if files.length === 0} | ||
| Click here or drop files | ||
| {:else} | ||
| {#each files as name, index} | ||
| <FileEntry handleClick={(e)=>{remove_file(e, name, index)}} {name}/> | ||
| {/each} | ||
| {/if} | ||
| </Dropzone> |
Oops, something went wrong.