part of issue #2 (Questionnaire fully dynamic and configurable)

IPK-BIT · Feb 19, 2024 · 3274e3f · 3274e3f
1 parent ce28765
commit 3274e3f
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 28 deletions.
diff --git a/src/components/isa/generic/Comment.svelte b/src/components/isa/generic/Comment.svelte
@@ -9,8 +9,8 @@
 <section>
 
     <div class="attr comment">
-        Name: <input type="text" bind:value={comment.name} placeholder="name" />
-        &nbsp; Value: <input type="text" bind:value={comment.value} placeholder="value" />
+        Name: <input on:change type="text" bind:value={comment.name} placeholder="name" />
+        &nbsp; Value: <input on:change type="text" bind:value={comment.value} placeholder="value" />
         <button on:click={() => dispatch('removeComment', {index} )}>X</button>
     </div>
 

diff --git a/src/components/isa/generic/Comments.svelte b/src/components/isa/generic/Comments.svelte
@@ -3,6 +3,9 @@
     export { comments as value };
     export let attr = '';
 
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
     if (!comments) {
         comments = [];
     }
@@ -13,11 +16,13 @@
     const addComment = () => {
         let emptyComment = Schemas.getObjectFromSchema('comment');
         comments = [...comments, emptyComment];
+        dispatch('change');
     }
 
     function handleRemoveComment(event) {
         comments.splice(event.detail.index, 1);
         comments = [...comments];
+        dispatch('change');
     }
 
 </script>
@@ -29,7 +34,7 @@
 
         {#if comments.length > 0}
         {#each comments as comment, index}
-        <Comment on:removeComment={handleRemoveComment} bind:comment {index} />
+        <Comment on:change on:removeComment={handleRemoveComment} bind:comment {index} />
         {/each}
         {:else}
         <p><i>No comments have yet been created.</i></p>

diff --git a/src/components/isa/generic/OntologyAnnotations.svelte b/src/components/isa/generic/OntologyAnnotations.svelte
@@ -2,6 +2,9 @@
     export let ontologyAnnotations: Array<Object>;
     export let ontology;
 
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
     import Svelecte from 'svelecte';
 
     import ontologyLookup from '@/lib/ontologyLookup';
@@ -36,6 +39,7 @@
             ontologyAnnotations = [...ontologyAnnotations, _emptyOA];
         }
         roles = [];
+        dispatch('change');
     }
 
     function onDelete(index) {

diff --git a/src/components/isa/generic/People.svelte b/src/components/isa/generic/People.svelte
@@ -21,7 +21,7 @@
         <button class="add" on:click|preventDefault={() => addPerson()}>add person</button>
 
         {#each people as person}
-        <Person bind:person />
+        <Person on:change bind:person />
         {/each}
     </div>
 

diff --git a/src/components/isa/generic/Person.svelte b/src/components/isa/generic/Person.svelte
@@ -12,14 +12,14 @@
 
     <div class="attr">
         <h4>Person</h4>
-        <input type="text" bind:value={person.firstName} placeholder="first name" style="margin-right: 20px;"> 
-        <input type="text" bind:value={person.lastName} placeholder="last name"> <br />
-        <input type="text" bind:value={person.address} placeholder="address" style="width: 100%;"> <br />
-        <input type="text" bind:value={person.affiliation} placeholder="affiliation" style="width: 100%;"> <br />
+        <input on:change type="text" bind:value={person.firstName} placeholder="first name" style="margin-right: 20px;"> 
+        <input on:change type="text" bind:value={person.lastName} placeholder="last name"> <br />
+        <input on:change type="text" bind:value={person.address} placeholder="address" style="width: 100%;"> <br />
+        <input on:change type="text" bind:value={person.affiliation} placeholder="affiliation" style="width: 100%;"> <br />
 
-        <OntologyAnnotations bind:ontologyAnnotations={person.roles} ontology={ontologyMapping['Person.role']} />
+        <OntologyAnnotations on:change bind:ontologyAnnotations={person.roles} ontology={ontologyMapping['Person.role']} />
 
-        <Comments bind:value={person.comments} />
+        <Comments on:change bind:value={person.comments} />
 
     </div>
 

diff --git a/src/components/isa/study/ProtocolParametersSelect.svelte b/src/components/isa/study/ProtocolParametersSelect.svelte
@@ -40,7 +40,6 @@ function update() {
         parameters.push(getParameter(parameterName));
     }
     console.log(parameters);
-    //jsonPath
     set($isaObj, jsonPath, parameters);
 }
 
@@ -49,7 +48,10 @@ function init() {
     selectedParameterNames = parameters.map(o => o.parameterName.annotationValue);
 
     if (parameters.length > 0) {
-        let selectedParameterValues = parameters.map(o => [o.parameterName.annotationValue,   o.comments.find((c) => c.name == 'value')['value']    ]);
+        let selectedParameterValues = parameters.map(o => [
+            o.parameterName.annotationValue,
+            o.comments.find((c) => c.name == 'value')['value']
+        ]);
         parameterValues = Object.fromEntries(selectedParameterValues);
     }
 }
@@ -80,6 +82,7 @@ onMount(() => {
     </div>
     {/if}
 
+    <div style="height: 400px; overflow-y: scroll;">
     <table id="parameters-predefined">
         <tr>
             <th></th>
@@ -96,6 +99,7 @@ onMount(() => {
         {/if}
         {/each}
     </table>
+    </div>
 
 </section>
 

diff --git a/src/components/questionnaire/GenericQuestionnaire.svelte b/src/components/questionnaire/GenericQuestionnaire.svelte
@@ -13,6 +13,7 @@ const dispatch = createEventDispatcher();
 import { wizard } from '@/stores/wizard';
 import { config } from '@/stores/config';
 import { isaObj } from '@/stores/isa';
+import { hooksExecuted } from '@/stores/hooksExecuted';
 
 import Schemas from '@/lib/schemas.js';
 
@@ -34,7 +35,8 @@ import FactorsSelect from '../isa/study/FactorsSelect.svelte';
 const fieldTypes = {
     'text': String,
     'textarea': Textarea,
-    'date': Date
+    'date': Date,
+    'people': People,
 }
 
 const components = {
@@ -50,7 +52,7 @@ $wizard.steps = steps.length;
 
 let currentStep = 0;
 
-let hooksExecuted = [];
+//let hooksExecuted = [];
 
 const hooks = {
     'addStudy': addStudy,
@@ -106,9 +108,9 @@ async function next() {
 function executeStepHooks(step) {
     if (steps[step] && steps[step].hook !== undefined) {
         const hookId = steps[step].hook+'_'+step;
-        if (!hooksExecuted.includes(hookId)) {
+        if (!$hooksExecuted.includes(hookId)) {
             hooks[steps[step].hook]();
-            hooksExecuted.push(hookId);
+            $hooksExecuted = [...$hooksExecuted, hookId]
             console.log('execute hook: ', steps[step].hook);
         } else {
             console.info('hooks do not get executed twice!')
@@ -126,11 +128,11 @@ function executeStepHooks(step) {
 function populateFieldValues() {
     if (steps[currentStep] && steps[currentStep].fields) {
         for (let field of steps[currentStep].fields) {
-            if (field.isaMapping.attribute === 'comments') {
-                commentMapper(field);
-            } else if (field.isaMapping.entity === 'protocol') {
+            if (field.isaMapping.jsonPath) {
                 field.value = get($isaObj, field.isaMapping.jsonPath);
                 doRerender++;
+            } else if (field.isaMapping.attribute === 'comments') {
+                commentMapper(field);
             } else {
                 nativeAttributeMapper(field);
             }
@@ -187,10 +189,12 @@ function updateStore(value, i) {
         let step = steps[currentStep];
         let field = step.fields[i];
 
-        if (field.isaMapping.attribute === 'comments') {
+        if (field.isaMapping.jsonPath) {
+            set($isaObj, field.isaMapping.jsonPath, value);
+        } else if (field.isaMapping.attribute === 'comments') {
             updateComment(field, value);
-        } else if (field.isaMapping.entity === 'protocol') {
-            updateProtocol(field, value);
+        } else if (field.isaMapping.attribute === 'people') {
+            updatePeople(field, value);
         } else {
             updateNativeAttribute(field, value);
         }
@@ -207,12 +211,15 @@ function updateNativeAttribute(field, value) {
         const studyIndex = field.isaMapping.studyIndex ?? 0;
         $isaObj.studies[studyIndex][attr] = value;
     }
-
-    //target[field.isaMapping.attribute] = value;
 }
 
-function updateProtocol(field, value) {
-    set($isaObj, field.isaMapping.jsonPath, value);
+function updatePeople(field, value) {
+    if (field.isaMapping.entity === 'investigation') {
+        $isaObj.people = value;
+    } else if (field.isaMapping.entity === 'study') {
+        const studyIndex = field.isaMapping.studyIndex ?? 0;
+        $isaObj.studies[studyIndex].people = value;
+    }
 }
 
 function updateComment(field, value) {

diff --git a/src/stores/hooksExecuted.js b/src/stores/hooksExecuted.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const hooksExecuted = writable([]);
diff --git a/wizard.steps.config.js b/wizard.steps.config.js
@@ -34,6 +34,20 @@ window.steps = [
             }
         ]
     },
+    {
+        title: 'Please information about people how have worked on your plant phenotyping project.',
+        fields: [
+            {
+                label: 'Project title',
+                type: 'people',
+                isaMapping: {
+                    entity: 'investigation',
+                    attribute: 'people'
+                },
+                explanation: 'DM-16'
+            }
+        ]
+    },
     {
         title: 'Please provide contact address of your institute.',
         fields: [
@@ -136,8 +150,8 @@ window.steps = [
                 label: 'Growth description',
                 type: 'textarea',
                 isaMapping: {
-                    entity: 'protocol',
-                    attribute: 'description',
+                    //entity: 'protocol',
+                    //attribute: 'description',
                     jsonPath: 'studies[0].protocols[0].description'
                 }
             }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { writable } from 'svelte/store';

		export const hooksExecuted = writable([]);