From a105ee999cd64a86fe17ff8f666d656bfd240cf5 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Tue, 23 Apr 2024 19:50:53 +1000
Subject: [PATCH 01/17] Draft. Haven't modified Home page score set Highlights
 Keywords section. Other functions work normally.

---
 src/components/screens/ExperimentEditor.vue | 98 +++++++++++++++++++--
 src/components/screens/ExperimentView.vue   |  8 +-
 src/components/screens/ScoreSetEditor.vue   | 15 ++--
 src/components/screens/ScoreSetView.vue     |  7 +-
 src/lib/item-types.js                       | 40 +++++++++
 5 files changed, 144 insertions(+), 24 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 372ddf72..9768cfbb 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -53,13 +53,64 @@
                 </span>
                 <span v-if="validationErrors.shortDescription" class="mave-field-error">{{validationErrors.shortDescription}}</span>
               </div>
+
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="endogenousKeyword"
+                      :id="$scopedId('input-endogenous-locus-library-method-keywords')"
+                      :options="endogenousKeywordsOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('input-endogenous-locus-library-method-keywords')">Endogenous Locus Library Method Keyword</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="invitroKeyword"
+                      :id="$scopedId('input-in-vitro-construct-library-method-keywords')"
+                      :options="invitroKeywordsOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('input-in-vitro-construct-library-method-keywords')">In Vitro Construct Library Method Keyword</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>  
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="variantKeyword"
+                      :id="$scopedId('variant-library-keywords')"
+                      :options="variantKeywordsOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('variant-library-keywords')">Variant Library Method Keyword</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>  
               <div class="field">
                 <span class="p-float-label">
-                  <Chips v-model="keywords" :id="$scopedId('input-keywords')" :addOnBlur="true" :allowDuplicate="false" />
-                  <label :for="$scopedId('input-keywords')">Keywords</label>
+                  <Dropdown
+                      v-model="phenotypicKeyword"
+                      :id="$scopedId('phenotypic-assay-keywords')"
+                      :options="phenotypicKeywordsOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('phenotypic-assay-keywords')">Phenotypic Assay Keyword</label>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
+
               <div class="field">
                 <span class="p-float-label">
                   <Chips
@@ -234,6 +285,7 @@ import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Chips from 'primevue/chips'
+import Dropdown from 'primevue/dropdown'
 import Multiselect from 'primevue/multiselect'
 import FileUpload from 'primevue/fileupload'
 import InputText from 'primevue/inputtext'
@@ -251,14 +303,22 @@ import useFormatters from '@/composition/formatters'
 
 export default {
   name: 'ExperimentEditor',
-  components: { AutoComplete, Button, Card, Chips, Multiselect, DefaultLayout, FileUpload, InputText, ProgressSpinner, TabPanel, TabView, Textarea },
+  components: { AutoComplete, Button, Card, Chips, Dropdown, Multiselect, DefaultLayout, FileUpload, InputText, ProgressSpinner, TabPanel, TabView, Textarea },
 
   setup: () => {
+    const endogenousKeywordsOptions = useItems({itemTypeName: `controlled-keywords-endogenous-search`})
+    const invitroKeywordsOptions = useItems({itemTypeName: `controlled-keywords-invitro-search`})
+    const variantKeywordsOptions = useItems({itemTypeName: `controlled-keywords-variant-search`})
+    const phenotypicKeywordsOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-search`})
     const publicationIdentifierSuggestions = useItems({itemTypeName: 'publication-identifier-search'})
     const externalPublicationIdentifierSuggestions = useItems({itemTypeName: 'external-publication-identifier-search'})
     return {
       ...useFormatters(),
       ...useItem({itemTypeName: 'experiment'}),
+      endogenousKeywordsOptions: endogenousKeywordsOptions.items,
+      invitroKeywordsOptions: invitroKeywordsOptions.items,
+      variantKeywordsOptions: variantKeywordsOptions.items,
+      phenotypicKeywordsOptions: phenotypicKeywordsOptions.items,
       publicationIdentifierSuggestions: publicationIdentifierSuggestions.items,
       setPublicationIdentifierSearch: (text) => publicationIdentifierSuggestions.setRequestBody({text}),
       externalPublicationIdentifierSuggestions: externalPublicationIdentifierSuggestions.items,
@@ -283,7 +343,11 @@ export default {
     shortDescription: null,
     abstractText: null,
     methodText: null,
-    keywords: [],
+    endogenousKeyword: null,
+    invitroKeyword: null,
+    variantKeyword: null,
+    phenotypicKeyword: null,
+    keywords: {},
     doiIdentifiers: [],
     primaryPublicationIdentifiers: [],
     secondaryPublicationIdentifiers: [],
@@ -469,7 +533,10 @@ export default {
         this.shortDescription = this.item.shortDescription
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
-        this.keywords = this.item.keywords
+        this.endogenousKeyword = this.item.keywords["Endogenous Locus Library Method"].value
+        this.invitroKeyword = this.item.keywords["In Vitro Construct Library Method"].value
+        this.variantKeyword = this.item.keywords["Variant Library"].value
+        this.phenotypicKeyword = this.item.keywords["Phenotypic Assay"].value
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering publication identifiers list for those publications we know to be
@@ -488,7 +555,11 @@ export default {
         this.shortDescription = null
         this.abstractText = null
         this.methodText = null
-        this.keywords = []
+        this.keywords = {}
+        this.endogenousKeyword = null
+        this.invitroKeyword = null
+        this.variantKeyword = null
+        this.phenotypicKeyword = null
         this.doiIdentifiers = []
         this.primaryPublicationIdentifiers = []
         this.secondaryPublicationIdentifiers = []
@@ -519,7 +590,12 @@ export default {
         shortDescription: this.shortDescription,
         abstractText: this.abstractText,
         methodText: this.methodText,
-        keywords: this.keywords,
+        keywords: {
+          endogenousKeyword: {"key": "Endogenous Locus Library Method", "value": this.endogenousKeyword},
+          invitroKeyword: {"key": "In Vitro Construct Library Method", "value": this.invitroKeyword},
+          variantKeyword: {"key": "Variant Library", "value": this.variantKeyword},
+          phenotypicKeyword: {"key": "Phenotypic Assay", "value": this.phenotypicKeyword}
+        },
         doiIdentifiers: this.doiIdentifiers.map((identifier) => _.pick(identifier, 'identifier')),
         primaryPublicationIdentifiers: primaryPublicationIdentifiers,
         secondaryPublicationIdentifiers: secondaryPublicationIdentifiers,
@@ -528,7 +604,7 @@ export default {
       }
       // empty item arrays so that deleted items aren't merged back into editedItem object
       if(this.item) {
-        this.item.keywords = []
+        this.item.keywords = {}
         this.item.doiIdentifiers = []
         this.item.publicationIdentifiers = []
         this.item.primaryPublicationIdentifiers = []
@@ -624,6 +700,12 @@ export default {
 
 <style scoped>
 
+/* Keywords */
+
+.custom-keyword-dropdown .p-dropdown-trigger {
+  width: 600px; 
+}
+
 /* Cards */
 
 .mave-experiment-editor:deep(.p-card) {
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index c4d11db0..a2a39095 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -84,11 +84,10 @@
           </div>
         </div>
         <div v-else>No associated secondary publications.</div>
-        <div v-if="item.keywords && item.keywords.length > 0">
+        <div v-if="item.keywords && Object.keys(item.keywords).length > 0">
           <div class="mave-score-set-section-title">Keywords</div>
           <div class="mave-score-set-keywords">
-            <Chip :label="keyword" />
-            <a v-for="(keyword, i) of item.keywords" :key="i" :href="`${config.appBaseUrl}/search?search=${keyword}`"><Chip :label="keyword"/></a>
+            <li v-for="(value, key) in item.keywords" :key="key"> {{ key }}: <a :href="`https://www.mavedb.org/search/?keywords=${value.value}`">{{ value.value }}</a></li>
           </div>
         </div>
         <div class="mave-score-set-section-title">Scoreset Targets</div>
@@ -182,7 +181,6 @@ import _ from 'lodash'
 import {marked} from 'marked'
 import config from '@/config'
 import Button from 'primevue/button'
-import Chip from 'primevue/chip'
 import DefaultLayout from '@/components/layout/DefaultLayout'
 import PageLoading from '@/components/common/PageLoading'
 import ItemNotFound from '@/components/common/ItemNotFound'
@@ -194,7 +192,7 @@ import { oidc } from '@/lib/auth'
 
 export default {
   name: 'ExperimentView',
-  components: { Button, Chip, DefaultLayout, PageLoading, ItemNotFound },
+  components: { Button, DefaultLayout, PageLoading, ItemNotFound },
 
   setup: () => {
     return {
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 5e5e4509..8e03f4ac 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -142,6 +142,7 @@
                   Choosing a license with these restrictions may cause your dataset to be excluded from data federation
                   and aggregation by MaveDB collaborators.
                 </Message>
+                <!--
                 <div class="field">
                   <span class="p-float-label">
                     <Chips v-model="keywords" :id="$scopedId('input-keywords')" :addOnBlur="true"
@@ -149,7 +150,7 @@
                     <label :for="$scopedId('input-keywords')">Keywords</label>
                   </span>
                   <span v-if="validationErrors.keywords" class="mave-field-error">{{ validationErrors.keywords }}</span>
-                </div>
+                </div>-->
                 <div class="field">
                   <span class="p-float-label">
                     <Chips
@@ -713,7 +714,7 @@ export default {
     shortDescription: null,
     abstractText: null,
     methodText: null,
-    keywords: [],
+    //keywords: [],
     doiIdentifiers: [],
     primaryPublicationIdentifiers: [],
     secondaryPublicationIdentifiers: [],
@@ -1034,7 +1035,7 @@ export default {
 
     populateExperimentMetadata: function (event) {
       this.doiIdentifiers = event.value.doiIdentifiers
-      this.keywords = event.value.keywords
+      //this.keywords = event.value.keywords
       this.publicationIdentifiers = _.concat(event.value.primaryPublicationIdentifiers, event.value.secondaryPublicationIdentifiers)
       this.primaryPublicationIdentifiers = event.value.primaryPublicationIdentifiers.filter((primary) => {
         return this.publicationIdentifiers.some((publication) => {
@@ -1254,7 +1255,7 @@ export default {
         this.shortDescription = this.item.shortDescription
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
-        this.keywords = this.item.keywords
+        //this.keywords = this.item.keywords
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering a merged list of secondary and primary publication identifiers
@@ -1280,7 +1281,7 @@ export default {
         this.shortDescription = null
         this.abstractText = null
         this.methodText = null
-        this.keywords = []
+        //this.keywords = []
         this.doiIdentifiers = []
         this.primaryPublicationIdentifiers = []
         this.secondaryPublicationIdentifiers = []
@@ -1369,7 +1370,7 @@ export default {
         shortDescription: this.shortDescription,
         abstractText: this.abstractText,
         methodText: this.methodText,
-        keywords: this.keywords,
+        //keywords: this.keywords,
         doiIdentifiers: this.doiIdentifiers.map((identifier) => _.pick(identifier, 'identifier')),
         primaryPublicationIdentifiers: primaryPublicationIdentifiers,
         secondaryPublicationIdentifiers: secondaryPublicationIdentifiers,
@@ -1384,7 +1385,7 @@ export default {
       }
       else {
         // empty item arrays so that deleted items aren't merged back into editedItem object
-        this.item.keywords = []
+        //this.item.keywords = []
         this.item.doiIdentifiers = []
         this.item.primaryPublicationIdentifiers = []
         this.item.publicationIdentifiers = []
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index b711aad8..bafeee12 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -140,11 +140,10 @@
           <div v-html="markdownToHtml(item.dataUsagePolicy)" class="mave-score-set-abstract"></div>
         </div>
         <div v-else>Not specified</div>
-
-        <div v-if="item.keywords && item.keywords.length > 0">
-          <div class="mave-score-set-section-title">Keywords</div>
+        <div v-if="item.legacyKeywords && item.legacyKeywords.length > 0">
+          <div class="mave-score-set-section-title">Legacy Keywords</div>
           <div class="mave-score-set-keywords">
-            <a v-for="(keyword, i) in item.keywords" :key="i"
+            <a v-for="(keyword, i) in item.legacyKeywords" :key="i"
               :href="`${config.appBaseUrl}/#/search?search=${keyword}`">
               <Chip :label="keyword" />
             </a>
diff --git a/src/lib/item-types.js b/src/lib/item-types.js
index 4720aaac..fa87c8da 100644
--- a/src/lib/item-types.js
+++ b/src/lib/item-types.js
@@ -10,6 +10,46 @@ const itemTypes = {
       }
     }
   },
+  'controlled-keywords-endogenous-search': {
+    name: 'controlled-keyword-endogenous-locus-library-method', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/endogenous locus library method`
+      }
+    }
+  },
+  'controlled-keywords-invitro-search': {
+    name: 'controlled-keyword-in-vitro-construct-library-method', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/in vitro construct library method`
+      }
+    }
+  },
+  'controlled-keywords-variant-search': {
+    name: 'controlled-keyword-variant-library', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/variant library`
+      }
+    }
+  },
+  'controlled-keywords-phenotypic-search': {
+    name: 'controlled-keyword-phenotypic-assay', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/phenotypic assay`
+      }
+    }
+  },
   'doi-identifier-search': {
     name: 'doi-identifier', // TODO Redundant, change this structure
     restCollectionName: 'doi-identifiers',

From 022f7550557b2ca020a20307877b90e3f4d4d139 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Mon, 29 Apr 2024 20:11:04 +1000
Subject: [PATCH 02/17] Remove keyword from score set

---
 src/components/common/HighlightsView.vue  | 17 ++---------------
 src/components/screens/ScoreSetEditor.vue | 15 ---------------
 src/components/screens/ScoreSetView.vue   | 14 --------------
 3 files changed, 2 insertions(+), 44 deletions(-)

diff --git a/src/components/common/HighlightsView.vue b/src/components/common/HighlightsView.vue
index 19beaf87..3806a13a 100644
--- a/src/components/common/HighlightsView.vue
+++ b/src/components/common/HighlightsView.vue
@@ -94,11 +94,6 @@
                       :href="`${config.appBaseUrl}/#/publication-identifiers/${slotProps.data.dbName}/${slotProps.data[col.field]}`">{{
                         slotProps.data[col.field] }}</a>
                   </template>
-                  <!-- Link keywords and Doi Identifiers to an internal MaveDB search page -->
-                  <template v-else-if="this.field == 'keywords' && col.field == 'column'" #body="slotProps">
-                    <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
-                      slotProps.data[col.field] }}</a>
-                  </template>
                   <template v-else-if="this.field == 'doi-identifiers' && col.field == 'identifier'" #body="slotProps">
                     <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
                       slotProps.data[col.field] }}</a>
@@ -138,11 +133,6 @@
                       :href="`${config.appBaseUrl}/#/publication-identifiers/${slotProps.data.dbName}/${slotProps.data[col.field]}`">{{
                         slotProps.data[col.field] }}</a>
                   </template>
-                  <!-- Link keywords to an internal MaveDB search page -->
-                  <template v-else-if="this.field == 'keywords' && col.field == 'column'" #body="slotProps">
-                    <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
-                      slotProps.data[col.field] }}</a>
-                  </template>
                   <!-- Link out any URLs to the appropriate location -->
                   <template v-else-if="col.field == 'url'" #body="slotProps">
                     <a :href="`${slotProps.data.url}`" target="_blank">{{
@@ -200,7 +190,6 @@ export default defineComponent({
       },
 
       ScoreSet: {
-        keywords: { model: 'record', name: 'score-set', field: 'keywords' },
         'publication-identifiers': { model: 'record', name: 'score-set', field: 'publication-identifiers' },
         'doi-identifiers': { model: 'record', name: 'score-set', field: 'doi-identifiers' },
       },
@@ -222,9 +211,8 @@ export default defineComponent({
       'refseq-identifier': 'RefSeq ID',
       'ensembl-identifier': 'Ensembl ID',
     }
-    const scoreSetLeaderboardFields = ['keywords', 'publication-identifiers', 'doi-identifiers']
+    const scoreSetLeaderboardFields = ['publication-identifiers', 'doi-identifiers']
     const scoreSetLeaderboardFieldTitles = {
-      keywords: 'Keyword',
       'publication-identifiers': 'Publication ID',
       'doi-identifiers': 'DOI',
     }
@@ -269,12 +257,11 @@ export default defineComponent({
         'ensembl-identifier': [{ field: 'identifier', header: 'Ensembl Id', width: '25%' }, { field: 'count', header: 'Associated Score Sets', width: '20%' }, { field: 'url', header: 'URL', width: '55%' }]
       },
       scoreSetLeaderboardColumns: {
-        keywords: [{ field: 'column', header: 'Keyword', width: '50%' }, { field: 'count', header: 'Associated Score Sets', width: '50%' }],
         'publication-identifiers': [{ field: 'identifier', header: 'Identifier', width: '7.5%' }, { field: 'count', header: 'Associated Score Sets', width: '12.5%' }, { field: 'title', header: 'Title', width: '47%' }, { field: 'url', header: 'URL', width: '33%' }],
         'doi-identifiers': [{ field: 'identifier', header: 'Identifier', width: '33%' }, { field: 'count', header: 'Associated Score Sets', width: '33%' }, { field: 'url', header: 'URL', width: '33%' }]
       },
       experimentLeaderboardColumns: {
-        keywords: [{ field: 'column', header: 'Keyword' }, { field: 'count', header: 'Associated Score Sets' }],
+        'keywords': [{ field: 'column', header: 'Keyword' }, { field: 'count', header: 'Associated Score Sets' }],
         'raw-read-identifiers': [{ field: 'identifier', header: 'Raw Read Identifier' }, { field: 'count', header: 'Associated Score Sets' }, { field: 'url', header: 'URL' }],
         'publication-identifiers': [{ field: 'identifier', header: 'Identifier' }, { field: 'count', header: 'Associated Score Sets' }, { field: 'title', header: 'Title' }, { field: 'url', header: 'URL' }],
         'doi-identifiers': [{ field: 'identifier', header: 'Identifier' }, { field: 'count', header: 'Associated Score Sets' }, { field: 'url', header: 'URL' }]
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 8e03f4ac..52e25ccb 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -142,15 +142,6 @@
                   Choosing a license with these restrictions may cause your dataset to be excluded from data federation
                   and aggregation by MaveDB collaborators.
                 </Message>
-                <!--
-                <div class="field">
-                  <span class="p-float-label">
-                    <Chips v-model="keywords" :id="$scopedId('input-keywords')" :addOnBlur="true"
-                      :allowDuplicate="false" />
-                    <label :for="$scopedId('input-keywords')">Keywords</label>
-                  </span>
-                  <span v-if="validationErrors.keywords" class="mave-field-error">{{ validationErrors.keywords }}</span>
-                </div>-->
                 <div class="field">
                   <span class="p-float-label">
                     <Chips
@@ -714,7 +705,6 @@ export default {
     shortDescription: null,
     abstractText: null,
     methodText: null,
-    //keywords: [],
     doiIdentifiers: [],
     primaryPublicationIdentifiers: [],
     secondaryPublicationIdentifiers: [],
@@ -1035,7 +1025,6 @@ export default {
 
     populateExperimentMetadata: function (event) {
       this.doiIdentifiers = event.value.doiIdentifiers
-      //this.keywords = event.value.keywords
       this.publicationIdentifiers = _.concat(event.value.primaryPublicationIdentifiers, event.value.secondaryPublicationIdentifiers)
       this.primaryPublicationIdentifiers = event.value.primaryPublicationIdentifiers.filter((primary) => {
         return this.publicationIdentifiers.some((publication) => {
@@ -1255,7 +1244,6 @@ export default {
         this.shortDescription = this.item.shortDescription
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
-        //this.keywords = this.item.keywords
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering a merged list of secondary and primary publication identifiers
@@ -1281,7 +1269,6 @@ export default {
         this.shortDescription = null
         this.abstractText = null
         this.methodText = null
-        //this.keywords = []
         this.doiIdentifiers = []
         this.primaryPublicationIdentifiers = []
         this.secondaryPublicationIdentifiers = []
@@ -1370,7 +1357,6 @@ export default {
         shortDescription: this.shortDescription,
         abstractText: this.abstractText,
         methodText: this.methodText,
-        //keywords: this.keywords,
         doiIdentifiers: this.doiIdentifiers.map((identifier) => _.pick(identifier, 'identifier')),
         primaryPublicationIdentifiers: primaryPublicationIdentifiers,
         secondaryPublicationIdentifiers: secondaryPublicationIdentifiers,
@@ -1385,7 +1371,6 @@ export default {
       }
       else {
         // empty item arrays so that deleted items aren't merged back into editedItem object
-        //this.item.keywords = []
         this.item.doiIdentifiers = []
         this.item.primaryPublicationIdentifiers = []
         this.item.publicationIdentifiers = []
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index bafeee12..b16254a8 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -140,15 +140,6 @@
           <div v-html="markdownToHtml(item.dataUsagePolicy)" class="mave-score-set-abstract"></div>
         </div>
         <div v-else>Not specified</div>
-        <div v-if="item.legacyKeywords && item.legacyKeywords.length > 0">
-          <div class="mave-score-set-section-title">Legacy Keywords</div>
-          <div class="mave-score-set-keywords">
-            <a v-for="(keyword, i) in item.legacyKeywords" :key="i"
-              :href="`${config.appBaseUrl}/#/search?search=${keyword}`">
-              <Chip :label="keyword" />
-            </a>
-          </div>
-        </div>
         <div v-if="item.targetGenes">
           <div class="mave-score-set-section-title">Targets</div>
           <div v-for="targetGene of item.targetGenes" :key="targetGene">
@@ -722,11 +713,6 @@ export default {
   /*font-family: Helvetica, Verdana, Arial, sans-serif;*/
 }
 
-.mave-score-set-keywords .p-chip {
-  /*font-family: Helvetica, Verdana, Arial, sans-serif;*/
-  margin: 0 5px;
-}
-
 /* Formatting in Markdown blocks */
 
 .mave-score-set-abstract {

From 223dd35264c49bec2d7c8596a0492f26491a4de9 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Wed, 12 Jun 2024 09:08:51 +1000
Subject: [PATCH 03/17] Draft of new controlled keywords

---
 src/components/screens/ExperimentEditor.vue | 419 +++++++++++++++-----
 src/lib/item-types.js                       |  94 ++++-
 2 files changed, 407 insertions(+), 106 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index b9adc4ed..a95e35fa 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -57,64 +57,6 @@
                 </span>
                 <span v-if="validationErrors.shortDescription" class="mave-field-error">{{validationErrors.shortDescription}}</span>
               </div>
-
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="endogenousKeyword"
-                      :id="$scopedId('input-endogenous-locus-library-method-keywords')"
-                      :options="endogenousKeywordsOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 400px"
-                  />
-                  <label :for="$scopedId('input-endogenous-locus-library-method-keywords')">Endogenous Locus Library Method Keyword</label>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="invitroKeyword"
-                      :id="$scopedId('input-in-vitro-construct-library-method-keywords')"
-                      :options="invitroKeywordsOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 400px"
-                  />
-                  <label :for="$scopedId('input-in-vitro-construct-library-method-keywords')">In Vitro Construct Library Method Keyword</label>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>  
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="variantKeyword"
-                      :id="$scopedId('variant-library-keywords')"
-                      :options="variantKeywordsOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 400px"
-                  />
-                  <label :for="$scopedId('variant-library-keywords')">Variant Library Method Keyword</label>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>  
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="phenotypicKeyword"
-                      :id="$scopedId('phenotypic-assay-keywords')"
-                      :options="phenotypicKeywordsOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 400px"
-                  />
-                  <label :for="$scopedId('phenotypic-assay-keywords')">Phenotypic Assay Keyword</label>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-
               <div class="field">
                 <span class="p-float-label">
                   <Chips
@@ -232,12 +174,6 @@
                 </span>
                 <span v-if="validationErrors.extraMetadata" class="mave-field-error">{{validationErrors.extraMetadata}}</span>
               </div>
-            </template>
-          </Card>
-        </div>
-        <div class="col-12 md:col-6">
-          <Card>
-            <template #content>
               <div class="field">
                 <TabView>
                   <TabPanel header="Edit">
@@ -268,6 +204,188 @@
               </div>
             </template>
           </Card>
+        </div>
+        <div class="col-12 md:col-6">
+          <Card>
+            <template #content>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="variantLibraryKeyword"
+                      :id="$scopedId('input-variant-library-keywords')"
+                      :options="variantLibraryKeywordOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 500px"
+                  />
+                  <label :for="$scopedId('input-variant-library-keywords')">Variant Library Creation Method</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+              <div class="field">
+                <div v-if="variantLibraryKeyword==='Other'">
+                  <span class="p-float-label">
+                      <InputText v-model="variantLibraryKeywordDescription" :id="$scopedId('input-title')" style="width: 500px" required/>
+                      <label :for="$scopedId('input-title')">Variant Library Creation Method Description</label>
+                    </span>
+                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                </div>
+                <div v-else>
+                  <span class="p-float-label">
+                    <InputText v-model="variantLibraryKeywordDescription" :id="$scopedId('input-title')" style="width: 500px"/>
+                    <label :for="$scopedId('input-title')">Variant Library Creation Method Description (Optional)</label>
+                  </span>
+                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                </div>
+              </div>
+              <div v-if="variantLibraryKeyword === 'Endogenous locus library method'">
+                <div class="field">
+                  <span class="p-float-label">
+                    <Dropdown
+                        v-model="endogenousSystemKeyword"
+                        :id="$scopedId('input-endogenous-system-keywords')"
+                        :options="endogenousSystemKeywordOptions"
+                        optionLabel="value"
+                        optionValue="value"
+                        style="width: 400px"
+                    />
+                    <label :for="$scopedId('input-endogenous-system-keywords')">Endogenous Locus Library Method System</label>
+                  </span>
+                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                </div>
+                <div class="field">
+                  <span class="p-float-label">
+                    <Dropdown
+                        v-model="endogenousMechanismKeyword"
+                        :id="$scopedId('input-endogenous-mechanism-keywords')"
+                        :options="endogenousMechanismKeywordOptions"
+                        optionLabel="value"
+                        optionValue="value"
+                        style="width: 400px"
+                    />
+                    <label :for="$scopedId('input-endogenous-mechanism-keywords')">Endogenous Locus Library Method Mechanism</label>
+                  </span>
+                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                </div>
+              </div>
+              <div v-if="variantLibraryKeyword === 'In vitro construct library method'">
+                <div class="field">
+                  <span class="p-float-label">
+                    <Dropdown
+                        v-model="inVitroSystemKeyword"
+                        :id="$scopedId('input-in-vitro-system-keywords')"
+                        :options="inVitroSystemKeywordOptions"
+                        optionLabel="value"
+                        optionValue="value"
+                        style="width: 400px"
+                    />
+                    <label :for="$scopedId('input-in-vitro-system-keywords')">In Vitro Construct Library Method System</label>
+                  </span>
+                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                </div>
+                <div class="field">
+                  <span class="p-float-label">
+                    <Dropdown
+                        v-model="inVitroMechanismKeyword"
+                        :id="$scopedId('input-in-vitro-mechanism-keywords')"
+                        :options="inVitroMechanismKeywordOptions"
+                        optionLabel="value"
+                        optionValue="value"
+                        style="width: 400px"
+                    />
+                    <label :for="$scopedId('input-in-vitro-mechanism-keywords')">In Vitro Construct Library Method Mechanism</label>
+                  </span>
+                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                </div>  
+              </div>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="deliveryMethodKeyword"
+                      :id="$scopedId('delivery-method-keywords')"
+                      :options="deliveryMethodKeywordOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('delivery-method-keywords')">Delivery Method</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="phenotypicDimensionalityKeyword"
+                      :id="$scopedId('phenotypic-dimensionality-keywords')"
+                      :options="phenotypicDimensionalityKeywordOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('phenotypic-dimensionality-keywords')">Phenotypic Assay Dimensionality</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="phenotypicMethodKeyword"
+                      :id="$scopedId('phenotypic-method-keywords')"
+                      :options="phenotypicMethodKeywordOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('phenotypic-method-keywords')">Phenotypic Assay Method</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="phenotypicModelSystemKeyword"
+                      :id="$scopedId('phenotypic-model-system-keywords')"
+                      :options="phenotypicModelSystemKeywordOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('phenotypic-model-system-keywords')">Phenotypic Assay Model System</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="phenotypicProfilingStrategyKeyword"
+                      :id="$scopedId('phenotypic-profiling-strategy-keywords')"
+                      :options="phenotypicProfilingStrategyKeywordOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('phenotypic-profiling-strategy-keywords')">Phenotypic Assay Profiling Strategy</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+              <div class="field">
+                <span class="p-float-label">
+                  <Dropdown
+                      v-model="phenotypicSequencingTypeKeyword"
+                      :id="$scopedId('phenotypic-sequencing-type-keywords')"
+                      :options="phenotypicSequencingTypeKeywordOptions"
+                      optionLabel="value"
+                      optionValue="value"
+                      style="width: 400px"
+                  />
+                  <label :for="$scopedId('phenotypic-sequencing-type-keywords')">Phenotypic Assay Sequencing Read Type</label>
+                </span>
+                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+              </div>
+
+              
+            </template>
+          </Card>
           <Card v-if="item?.scoreSetUrns">
             <template #content>
               <div>{{item.scoreSetUrns?.length}} score sets loaded</div>
@@ -306,24 +424,47 @@ import config from '@/config'
 import {normalizeDoi, normalizePubmedId, normalizeRawRead, validateDoi, validatePubmedId, validateRawRead} from '@/lib/identifiers'
 import useFormatters from '@/composition/formatters'
 
+const controlledKeywordKeys = ['variantLibrary', 'endogenousSystem', 'endogenousMechanism', 'inVitroSystem', 'inVitroMechanism', 'deliveryMethod',
+  'phenotypicDimensionality', 'phenotypicMethod', 'phenotypicModelSystem', 'phenotypicProfilingStrategy', 'phenotypicSequencingType', 'phenotypicSequencingType'
+]
+
 export default {
   name: 'ExperimentEditor',
   components: { AutoComplete, Button, Card, Chips, Dropdown, Multiselect, DefaultLayout, EmailPrompt, FileUpload, InputText, ProgressSpinner, TabPanel, TabView, Textarea },
 
   setup: () => {
-    const endogenousKeywordsOptions = useItems({itemTypeName: `controlled-keywords-endogenous-search`})
-    const invitroKeywordsOptions = useItems({itemTypeName: `controlled-keywords-invitro-search`})
-    const variantKeywordsOptions = useItems({itemTypeName: `controlled-keywords-variant-search`})
-    const phenotypicKeywordsOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-search`})
+    const variantLibraryKeywordOptions = useItems({itemTypeName: `controlled-keywords-variant-search`})
+    const endogenousSystemKeywordOptions = useItems({itemTypeName: `controlled-keywords-endo-system-search`})
+    const endogenousMechanismKeywordOptions = useItems({itemTypeName: `controlled-keywords-endo-mechanism-search`})
+    const inVitroSystemKeywordOptions = useItems({itemTypeName: `controlled-keywords-in-vitro-system-search`})
+    const inVitroMechanismKeywordOptions = useItems({itemTypeName: `controlled-keywords-in-vitro-mechanism-search`})
+    const deliveryMethodKeywordOptions = useItems({itemTypeName: `controlled-keywords-delivery-search`})
+    const phenotypicDimensionalityKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-dimensionality-search`})
+    const phenotypicMethodKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-method-search`})
+    const phenotypicModelSystemKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-modle-system-search`})
+    const phenotypicProfilingStrategyKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-profiling-strategy-search`})
+    const phenotypicSequencingTypeKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-sequencing-type-search`})
+    // for (const key of controlledKeywordKeys) {
+    //   optionKey = `${key}KeywordOptions`
+    //   optionKey = useItems({ itemTypeName: `${key}-controlled-keywords-search` })
+    // }
+
     const publicationIdentifierSuggestions = useItems({itemTypeName: 'publication-identifier-search'})
     const externalPublicationIdentifierSuggestions = useItems({itemTypeName: 'external-publication-identifier-search'})
     return {
       ...useFormatters(),
       ...useItem({itemTypeName: 'experiment'}),
-      endogenousKeywordsOptions: endogenousKeywordsOptions.items,
-      invitroKeywordsOptions: invitroKeywordsOptions.items,
-      variantKeywordsOptions: variantKeywordsOptions.items,
-      phenotypicKeywordsOptions: phenotypicKeywordsOptions.items,
+      variantLibraryKeywordOptions: variantLibraryKeywordOptions.items,
+      endogenousSystemKeywordOptions: endogenousSystemKeywordOptions.items,
+      endogenousMechanismKeywordOptions: endogenousMechanismKeywordOptions.items,
+      inVitroSystemKeywordOptions: inVitroSystemKeywordOptions.items,
+      inVitroMechanismKeywordOptions: inVitroMechanismKeywordOptions.items,
+      deliveryMethodKeywordOptions: deliveryMethodKeywordOptions.items,
+      phenotypicDimensionalityKeywordOptions: phenotypicDimensionalityKeywordOptions.items,
+      phenotypicMethodKeywordOptions: phenotypicMethodKeywordOptions.items,
+      phenotypicModelSystemKeywordOptions: phenotypicModelSystemKeywordOptions.items,
+      phenotypicProfilingStrategyKeywordOptions: phenotypicProfilingStrategyKeywordOptions.items,
+      phenotypicSequencingTypeKeywordOptions: phenotypicSequencingTypeKeywordOptions.items,
       publicationIdentifierSuggestions: publicationIdentifierSuggestions.items,
       setPublicationIdentifierSearch: (text) => publicationIdentifierSuggestions.setRequestBody({text}),
       externalPublicationIdentifierSuggestions: externalPublicationIdentifierSuggestions.items,
@@ -348,11 +489,18 @@ export default {
     shortDescription: null,
     abstractText: null,
     methodText: null,
-    endogenousKeyword: null,
-    invitroKeyword: null,
-    variantKeyword: null,
-    phenotypicKeyword: null,
-    keywords: {},
+    variantLibraryKeyword: null,
+    endogenousSystemKeyword: null,
+    endogenousMechanismKeyword: null,
+    inVitroSystemKeyword: null,
+    inVitroMechanismKeyword: null,
+    deliveryMethodKeyword: null,
+    phenotypicDimensionalityKeyword: null,
+    phenotypicMethodKeyword: null,
+    phenotypicModelSystemKeyword: null,
+    phenotypicProfilingStrategyKeyword: null,
+    phenotypicSequencingTypeKeyword: null,
+    keywords: [],
     doiIdentifiers: [],
     primaryPublicationIdentifiers: [],
     secondaryPublicationIdentifiers: [],
@@ -396,6 +544,16 @@ export default {
         this.setItemId(this.itemId)
       },
       immediate: true
+    },
+    variantLibraryKeyword(newValue) {
+      if (newValue !== 'Endogenous locus library method') {
+        this.endogenousSystemKeyword = null
+        this.endogenousMechanismKeyword = null
+      }
+      if (newValue !== 'In vitro construct library method') {
+        this.inVitroSystemKeyword = null
+        this.inVitroMechanismKeyword = null
+      }
     }
   },
 
@@ -538,10 +696,17 @@ export default {
         this.shortDescription = this.item.shortDescription
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
-        this.endogenousKeyword = this.item.keywords["Endogenous Locus Library Method"].value
-        this.invitroKeyword = this.item.keywords["In Vitro Construct Library Method"].value
-        this.variantKeyword = this.item.keywords["Variant Library"].value
-        this.phenotypicKeyword = this.item.keywords["Phenotypic Assay"].value
+        this.variantLibraryKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").keyword.value
+        this.endogenousSystemKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method System").keyword.value
+        this.endogenousMechanismKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method Mechanism").keyword.value
+        this.inVitroSystemKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method System").keyword.value
+        this.inVitroMechanismKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method Mechanism").keyword.value
+        this.deliveryMethodKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Delivery method").keyword.value
+        this.phenotypicDimensionalityKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Dimensionality").keyword.value
+        this.phenotypicMethodKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Method").keyword.value
+        this.phenotypicModelSystemKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Model System").keyword.value
+        this.phenotypicProfilingStrategyKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Profiling Strategy").keyword.value
+        this.phenotypicSequencingTypeKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Sequencing Read Type").keyword.value
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering publication identifiers list for those publications we know to be
@@ -560,11 +725,18 @@ export default {
         this.shortDescription = null
         this.abstractText = null
         this.methodText = null
-        this.keywords = {}
-        this.endogenousKeyword = null
-        this.invitroKeyword = null
-        this.variantKeyword = null
-        this.phenotypicKeyword = null
+        this.keywords = []
+        this.variantLibraryKeyword = null
+        this.endogenousSystemKeyword = null
+        this.endogenousMechanismKeyword = null
+        this.inVitroSystemKeyword = null
+        this.inVitroMechanismKeyword = null
+        this.deliveryMethodKeyword = null
+        this.phenotypicDimensionalityKeyword = null
+        this.phenotypicMethodKeyword = null
+        this.phenotypicModelSystemKeyword = null
+        this.phenotypicProfilingStrategyKeyword = null
+        this.phenotypicSequencingTypeKeyword = null
         this.doiIdentifiers = []
         this.primaryPublicationIdentifiers = []
         this.secondaryPublicationIdentifiers = []
@@ -589,18 +761,77 @@ export default {
       ).filter(
           secondary => !primaryPublicationIdentifiers.some(primary => primary.identifier == secondary.identifier && primary.dbName == secondary.dbName)
       )
-
+      const combinedKeywords = []
+      const variantKeywords = []
+      if(this.item && this.variantLibraryKeyword === "Endogenous locus library method") {
+        variantKeywords = [{
+            "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
+            "description": this.variantLibraryKeywordDescription,
+          },
+          {
+            "keyword": {"key": "Endogenous Locus Library Method System", "value": this.endogenousSystemKeyword},
+            "description": this.endogenousSystemKeywordDescription,
+          },
+          {
+            "keyword": {"key": "Endogenous Locus Library Method Mechanism", "value": this.endogenousMechanismKeyword},
+            "description": this.endogenousMechanismKeywordDescription,
+          }
+        ]
+      }else if(this.item && this.variantLibraryKeyword === "In vitro construct library method"){
+        variantKeywords = [{
+            "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
+            "description": this.variantLibraryKeywordDescription,
+          },
+          {
+            "keyword": {"key": "In Vitro Construct Library Method System", "value": this.inVitroSystemKeyword},
+            "description": this.inVitroSystemKeywordDescription,
+          },
+          {
+            "keyword": {"key": "inVitroMechanismKeyword", "value": this.inVitroMechanismKeyword},
+            "description": this.inVitroMechanismKeywordDescription,
+          }
+        ]
+      }else if(this.item && this.variantLibraryKeyword === "Other"){
+        variantKeywords = [{
+            "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
+            "description": this.variantLibraryKeywordDescription,
+          }
+        ]
+      }
+      combinedKeywords.push(...variantKeywords)
+      const phenotypicKeywords = [
+        {
+          "keyword": {"key": "Delivery method", "value": this.deliveryMethodKeyword},
+          "description": this.deliveryMethodKeywordDescription,
+        },
+        {
+          "keyword": {"key": "Phenotypic Assay Dimensionality", "value": this.phenotypicDimensionalityKeyword},
+          "description": this.phenotypicDimensionalityKeywordDescription,
+        },
+        {
+          "keyword": {"key": "Phenotypic Assay Method", "value": this.phenotypicMethodKeyword},
+          "description": this.phenotypicMethodKeywordDescription,
+        },
+        {
+          "keyword": {"key": "Phenotypic Assay Model System", "value": this.phenotypicModelSystemKeyword},
+          "description": this.phenotypicModelSystemKeywordDescription,
+        },
+        {
+          "keyword": {"key": "Phenotypic Assay Profiling Strategy", "value": this.phenotypicProfilingStrategyKeyword},
+          "description": this.phenotypicProfilingStrategyKeywordDescription,
+        },
+        {
+          "keyword": {"key": "Phenotypic Assay Sequencing Read Type", "value": this.phenotypicSequencingTypeKeyword},
+          "description": this.phenotypicSequencingTypeKeywordDescription,
+        }
+      ]
+      combinedKeywords.push(...phenotypicKeywords)
       const editedFields = {
         title: this.title,
         shortDescription: this.shortDescription,
         abstractText: this.abstractText,
         methodText: this.methodText,
-        keywords: {
-          endogenousKeyword: {"key": "Endogenous Locus Library Method", "value": this.endogenousKeyword},
-          invitroKeyword: {"key": "In Vitro Construct Library Method", "value": this.invitroKeyword},
-          variantKeyword: {"key": "Variant Library", "value": this.variantKeyword},
-          phenotypicKeyword: {"key": "Phenotypic Assay", "value": this.phenotypicKeyword}
-        },
+        keywords: this.combinedKeywords,
         doiIdentifiers: this.doiIdentifiers.map((identifier) => _.pick(identifier, 'identifier')),
         primaryPublicationIdentifiers: primaryPublicationIdentifiers,
         secondaryPublicationIdentifiers: secondaryPublicationIdentifiers,
@@ -609,7 +840,7 @@ export default {
       }
       // empty item arrays so that deleted items aren't merged back into editedItem object
       if(this.item) {
-        this.item.keywords = {}
+        this.item.keywords = []
         this.item.doiIdentifiers = []
         this.item.publicationIdentifiers = []
         this.item.primaryPublicationIdentifiers = []
diff --git a/src/lib/item-types.js b/src/lib/item-types.js
index fa87c8da..8a2b29e4 100644
--- a/src/lib/item-types.js
+++ b/src/lib/item-types.js
@@ -10,43 +10,113 @@ const itemTypes = {
       }
     }
   },
-  'controlled-keywords-endogenous-search': {
-    name: 'controlled-keyword-endogenous-locus-library-method', 
+  'controlled-keywords-variant-search': {
+    name: 'controlled-keywords-variant-library-search', 
     restCollectionName: 'controlled-keywords',
     httpOptions: {
       list: {
         method: 'get',
-        url: `${config.apiBaseUrl}/controlled-keywords/endogenous locus library method`
+        url: `${config.apiBaseUrl}/controlled-keywords/variant library creation method`
       }
     }
   },
-  'controlled-keywords-invitro-search': {
-    name: 'controlled-keyword-in-vitro-construct-library-method', 
+  'controlled-keywords-endo-system-search': {
+    name: 'controlled-keyword-endogenous-locus-library-method-system', 
     restCollectionName: 'controlled-keywords',
     httpOptions: {
       list: {
         method: 'get',
-        url: `${config.apiBaseUrl}/controlled-keywords/in vitro construct library method`
+        url: `${config.apiBaseUrl}/controlled-keywords/endogenous locus library method system`
       }
     }
   },
-  'controlled-keywords-variant-search': {
-    name: 'controlled-keyword-variant-library', 
+  'controlled-keywords-endo-mechanism-search': {
+    name: 'controlled-keywords-endogenous-locus-library-method-mechanism', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/endogenous locus library method mechanism`
+      }
+    }
+  },
+  'controlled-keywords-in-vitro-system-search': {
+    name: 'controlled-keywords-in-vitro-construct-library-method-system', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/in vitro construct library method system`
+      }
+    }
+  },
+  'controlled-keywords-in-vitro-mechanism-search': {
+    name: 'controlled-keywords-in-vitro-construct-library-method-mechanism', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/in vitro construct library method mechanism`
+      }
+    }
+  },
+  'controlled-keywords-delivery-search': {
+    name: 'controlled-keywords-delivery-method', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/delivery method`
+      }
+    }
+  },
+  'controlled-keywords-phenotypic-dimensionality-search': {
+    name: 'controlled-keywords-phenotypic-assay-dimensionality', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/phenotypic assay dimensionality`
+      }
+    }
+  },
+  'controlled-keywords-phenotypic-method-search': {
+    name: 'controlled-keywords-phenotypic-assay-method', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/phenotypic assay method`
+      }
+    }
+  },
+  'controlled-keywords-phenotypic-modle-system-search': {
+    name: 'controlled-keywords-phenotypic-assay-model-system', 
+    restCollectionName: 'controlled-keywords',
+    httpOptions: {
+      list: {
+        method: 'get',
+        url: `${config.apiBaseUrl}/controlled-keywords/phenotypic assay model system`
+      }
+    }
+  },
+  'controlled-keywords-phenotypic-profiling-strategy-search': {
+    name: 'controlled-keywords-phenotypic-assay-profiling-strategy', 
     restCollectionName: 'controlled-keywords',
     httpOptions: {
       list: {
         method: 'get',
-        url: `${config.apiBaseUrl}/controlled-keywords/variant library`
+        url: `${config.apiBaseUrl}/controlled-keywords/phenotypic assay profiling strategy`
       }
     }
   },
-  'controlled-keywords-phenotypic-search': {
-    name: 'controlled-keyword-phenotypic-assay', 
+  'controlled-keywords-phenotypic-sequencing-type-search': {
+    name: 'controlled-keywords-phenotypic-assay-sequencing-read-type', 
     restCollectionName: 'controlled-keywords',
     httpOptions: {
       list: {
         method: 'get',
-        url: `${config.apiBaseUrl}/controlled-keywords/phenotypic assay`
+        url: `${config.apiBaseUrl}/controlled-keywords/phenotypic assay sequencing read type`
       }
     }
   },

From 4dcf4bdb430e6d238e260314b9fdf77dec6aa3f5 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Mon, 24 Jun 2024 16:42:08 +1000
Subject: [PATCH 04/17] Modify controlled keywords part and remove keywords
 from creating score set

---
 src/components/screens/ExperimentEditor.vue | 224 ++++++++++++++++----
 src/components/screens/ExperimentView.vue   |  20 +-
 src/components/screens/ScoreSetCreator.vue  |  26 +--
 3 files changed, 204 insertions(+), 66 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index a95e35fa..22ba3286 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -208,6 +208,7 @@
         <div class="col-12 md:col-6">
           <Card>
             <template #content>
+              <div class="field">Please click <Button icon="pi pi-plus" aria-label="Filter" size="small"/> if you  would like to add a description. </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
@@ -216,27 +217,19 @@
                       :options="variantLibraryKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 500px"
+                      style="width: 450px"
                   />
                   <label :for="$scopedId('input-variant-library-keywords')">Variant Library Creation Method</label>
+                  &nbsp;<Button :icon="(keywordTextVisible['variantLibrary'] || variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('variantLibrary')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
-              <div class="field">
-                <div v-if="variantLibraryKeyword==='Other'">
-                  <span class="p-float-label">
-                      <InputText v-model="variantLibraryKeywordDescription" :id="$scopedId('input-title')" style="width: 500px" required/>
-                      <label :for="$scopedId('input-title')">Variant Library Creation Method Description</label>
-                    </span>
-                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
-                </div>
-                <div v-else>
-                  <span class="p-float-label">
-                    <InputText v-model="variantLibraryKeywordDescription" :id="$scopedId('input-title')" style="width: 500px"/>
-                    <label :for="$scopedId('input-title')">Variant Library Creation Method Description (Optional)</label>
-                  </span>
-                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
-                </div>
+              <div class="field" v-if="keywordTextVisible['variantLibrary'] || variantLibraryKeyword==='Other'">
+                <span class="p-float-label">
+                  <Textarea v-model="variantLibraryKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Variant Library Creation Method Description {{variantLibraryKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                </span>
+                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
               </div>
               <div v-if="variantLibraryKeyword === 'Endogenous locus library method'">
                 <div class="field">
@@ -247,12 +240,20 @@
                         :options="endogenousSystemKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 400px"
+                        style="width: 450px"
                     />
                     <label :for="$scopedId('input-endogenous-system-keywords')">Endogenous Locus Library Method System</label>
+                    &nbsp;<Button :icon="(keywordTextVisible['endogenousSystem']  || endogenousSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('endogenousSystem')" aria-label="Filter" size="large"/>
                   </span>
                   <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
                 </div>
+                <div class="field" v-if="keywordTextVisible['endogenousSystem'] || endogenousSystemKeyword==='Other'">
+                  <span class="p-float-label">
+                    <Textarea v-model="endogenousSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method System Description {{endogenousSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                  </span>
+                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                </div>
                 <div class="field">
                   <span class="p-float-label">
                     <Dropdown
@@ -261,12 +262,20 @@
                         :options="endogenousMechanismKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 400px"
+                        style="width: 450px"
                     />
                     <label :for="$scopedId('input-endogenous-mechanism-keywords')">Endogenous Locus Library Method Mechanism</label>
+                    &nbsp;<Button :icon="(keywordTextVisible['endogenousMechanism'] || endogenousMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('endogenousMechanism')" aria-label="Filter" size="large"/>
                   </span>
                   <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
                 </div>
+                <div class="field" v-if="keywordTextVisible['endogenousMechanism'] || endogenousMechanismKeyword==='Other'">
+                  <span class="p-float-label">
+                    <Textarea v-model="endogenousMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method Mechanism Description {{endogenousMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                  </span>
+                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                </div>
               </div>
               <div v-if="variantLibraryKeyword === 'In vitro construct library method'">
                 <div class="field">
@@ -277,12 +286,20 @@
                         :options="inVitroSystemKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 400px"
+                        style="width: 450px"
                     />
                     <label :for="$scopedId('input-in-vitro-system-keywords')">In Vitro Construct Library Method System</label>
+                    &nbsp;<Button :icon="(keywordTextVisible['inVitroSystem'] || inVitroSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('inVitroSystem')" aria-label="Filter" size="large"/>
                   </span>
                   <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
                 </div>
+                <div class="field" v-if="keywordTextVisible['inVitroSystem'] || inVitroSystemKeyword==='Other'">
+                  <span class="p-float-label">
+                    <Textarea v-model="inVitroSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method System Description {{inVitroSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                  </span>
+                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                </div>
                 <div class="field">
                   <span class="p-float-label">
                     <Dropdown
@@ -291,12 +308,20 @@
                         :options="inVitroMechanismKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 400px"
+                        style="width: 450px"
                     />
                     <label :for="$scopedId('input-in-vitro-mechanism-keywords')">In Vitro Construct Library Method Mechanism</label>
+                    &nbsp;<Button :icon="(keywordTextVisible['inVitroMechanism'] || inVitroMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('inVitroMechanism')" aria-label="Filter" size="large"/>
                   </span>
                   <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
                 </div>  
+                <div class="field" v-if="keywordTextVisible['inVitroMechanism'] || inVitroMechanismKeyword==='Other'">
+                  <span class="p-float-label">
+                    <Textarea v-model="inVitroMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method Mechanism Description {{inVitroMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                  </span>
+                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                </div>
               </div>
               <div class="field">
                 <span class="p-float-label">
@@ -306,12 +331,20 @@
                       :options="deliveryMethodKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 400px"
+                      style="width: 450px"
                   />
                   <label :for="$scopedId('delivery-method-keywords')">Delivery Method</label>
+                  &nbsp;<Button :icon="(keywordTextVisible['deliveryMethod'] || deliveryMethodKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('deliveryMethod')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
+              <div class="field" v-if="keywordTextVisible['deliveryMethod'] || deliveryMethodKeyword==='Other'">
+                <span class="p-float-label">
+                  <Textarea v-model="deliveryMethodKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Delivery Method Description {{deliveryMethodKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                </span>
+                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+              </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
@@ -320,12 +353,20 @@
                       :options="phenotypicDimensionalityKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 400px"
+                      style="width: 450px"
                   />
                   <label :for="$scopedId('phenotypic-dimensionality-keywords')">Phenotypic Assay Dimensionality</label>
+                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicDimensionality'] || phenotypicDimensionalityKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicDimensionality')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
+              <div class="field" v-if="keywordTextVisible['phenotypicDimensionality'] || phenotypicDimensionalityKeyword==='Other'">
+                <span class="p-float-label">
+                  <Textarea v-model="phenotypicDimensionalityKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Phenotypic Assay Dimensionality Description {{phenotypicDimensionalityKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                </span>
+                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+              </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
@@ -334,12 +375,20 @@
                       :options="phenotypicMethodKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 400px"
+                      style="width: 450px"
                   />
                   <label :for="$scopedId('phenotypic-method-keywords')">Phenotypic Assay Method</label>
+                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicMethod'] || phenotypicMethodKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicMethod')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
+              <div class="field" v-if="keywordTextVisible['phenotypicMethod'] || phenotypicMethodKeyword==='Other'">
+                <span class="p-float-label">
+                  <Textarea v-model="phenotypicMethodKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Phenotypic Assay Method Description {{phenotypicMethodKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                </span>
+                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+              </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
@@ -348,12 +397,20 @@
                       :options="phenotypicModelSystemKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 400px"
+                      style="width: 450px"
                   />
                   <label :for="$scopedId('phenotypic-model-system-keywords')">Phenotypic Assay Model System</label>
+                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicModelSystem'] || phenotypicModelSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicModelSystem')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
+              <div class="field" v-if="keywordTextVisible['phenotypicModelSystem'] || phenotypicModelSystemKeyword==='Other'">
+                <span class="p-float-label">
+                  <Textarea v-model="phenotypicModelSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Phenotypic Assay Model System Description {{phenotypicModelSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                </span>
+                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+              </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
@@ -362,12 +419,20 @@
                       :options="phenotypicProfilingStrategyKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 400px"
+                      style="width: 450px"
                   />
                   <label :for="$scopedId('phenotypic-profiling-strategy-keywords')">Phenotypic Assay Profiling Strategy</label>
+                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicProfilingStrategy'] || phenotypicProfilingStrategyKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicProfilingStrategy')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
+              <div class="field" v-if="keywordTextVisible['phenotypicProfilingStrategy'] || phenotypicProfilingStrategyKeyword==='Other'">
+                <span class="p-float-label">
+                  <Textarea v-model="phenotypicProfilingStrategyKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Phenotypic Assay Profiling Strategy Description {{phenotypicProfilingStrategyKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                </span>
+                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+              </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
@@ -376,14 +441,20 @@
                       :options="phenotypicSequencingTypeKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 400px"
+                      style="width: 450px"
                   />
                   <label :for="$scopedId('phenotypic-sequencing-type-keywords')">Phenotypic Assay Sequencing Read Type</label>
+                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicSequencingType'] || phenotypicSequencingTypeKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicSequencingType')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
-
-              
+              <div class="field" v-if="keywordTextVisible['phenotypicSequencingType'] || phenotypicSequencingTypeKeyword==='Other'">
+                <span class="p-float-label">
+                  <Textarea v-model="phenotypicSequencingTypeKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Phenotypic Assay Sequencing Read Type Description {{phenotypicSequencingTypeKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                </span>
+                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+              </div>
             </template>
           </Card>
           <Card v-if="item?.scoreSetUrns">
@@ -490,17 +561,41 @@ export default {
     abstractText: null,
     methodText: null,
     variantLibraryKeyword: null,
+    variantLibraryKeywordDescription: null,
     endogenousSystemKeyword: null,
+    endogenousSystemKeywordDescription: null,
     endogenousMechanismKeyword: null,
+    endogenousMechanismKeywordDescription: null,
     inVitroSystemKeyword: null,
+    inVitroSystemKeywordDescription: null,
     inVitroMechanismKeyword: null,
+    inVitroMechanismKeywordDescription: null,
     deliveryMethodKeyword: null,
+    deliveryMethodKeywordDescription: null,
     phenotypicDimensionalityKeyword: null,
+    phenotypicDimensionalityKeywordDescription: null,
     phenotypicMethodKeyword: null,
+    phenotypicMethodKeywordDescription: null,
     phenotypicModelSystemKeyword: null,
+    phenotypicModelSystemKeywordDescription: null,
     phenotypicProfilingStrategyKeyword: null,
+    phenotypicProfilingStrategyKeywordDescription: null,
     phenotypicSequencingTypeKeyword: null,
+    phenotypicSequencingTypeKeywordDescription: null,
     keywords: [],
+    keywordTextVisible:{
+        variantLibrary: false,
+        endogenousSystem: false,
+        endogenousMechanism: false,
+        inVitroSystem: false,
+        inVitroMechanism: false,
+        deliveryMethod: false,
+        phenotypicDimensionality: false,
+        phenotypicMethod: false,
+        phenotypicModelSystem: false,
+        phenotypicProfilingStrategy: false,
+        phenotypicSequencingType: false
+      },
     doiIdentifiers: [],
     primaryPublicationIdentifiers: [],
     secondaryPublicationIdentifiers: [],
@@ -697,16 +792,51 @@ export default {
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
         this.variantLibraryKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").keyword.value
-        this.endogenousSystemKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method System").keyword.value
-        this.endogenousMechanismKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method Mechanism").keyword.value
-        this.inVitroSystemKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method System").keyword.value
-        this.inVitroMechanismKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method Mechanism").keyword.value
+        this.variantLibraryKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").description
+        const endogenousSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method System")
+        if (endogenousSystemKeywordObj) {
+          this.endogenousSystemKeyword = endogenousSystemKeywordObj.keyword.value
+          this.endogenousSystemKeywordDescription = endogenousSystemKeywordObj.description
+        } else {
+          this.endogenousSystemKeyword = null
+          this.endogenousSystemKeywordDescription = null
+        }
+        const endogenousMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method Mechanism")
+        if (endogenousMechanismKeywordObj) {
+          this.endogenousMechanismKeyword = endogenousMechanismKeywordObj.keyword.value
+          this.endogenousMechanismKeywordDescription = endogenousMechanismKeywordObj.description
+        } else {
+          this.endogenousMechanismKeyword = null
+          this.endogenousMechanismKeywordDescription = null
+        }
+        const inVitroSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method System")
+        if (inVitroSystemKeywordObj) {
+          this.inVitroSystemKeyword = inVitroSystemKeywordObj.keyword.value
+          this.inVitroSystemKeywordDescription = inVitroSystemKeywordObj.description
+        } else {
+          this.inVitroSystemKeyword = null
+          this.inVitroSystemKeywordDescription = null
+        }
+        const inVitroMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method Mechanism")
+        if (inVitroMechanismKeywordObj) {
+          this.inVitroMechanismKeyword = inVitroMechanismKeywordObj.keyword.value
+          this.inVitroMechanismKeywordDescription = inVitroMechanismKeywordObj.description
+        } else{
+          this.inVitroMechanismKeyword = null
+          this.inVitroMechanismKeywordDescription = null
+        }
         this.deliveryMethodKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Delivery method").keyword.value
+        this.deliveryMethodKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Delivery method").description
         this.phenotypicDimensionalityKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Dimensionality").keyword.value
+        this.phenotypicDimensionalityKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Dimensionality").description
         this.phenotypicMethodKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Method").keyword.value
+        this.phenotypicMethodKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Method").description
         this.phenotypicModelSystemKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Model System").keyword.value
+        this.phenotypicModelSystemKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Model System").description
         this.phenotypicProfilingStrategyKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Profiling Strategy").keyword.value
+        this.phenotypicProfilingStrategyKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Profiling Strategy").description
         this.phenotypicSequencingTypeKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Sequencing Read Type").keyword.value
+        this.phenotypicSequencingTypeKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Sequencing Read Type").description
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering publication identifiers list for those publications we know to be
@@ -727,16 +857,27 @@ export default {
         this.methodText = null
         this.keywords = []
         this.variantLibraryKeyword = null
+        this.variantLibraryKeywordDescription = null
         this.endogenousSystemKeyword = null
+        this.endogenousSystemKeywordDescription = null
         this.endogenousMechanismKeyword = null
+        this.endogenousMechanismKeywordDescription = null
         this.inVitroSystemKeyword = null
+        this.inVitroSystemKeywordDescription = null
         this.inVitroMechanismKeyword = null
+        this.inVitroMechanismKeywordDescription = null
         this.deliveryMethodKeyword = null
+        this.deliveryMethodKeywordDescription = null
         this.phenotypicDimensionalityKeyword = null
+        this.phenotypicDimensionalityKeywordDescription = null
         this.phenotypicMethodKeyword = null
+        this.phenotypicMethodKeywordDescription = null
         this.phenotypicModelSystemKeyword = null
+        this.phenotypicModelSystemKeywordDescription = null
         this.phenotypicProfilingStrategyKeyword = null
+        this.phenotypicProfilingStrategyKeywordDescription = null
         this.phenotypicSequencingTypeKeyword = null
+        this.phenotypicSequencingTypeKeywordDescription = null
         this.doiIdentifiers = []
         this.primaryPublicationIdentifiers = []
         this.secondaryPublicationIdentifiers = []
@@ -762,8 +903,8 @@ export default {
           secondary => !primaryPublicationIdentifiers.some(primary => primary.identifier == secondary.identifier && primary.dbName == secondary.dbName)
       )
       const combinedKeywords = []
-      const variantKeywords = []
-      if(this.item && this.variantLibraryKeyword === "Endogenous locus library method") {
+      let variantKeywords = []
+      if(this.variantLibraryKeyword === "Endogenous locus library method") {
         variantKeywords = [{
             "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
             "description": this.variantLibraryKeywordDescription,
@@ -777,7 +918,7 @@ export default {
             "description": this.endogenousMechanismKeywordDescription,
           }
         ]
-      }else if(this.item && this.variantLibraryKeyword === "In vitro construct library method"){
+      }else if(this.variantLibraryKeyword === "In vitro construct library method"){
         variantKeywords = [{
             "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
             "description": this.variantLibraryKeywordDescription,
@@ -787,11 +928,11 @@ export default {
             "description": this.inVitroSystemKeywordDescription,
           },
           {
-            "keyword": {"key": "inVitroMechanismKeyword", "value": this.inVitroMechanismKeyword},
+            "keyword": {"key": "In Vitro Construct Library Method Mechanism", "value": this.inVitroMechanismKeyword},
             "description": this.inVitroMechanismKeywordDescription,
           }
         ]
-      }else if(this.item && this.variantLibraryKeyword === "Other"){
+      }else if(this.variantLibraryKeyword === "Other"){
         variantKeywords = [{
             "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
             "description": this.variantLibraryKeywordDescription,
@@ -826,12 +967,13 @@ export default {
         }
       ]
       combinedKeywords.push(...phenotypicKeywords)
+      this.keywords = combinedKeywords
       const editedFields = {
         title: this.title,
         shortDescription: this.shortDescription,
         abstractText: this.abstractText,
         methodText: this.methodText,
-        keywords: this.combinedKeywords,
+        keywords: this.keywords,
         doiIdentifiers: this.doiIdentifiers.map((identifier) => _.pick(identifier, 'identifier')),
         primaryPublicationIdentifiers: primaryPublicationIdentifiers,
         secondaryPublicationIdentifiers: secondaryPublicationIdentifiers,
@@ -848,7 +990,7 @@ export default {
       }
 
       const editedItem = _.merge({}, this.item || {}, editedFields)
-
+      console.log(editedItem)
       let response
       try {
         if (this.item) {
@@ -931,6 +1073,10 @@ export default {
 
     get(...args) {
       return _.get(...args)
+    },
+
+    keywordToggleInput: function(field) {
+      this.keywordTextVisible[field] = !this.keywordTextVisible[field]
     }
 
   }
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index 307fc53e..af143b59 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -87,7 +87,16 @@
         <div v-if="item.keywords && Object.keys(item.keywords).length > 0">
           <div class="mave-score-set-section-title">Keywords</div>
           <div class="mave-score-set-keywords">
-            <li v-for="(value, key) in item.keywords" :key="key"> {{ key }}: <a :href="`https://www.mavedb.org/search/?keywords=${value.value}`">{{ value.value }}</a></li>
+            <li v-for="(keyword, index) in item.keywords" :key="index">
+              {{ keyword.keyword.key }}
+              <i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(index)"/>
+              <Dialog v-model:visible="dialogVisible[index]" modal header="Description" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+                <p class="m-0">
+                  {{ keyword.keyword.description }}
+                </p>
+                <div v-if="keyword.description">Extra description: {{ keyword.description }}</div>
+              </Dialog> : <a :href="`https://www.mavedb.org/search/?keywords=${keyword.keyword.value}`">{{ keyword.keyword.value }}</a>
+            </li>
           </div>
         </div>
         <div class="mave-score-set-section-title">Scoreset Targets</div>
@@ -183,16 +192,19 @@ import {marked} from 'marked'
 import Button from 'primevue/button'
 import Chip from 'primevue/chip'
 import DefaultLayout from '@/components/layout/DefaultLayout'
+import Dialog from 'primevue/dialog'
 import PageLoading from '@/components/common/PageLoading'
+import PrimeIcons from 'primevue/api'
 import ItemNotFound from '@/components/common/ItemNotFound'
 import useAuth from '@/composition/auth'
 import useItem from '@/composition/item'
 import useFormatters from '@/composition/formatters'
 import config from '@/config'
+import 'primeicons/primeicons.css'
 
 export default {
   name: 'ExperimentView',
-  components: { Button, DefaultLayout, PageLoading, ItemNotFound },
+  components: { Button, DefaultLayout, Dialog, PageLoading, ItemNotFound, PrimeIcons },
 
   setup: () => {
     const {userIsAuthenticated} = useAuth()
@@ -214,6 +226,7 @@ export default {
 
   data: () => ({
     associatedScoreSets: [],
+    dialogVisible: [],
     readMore: true
   }),
 
@@ -295,6 +308,9 @@ export default {
       this.readMore = true
       return this.readMore
     },
+    showDialog: function (index) {
+      this.dialogVisible[index] = true
+    }
   }
 }
 
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index e54ef84f..b0d750d6 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -308,24 +308,6 @@
                         validationErrors.dataUsagePolicy }}</span>
                     </div>
                   </div>
-                  <div class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label>
-                        An optional list of keywords that describe the experimental design of the score set. Score sets can be searched by keyword.
-                      </label>
-                      <div class="mavedb-help-small">
-                        Examples: SGE, barcode sequencing, MPRA, complementation
-                      </div>
-                    </div>
-                    <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
-                        <Chips v-model="keywords" :id="$scopedId('input-keywords')" :addOnBlur="true"
-                          :allowDuplicate="false" />
-                        <label :for="$scopedId('input-keywords')">Keywords</label>
-                        <span v-if="validationErrors.keywords" class="mave-field-error">{{ validationErrors.keywords }}</span>
-                      </span>
-                    </div>
-                  </div>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
                       <label>
@@ -934,7 +916,6 @@ export default {
     shortDescription: null,
     abstractText: null,
     methodText: null,
-    keywords: [],
     doiIdentifiers: [],
     primaryPublicationIdentifiers: [],
     secondaryPublicationIdentifiers: [],
@@ -993,7 +974,7 @@ export default {
     stepFields: [
       ['experiment', 'supersededScoreSetUrn', 'metaAnalyzesScoreSetUrns'],
       [
-        'title', 'shortDescription', 'methodText', 'abstractText', 'keywords',
+        'title', 'shortDescription', 'methodText', 'abstractText',
         'publicationIdentifiers', 'primaryPublicationIdentifiers', 'extraMetadata', 'dataUsagePolicy'
       ],
       ['targetGene', 'targetGenes'],
@@ -1357,7 +1338,6 @@ export default {
     populateExperimentMetadata: function (event) {
       this.abstractText = event.value.abstractText
       this.doiIdentifiers = event.value.doiIdentifiers
-      this.keywords = event.value.keywords
       this.publicationIdentifiers = _.concat(event.value.primaryPublicationIdentifiers, event.value.secondaryPublicationIdentifiers)
       this.primaryPublicationIdentifiers = event.value.primaryPublicationIdentifiers.filter((primary) => {
         return this.publicationIdentifiers.some((publication) => {
@@ -1577,7 +1557,6 @@ export default {
         this.shortDescription = this.item.shortDescription
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
-        this.keywords = this.item.keywords
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering a merged list of secondary and primary publication identifiers
@@ -1603,7 +1582,6 @@ export default {
         this.shortDescription = null
         this.abstractText = null
         this.methodText = null
-        this.keywords = []
         this.doiIdentifiers = []
         this.primaryPublicationIdentifiers = []
         this.secondaryPublicationIdentifiers = []
@@ -1692,7 +1670,6 @@ export default {
         shortDescription: this.shortDescription,
         abstractText: this.abstractText,
         methodText: this.methodText,
-        keywords: this.keywords,
         doiIdentifiers: this.doiIdentifiers.map((identifier) => _.pick(identifier, 'identifier')),
         primaryPublicationIdentifiers: primaryPublicationIdentifiers,
         secondaryPublicationIdentifiers: secondaryPublicationIdentifiers,
@@ -1707,7 +1684,6 @@ export default {
       }
       else {
         // empty item arrays so that deleted items aren't merged back into editedItem object
-        this.item.keywords = []
         this.item.doiIdentifiers = []
         this.item.primaryPublicationIdentifiers = []
         this.item.publicationIdentifiers = []

From 7959c3d338f78efb1c653afc6c2851901352d073 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Tue, 25 Jun 2024 14:45:15 +1000
Subject: [PATCH 05/17] Fix a wrong import

---
 src/components/screens/ExperimentView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index af143b59..d7142994 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -194,7 +194,7 @@ import Chip from 'primevue/chip'
 import DefaultLayout from '@/components/layout/DefaultLayout'
 import Dialog from 'primevue/dialog'
 import PageLoading from '@/components/common/PageLoading'
-import PrimeIcons from 'primevue/api'
+import { PrimeIcons } from 'primevue/api'
 import ItemNotFound from '@/components/common/ItemNotFound'
 import useAuth from '@/composition/auth'
 import useItem from '@/composition/item'

From b160a7a9c043673764fa06fdc625495fc5b36278 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Wed, 26 Jun 2024 17:58:09 +1000
Subject: [PATCH 06/17] Modify editing function to handle empty keywords case.
 Will change it back when we get final keywords list.

---
 src/components/screens/ExperimentEditor.vue | 74 ++++++++++-----------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 22ba3286..2388b263 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -515,11 +515,6 @@ export default {
     const phenotypicModelSystemKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-modle-system-search`})
     const phenotypicProfilingStrategyKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-profiling-strategy-search`})
     const phenotypicSequencingTypeKeywordOptions = useItems({itemTypeName: `controlled-keywords-phenotypic-sequencing-type-search`})
-    // for (const key of controlledKeywordKeys) {
-    //   optionKey = `${key}KeywordOptions`
-    //   optionKey = useItems({ itemTypeName: `${key}-controlled-keywords-search` })
-    // }
-
     const publicationIdentifierSuggestions = useItems({itemTypeName: 'publication-identifier-search'})
     const externalPublicationIdentifierSuggestions = useItems({itemTypeName: 'external-publication-identifier-search'})
     return {
@@ -791,39 +786,41 @@ export default {
         this.shortDescription = this.item.shortDescription
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
-        this.variantLibraryKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").keyword.value
-        this.variantLibraryKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").description
-        const endogenousSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method System")
-        if (endogenousSystemKeywordObj) {
-          this.endogenousSystemKeyword = endogenousSystemKeywordObj.keyword.value
-          this.endogenousSystemKeywordDescription = endogenousSystemKeywordObj.description
-        } else {
-          this.endogenousSystemKeyword = null
-          this.endogenousSystemKeywordDescription = null
-        }
-        const endogenousMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method Mechanism")
-        if (endogenousMechanismKeywordObj) {
-          this.endogenousMechanismKeyword = endogenousMechanismKeywordObj.keyword.value
-          this.endogenousMechanismKeywordDescription = endogenousMechanismKeywordObj.description
-        } else {
-          this.endogenousMechanismKeyword = null
-          this.endogenousMechanismKeywordDescription = null
-        }
-        const inVitroSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method System")
-        if (inVitroSystemKeywordObj) {
-          this.inVitroSystemKeyword = inVitroSystemKeywordObj.keyword.value
-          this.inVitroSystemKeywordDescription = inVitroSystemKeywordObj.description
-        } else {
-          this.inVitroSystemKeyword = null
-          this.inVitroSystemKeywordDescription = null
-        }
-        const inVitroMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method Mechanism")
-        if (inVitroMechanismKeywordObj) {
-          this.inVitroMechanismKeyword = inVitroMechanismKeywordObj.keyword.value
-          this.inVitroMechanismKeywordDescription = inVitroMechanismKeywordObj.description
-        } else{
-          this.inVitroMechanismKeyword = null
-          this.inVitroMechanismKeywordDescription = null
+        // Keywords could be an empty list now. Will modify it back to compulsory when we get final list. 
+        if (this.item.keywords.length !== 0) {
+          this.variantLibraryKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").keyword.value
+          this.variantLibraryKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").description
+          const endogenousSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method System")
+          if (endogenousSystemKeywordObj) {
+            this.endogenousSystemKeyword = endogenousSystemKeywordObj.keyword.value
+            this.endogenousSystemKeywordDescription = endogenousSystemKeywordObj.description
+          } else {
+            this.endogenousSystemKeyword = null
+            this.endogenousSystemKeywordDescription = null
+          }
+          const endogenousMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method Mechanism")
+          if (endogenousMechanismKeywordObj) {
+            this.endogenousMechanismKeyword = endogenousMechanismKeywordObj.keyword.value
+            this.endogenousMechanismKeywordDescription = endogenousMechanismKeywordObj.description
+          } else {
+            this.endogenousMechanismKeyword = null
+            this.endogenousMechanismKeywordDescription = null
+          }
+          const inVitroSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method System")
+          if (inVitroSystemKeywordObj) {
+            this.inVitroSystemKeyword = inVitroSystemKeywordObj.keyword.value
+            this.inVitroSystemKeywordDescription = inVitroSystemKeywordObj.description
+          } else {
+            this.inVitroSystemKeyword = null
+            this.inVitroSystemKeywordDescription = null
+          }
+          const inVitroMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method Mechanism")
+          if (inVitroMechanismKeywordObj) {
+            this.inVitroMechanismKeyword = inVitroMechanismKeywordObj.keyword.value
+            this.inVitroMechanismKeywordDescription = inVitroMechanismKeywordObj.description
+          } else{
+            this.inVitroMechanismKeyword = null
+            this.inVitroMechanismKeywordDescription = null
         }
         this.deliveryMethodKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Delivery method").keyword.value
         this.deliveryMethodKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Delivery method").description
@@ -837,6 +834,7 @@ export default {
         this.phenotypicProfilingStrategyKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Profiling Strategy").description
         this.phenotypicSequencingTypeKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Sequencing Read Type").keyword.value
         this.phenotypicSequencingTypeKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Sequencing Read Type").description
+        }
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering publication identifiers list for those publications we know to be

From 0cb4e087f3b2fc8966fc5cec600fbba273318cf7 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Thu, 27 Jun 2024 17:04:30 +1000
Subject: [PATCH 07/17] Handle partial saving keywords and empty keyword list
 cases.

---
 src/components/screens/ExperimentEditor.vue | 124 ++++++++------------
 1 file changed, 52 insertions(+), 72 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 2388b263..b08fbcd2 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -209,6 +209,9 @@
           <Card>
             <template #content>
               <div class="field">Please click <Button icon="pi pi-plus" aria-label="Filter" size="small"/> if you  would like to add a description. </div>
+              <div class="field">
+                <Button class="p-button-help" @click="resetKeywords">Clear Keywords</Button>
+              </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
@@ -768,6 +771,54 @@ export default {
       this.mergeValidationErrors()
     },
 
+    resetKeywords: function() {
+      if (this.item) {
+        // Keywords could be an empty list now. Will modify it back to compulsory when we get final list. 
+        if (this.item.keywords.length !== 0) {
+          const setKeyword = (key, keywordProp, descriptionProp) => {
+            const keywordObj = this.item.keywords.find(keyword => keyword.keyword.key === key)
+            this[keywordProp] = keywordObj ? keywordObj.keyword.value : null
+            this[descriptionProp] = keywordObj ? keywordObj.description : null
+          }
+          setKeyword("Variant Library Creation Method", "variantLibraryKeyword", "variantLibraryKeywordDescription")
+          setKeyword("Endogenous Locus Library Method System", "endogenousSystemKeyword", "endogenousSystemKeywordDescription")
+          setKeyword("Endogenous Locus Library Method Mechanism", "endogenousMechanismKeyword", "endogenousMechanismKeywordDescription")
+          setKeyword("In Vitro Construct Library Method System", "inVitroSystemKeyword", "inVitroSystemKeywordDescription")
+          setKeyword("In Vitro Construct Library Method Mechanism", "inVitroMechanismKeyword", "inVitroMechanismKeywordDescription")
+          setKeyword("Delivery method", "deliveryMethodKeyword", "deliveryMethodKeywordDescription")
+          setKeyword("Phenotypic Assay Dimensionality", "phenotypicDimensionalityKeyword", "phenotypicDimensionalityKeywordDescription")
+          setKeyword("Phenotypic Assay Method", "phenotypicMethodKeyword", "phenotypicMethodKeywordDescription")
+          setKeyword("Phenotypic Assay Model System", "phenotypicModelSystemKeyword", "phenotypicModelSystemKeywordDescription")
+          setKeyword("Phenotypic Assay Profiling Strategy", "phenotypicProfilingStrategyKeyword", "phenotypicProfilingStrategyKeywordDescription")
+          setKeyword("Phenotypic Assay Sequencing Read Type", "phenotypicSequencingTypeKeyword", "phenotypicSequencingTypeKeywordDescription")
+        }
+      } else {
+        this.keywords = []
+        this.variantLibraryKeyword = null
+        this.variantLibraryKeywordDescription = null
+        this.endogenousSystemKeyword = null
+        this.endogenousSystemKeywordDescription = null
+        this.endogenousMechanismKeyword = null
+        this.endogenousMechanismKeywordDescription = null
+        this.inVitroSystemKeyword = null
+        this.inVitroSystemKeywordDescription = null
+        this.inVitroMechanismKeyword = null
+        this.inVitroMechanismKeywordDescription = null
+        this.deliveryMethodKeyword = null
+        this.deliveryMethodKeywordDescription = null
+        this.phenotypicDimensionalityKeyword = null
+        this.phenotypicDimensionalityKeywordDescription = null
+        this.phenotypicMethodKeyword = null
+        this.phenotypicMethodKeywordDescription = null
+        this.phenotypicModelSystemKeyword = null
+        this.phenotypicModelSystemKeywordDescription = null
+        this.phenotypicProfilingStrategyKeyword = null
+        this.phenotypicProfilingStrategyKeywordDescription = null
+        this.phenotypicSequencingTypeKeyword = null
+        this.phenotypicSequencingTypeKeywordDescription = null
+      }
+    },
+
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     // Validation
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -786,55 +837,6 @@ export default {
         this.shortDescription = this.item.shortDescription
         this.abstractText = this.item.abstractText
         this.methodText = this.item.methodText
-        // Keywords could be an empty list now. Will modify it back to compulsory when we get final list. 
-        if (this.item.keywords.length !== 0) {
-          this.variantLibraryKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").keyword.value
-          this.variantLibraryKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Variant Library Creation Method").description
-          const endogenousSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method System")
-          if (endogenousSystemKeywordObj) {
-            this.endogenousSystemKeyword = endogenousSystemKeywordObj.keyword.value
-            this.endogenousSystemKeywordDescription = endogenousSystemKeywordObj.description
-          } else {
-            this.endogenousSystemKeyword = null
-            this.endogenousSystemKeywordDescription = null
-          }
-          const endogenousMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "Endogenous Locus Library Method Mechanism")
-          if (endogenousMechanismKeywordObj) {
-            this.endogenousMechanismKeyword = endogenousMechanismKeywordObj.keyword.value
-            this.endogenousMechanismKeywordDescription = endogenousMechanismKeywordObj.description
-          } else {
-            this.endogenousMechanismKeyword = null
-            this.endogenousMechanismKeywordDescription = null
-          }
-          const inVitroSystemKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method System")
-          if (inVitroSystemKeywordObj) {
-            this.inVitroSystemKeyword = inVitroSystemKeywordObj.keyword.value
-            this.inVitroSystemKeywordDescription = inVitroSystemKeywordObj.description
-          } else {
-            this.inVitroSystemKeyword = null
-            this.inVitroSystemKeywordDescription = null
-          }
-          const inVitroMechanismKeywordObj = this.item.keywords.find(keyword => keyword.keyword.key === "In Vitro Construct Library Method Mechanism")
-          if (inVitroMechanismKeywordObj) {
-            this.inVitroMechanismKeyword = inVitroMechanismKeywordObj.keyword.value
-            this.inVitroMechanismKeywordDescription = inVitroMechanismKeywordObj.description
-          } else{
-            this.inVitroMechanismKeyword = null
-            this.inVitroMechanismKeywordDescription = null
-        }
-        this.deliveryMethodKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Delivery method").keyword.value
-        this.deliveryMethodKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Delivery method").description
-        this.phenotypicDimensionalityKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Dimensionality").keyword.value
-        this.phenotypicDimensionalityKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Dimensionality").description
-        this.phenotypicMethodKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Method").keyword.value
-        this.phenotypicMethodKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Method").description
-        this.phenotypicModelSystemKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Model System").keyword.value
-        this.phenotypicModelSystemKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Model System").description
-        this.phenotypicProfilingStrategyKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Profiling Strategy").keyword.value
-        this.phenotypicProfilingStrategyKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Profiling Strategy").description
-        this.phenotypicSequencingTypeKeyword = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Sequencing Read Type").keyword.value
-        this.phenotypicSequencingTypeKeywordDescription = this.item.keywords.find(keyword => keyword.keyword.key === "Phenotypic Assay Sequencing Read Type").description
-        }
         this.doiIdentifiers = this.item.doiIdentifiers
         // So that the multiselect can populate correctly, build the primary publication identifiers
         // indirectly by filtering publication identifiers list for those publications we know to be
@@ -853,29 +855,6 @@ export default {
         this.shortDescription = null
         this.abstractText = null
         this.methodText = null
-        this.keywords = []
-        this.variantLibraryKeyword = null
-        this.variantLibraryKeywordDescription = null
-        this.endogenousSystemKeyword = null
-        this.endogenousSystemKeywordDescription = null
-        this.endogenousMechanismKeyword = null
-        this.endogenousMechanismKeywordDescription = null
-        this.inVitroSystemKeyword = null
-        this.inVitroSystemKeywordDescription = null
-        this.inVitroMechanismKeyword = null
-        this.inVitroMechanismKeywordDescription = null
-        this.deliveryMethodKeyword = null
-        this.deliveryMethodKeywordDescription = null
-        this.phenotypicDimensionalityKeyword = null
-        this.phenotypicDimensionalityKeywordDescription = null
-        this.phenotypicMethodKeyword = null
-        this.phenotypicMethodKeywordDescription = null
-        this.phenotypicModelSystemKeyword = null
-        this.phenotypicModelSystemKeywordDescription = null
-        this.phenotypicProfilingStrategyKeyword = null
-        this.phenotypicProfilingStrategyKeywordDescription = null
-        this.phenotypicSequencingTypeKeyword = null
-        this.phenotypicSequencingTypeKeywordDescription = null
         this.doiIdentifiers = []
         this.primaryPublicationIdentifiers = []
         this.secondaryPublicationIdentifiers = []
@@ -883,6 +862,7 @@ export default {
         this.rawReadIdentifiers = []
         this.extraMetadata = {}
       }
+      this.resetKeywords()
     },
 
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

From cccc9a570df1d3c74966f4695c2e6d8e834c44a7 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Tue, 2 Jul 2024 10:39:57 +1000
Subject: [PATCH 08/17] Simplify resetKeywords codes.

---
 src/components/screens/ExperimentEditor.vue | 34 ++++++++++-----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index b08fbcd2..f989c385 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -772,26 +772,24 @@ export default {
     },
 
     resetKeywords: function() {
-      if (this.item) {
+      if (this.item && this.item.keywords.length !== 0) {
         // Keywords could be an empty list now. Will modify it back to compulsory when we get final list. 
-        if (this.item.keywords.length !== 0) {
-          const setKeyword = (key, keywordProp, descriptionProp) => {
-            const keywordObj = this.item.keywords.find(keyword => keyword.keyword.key === key)
-            this[keywordProp] = keywordObj ? keywordObj.keyword.value : null
-            this[descriptionProp] = keywordObj ? keywordObj.description : null
-          }
-          setKeyword("Variant Library Creation Method", "variantLibraryKeyword", "variantLibraryKeywordDescription")
-          setKeyword("Endogenous Locus Library Method System", "endogenousSystemKeyword", "endogenousSystemKeywordDescription")
-          setKeyword("Endogenous Locus Library Method Mechanism", "endogenousMechanismKeyword", "endogenousMechanismKeywordDescription")
-          setKeyword("In Vitro Construct Library Method System", "inVitroSystemKeyword", "inVitroSystemKeywordDescription")
-          setKeyword("In Vitro Construct Library Method Mechanism", "inVitroMechanismKeyword", "inVitroMechanismKeywordDescription")
-          setKeyword("Delivery method", "deliveryMethodKeyword", "deliveryMethodKeywordDescription")
-          setKeyword("Phenotypic Assay Dimensionality", "phenotypicDimensionalityKeyword", "phenotypicDimensionalityKeywordDescription")
-          setKeyword("Phenotypic Assay Method", "phenotypicMethodKeyword", "phenotypicMethodKeywordDescription")
-          setKeyword("Phenotypic Assay Model System", "phenotypicModelSystemKeyword", "phenotypicModelSystemKeywordDescription")
-          setKeyword("Phenotypic Assay Profiling Strategy", "phenotypicProfilingStrategyKeyword", "phenotypicProfilingStrategyKeywordDescription")
-          setKeyword("Phenotypic Assay Sequencing Read Type", "phenotypicSequencingTypeKeyword", "phenotypicSequencingTypeKeywordDescription")
+        const setKeyword = (key, keywordProp, descriptionProp) => {
+          const keywordObj = this.item.keywords.find(keyword => keyword.keyword.key === key)
+          this[keywordProp] = keywordObj ? keywordObj.keyword.value : null
+          this[descriptionProp] = keywordObj ? keywordObj.description : null
         }
+        setKeyword("Variant Library Creation Method", "variantLibraryKeyword", "variantLibraryKeywordDescription")
+        setKeyword("Endogenous Locus Library Method System", "endogenousSystemKeyword", "endogenousSystemKeywordDescription")
+        setKeyword("Endogenous Locus Library Method Mechanism", "endogenousMechanismKeyword", "endogenousMechanismKeywordDescription")
+        setKeyword("In Vitro Construct Library Method System", "inVitroSystemKeyword", "inVitroSystemKeywordDescription")
+        setKeyword("In Vitro Construct Library Method Mechanism", "inVitroMechanismKeyword", "inVitroMechanismKeywordDescription")
+        setKeyword("Delivery method", "deliveryMethodKeyword", "deliveryMethodKeywordDescription")
+        setKeyword("Phenotypic Assay Dimensionality", "phenotypicDimensionalityKeyword", "phenotypicDimensionalityKeywordDescription")
+        setKeyword("Phenotypic Assay Method", "phenotypicMethodKeyword", "phenotypicMethodKeywordDescription")
+        setKeyword("Phenotypic Assay Model System", "phenotypicModelSystemKeyword", "phenotypicModelSystemKeywordDescription")
+        setKeyword("Phenotypic Assay Profiling Strategy", "phenotypicProfilingStrategyKeyword", "phenotypicProfilingStrategyKeywordDescription")
+        setKeyword("Phenotypic Assay Sequencing Read Type", "phenotypicSequencingTypeKeyword", "phenotypicSequencingTypeKeywordDescription")
       } else {
         this.keywords = []
         this.variantLibraryKeyword = null

From fd88b25f2788fa7718677853441ec41ebb4ada54 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Fri, 12 Jul 2024 09:36:08 +1000
Subject: [PATCH 09/17] Modify UI

---
 src/components/screens/ExperimentEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index f989c385..5cced27b 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -223,7 +223,7 @@
                       style="width: 450px"
                   />
                   <label :for="$scopedId('input-variant-library-keywords')">Variant Library Creation Method</label>
-                  &nbsp;<Button :icon="(keywordTextVisible['variantLibrary'] || variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('variantLibrary')" aria-label="Filter" size="large"/>
+                  &nbsp;<Button rounded :disabled="variantLibraryKeyword == 'Other' ? true : null" :icon="(keywordTextVisible['variantLibrary'] || variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'" @click="keywordToggleInput('variantLibrary')" aria-label="Filter" size="large"/>
                 </span>
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>

From bb2e7f4bec11df825ac33d413b3b8c2ca0c08b83 Mon Sep 17 00:00:00 2001
From: ashsny <1389678+ashsny@users.noreply.github.com>
Date: Thu, 11 Jul 2024 17:13:34 -0700
Subject: [PATCH 10/17] Improve button appearance.

---
 src/components/screens/ExperimentEditor.vue | 39 +++++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 5cced27b..06881e98 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -206,7 +206,7 @@
           </Card>
         </div>
         <div class="col-12 md:col-6">
-          <Card>
+          <Card class="keyword-editor">
             <template #content>
               <div class="field">Please click <Button icon="pi pi-plus" aria-label="Filter" size="small"/> if you  would like to add a description. </div>
               <div class="field">
@@ -223,12 +223,20 @@
                       style="width: 450px"
                   />
                   <label :for="$scopedId('input-variant-library-keywords')">Variant Library Creation Method</label>
-                  &nbsp;<Button rounded :disabled="variantLibraryKeyword == 'Other' ? true : null" :icon="(keywordTextVisible['variantLibrary'] || variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'" @click="keywordToggleInput('variantLibrary')" aria-label="Filter" size="large"/>
                 </span>
+                <Button
+                    class="keyword-description-button" 
+                    rounded
+                    :disabled="variantLibraryKeyword == 'Other' ? true : null"
+                    :icon="(keywordTextVisible['variantLibrary'] || variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'"
+                    @click="keywordToggleInput('variantLibrary')"
+                    aria-label="Filter"
+                    size="large"
+                 />
                 <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
               </div>
               <div class="field" v-if="keywordTextVisible['variantLibrary'] || variantLibraryKeyword==='Other'">
-                <span class="p-float-label">
+                <span class="p-float-label keyword-description-input">
                   <Textarea v-model="variantLibraryKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
                   <label :for="$scopedId('input-title')">Variant Library Creation Method Description {{variantLibraryKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
                 </span>
@@ -1093,4 +1101,29 @@ export default {
   z-index: 1001;
 }
 
+.keyword-editor .field {
+  display: flex;
+  align-items: center;
+}
+
+.keyword-description-button {
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.keyword-description-button:deep(.p-button-icon) {
+  font-size: 1.1rem;
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
+.keyword-description-button:deep(.p-button-icon.pi-file-edit) {
+  margin-left: 4px;
+}
+
+.keyword-description-input {
+  width: 450px;
+}
+
 </style>

From 7a7757286d9a95be135c53d0058359f9c0636434 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Fri, 19 Jul 2024 17:22:57 +1000
Subject: [PATCH 11/17] Simplify codes and add features

---
 src/components/screens/ExperimentEditor.vue | 639 +++++++++++---------
 src/components/screens/ExperimentView.vue   |  19 +-
 2 files changed, 385 insertions(+), 273 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 06881e98..83e54380 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -208,263 +208,268 @@
         <div class="col-12 md:col-6">
           <Card class="keyword-editor">
             <template #content>
-              <div class="field">Please click <Button icon="pi pi-plus" aria-label="Filter" size="small"/> if you  would like to add a description. </div>
               <div class="field">
-                <Button class="p-button-help" @click="resetKeywords">Clear Keywords</Button>
+                <label style="font-weight: bold; margin-right: 3px;">Keywords</label>
               </div>
               <div class="field">
                 <span class="p-float-label">
                   <Dropdown
-                      v-model="variantLibraryKeyword"
+                      v-model="keywordKey.variantLibraryKeyword"
                       :id="$scopedId('input-variant-library-keywords')"
                       :options="variantLibraryKeywordOptions"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 450px"
+                      class="keyword-dropdown"
                   />
                   <label :for="$scopedId('input-variant-library-keywords')">Variant Library Creation Method</label>
                 </span>
                 <Button
                     class="keyword-description-button" 
                     rounded
-                    :disabled="variantLibraryKeyword == 'Other' ? true : null"
-                    :icon="(keywordTextVisible['variantLibrary'] || variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'"
+                    :disabled="keywordKey.variantLibraryKeyword == 'Other' ? true : null"
+                    :icon="(keywordTextVisible['variantLibrary'] || keywordKey.variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'"
                     @click="keywordToggleInput('variantLibrary')"
                     aria-label="Filter"
-                    size="large"
-                 />
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                />
+                &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.variantLibraryKeyword)"/>
+                <Dialog
+                  v-model:visible="dialogVisible[keywordKey.variantLibraryKeyword]"
+                  modal
+                  header="Variant Library Creation Method"
+                  :style="{ width: '50vw' }"
+                  :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+                >
+                  <p class="m-0">
+                    {{ variantLibraryKeywordOptions[0].description }}
+                  </p>
+                </Dialog>
+                <span v-if="validationErrors.keywords?.variantLibraryKeyword" class="mave-field-error">{{validationErrors.keywords?.variantLibraryKeyword}}</span>
               </div>
-              <div class="field" v-if="keywordTextVisible['variantLibrary'] || variantLibraryKeyword==='Other'">
+              <div class="field" v-if="keywordTextVisible['variantLibrary'] || keywordKey.variantLibraryKeyword==='Other'">
                 <span class="p-float-label keyword-description-input">
-                  <Textarea v-model="variantLibraryKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Variant Library Creation Method Description {{variantLibraryKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                  <Textarea v-model="keywordDescription.variantLibraryKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                  <label :for="$scopedId('input-title')">Variant Library Creation Method Description {{keywordKey.variantLibraryKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
                 </span>
-                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                <span v-if="validationErrors.keywords?.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.variantLibraryKeywordDescription}}</span>
               </div>
-              <div v-if="variantLibraryKeyword === 'Endogenous locus library method'">
+              <div v-if="keywordKey.variantLibraryKeyword === 'Endogenous locus library method'">
                 <div class="field">
                   <span class="p-float-label">
                     <Dropdown
-                        v-model="endogenousSystemKeyword"
+                        v-model="keywordKey.endogenousSystemKeyword"
                         :id="$scopedId('input-endogenous-system-keywords')"
                         :options="endogenousSystemKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 450px"
+                        class="keyword-dropdown"
                     />
                     <label :for="$scopedId('input-endogenous-system-keywords')">Endogenous Locus Library Method System</label>
-                    &nbsp;<Button :icon="(keywordTextVisible['endogenousSystem']  || endogenousSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('endogenousSystem')" aria-label="Filter" size="large"/>
                   </span>
-                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                  <Button 
+                    class="keyword-description-button" 
+                    rounded
+                    :disabled="keywordKey.endogenousSystemKeyword == 'Other' ? true : null"
+                    :icon="(keywordTextVisible['endogenousSystem']  || keywordKey.endogenousSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
+                    @click="keywordToggleInput('endogenousSystem')" 
+                    aria-label="Filter"
+                  />
+                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.endogenousSystemKeyword)"/>
+                  <Dialog 
+                    v-model:visible="dialogVisible[keywordKey.endogenousSystemKeyword]"
+                    modal
+                    header="Endogenous Locus Library Method System"
+                    :style="{ width: '50vw' }"
+                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+                  >
+                    <p class="m-0">
+                      {{ endogenousSystemKeywordOptions[0].description }}
+                    </p>
+                  </Dialog>
+                  <span v-if="validationErrors.keywords?.endogenousSystemKeyword" class="mave-field-error">{{validationErrors.keywords?.endogenousSystemKeyword}}</span>
                 </div>
-                <div class="field" v-if="keywordTextVisible['endogenousSystem'] || endogenousSystemKeyword==='Other'">
-                  <span class="p-float-label">
-                    <Textarea v-model="endogenousSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method System Description {{endogenousSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                <div class="field" v-if="keywordTextVisible['endogenousSystem'] || keywordKey.endogenousSystemKeyword==='Other'">
+                  <span class="p-float-label keyword-description-input ">
+                    <Textarea v-model="keywordDescription.endogenousSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method System Description {{keywordKey.endogenousSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
                   </span>
-                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                  <span v-if="validationErrors.keywords?.endogenousSystemKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.endogenousSystemKeywordDescription}}</span>
                 </div>
                 <div class="field">
                   <span class="p-float-label">
                     <Dropdown
-                        v-model="endogenousMechanismKeyword"
+                        v-model="keywordKey.endogenousMechanismKeyword"
                         :id="$scopedId('input-endogenous-mechanism-keywords')"
                         :options="endogenousMechanismKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 450px"
+                        class="keyword-dropdown"
                     />
                     <label :for="$scopedId('input-endogenous-mechanism-keywords')">Endogenous Locus Library Method Mechanism</label>
-                    &nbsp;<Button :icon="(keywordTextVisible['endogenousMechanism'] || endogenousMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('endogenousMechanism')" aria-label="Filter" size="large"/>
                   </span>
-                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                  <Button 
+                    class="keyword-description-button" 
+                    rounded
+                    :disabled="keywordKey.endogenousMechanismKeyword == 'Other' ? true : null"  
+                    :icon="(keywordTextVisible['endogenousMechanism'] || keywordKey.endogenousMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
+                    @click="keywordToggleInput('endogenousMechanism')" 
+                    aria-label="Filter"
+                  />
+                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.endogenousMechanismKeyword)"/>
+                  <Dialog 
+                    v-model:visible="dialogVisible[keywordKey.endogenousMechanismKeyword]" 
+                    modal 
+                    header="Endogenous Locus Library Method Mechanism" 
+                    :style="{ width: '50vw' }" 
+                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+                  >
+                    <p class="m-0">
+                      {{ endogenousMechanismKeywordOptions[0].description }}
+                    </p>
+                  </Dialog>
+                  <span v-if="validationErrors.keywords?.endogenousMechanismKeyword" class="mave-field-error">{{validationErrors.keywords?.endogenousMechanismKeyword}}</span>
                 </div>
-                <div class="field" v-if="keywordTextVisible['endogenousMechanism'] || endogenousMechanismKeyword==='Other'">
-                  <span class="p-float-label">
-                    <Textarea v-model="endogenousMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method Mechanism Description {{endogenousMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                <div class="field" v-if="keywordTextVisible['endogenousMechanism'] || keywordKey.endogenousMechanismKeyword==='Other'">
+                  <span class="p-float-label keyword-description-input">
+                    <Textarea v-model="keywordDescription.endogenousMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method Mechanism Description {{keywordKey.endogenousMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
                   </span>
-                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                  <span v-if="validationErrors.keywords?.endogenousMechanismKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.endogenousMechanismKeywordDescription}}</span>
                 </div>
               </div>
-              <div v-if="variantLibraryKeyword === 'In vitro construct library method'">
+              <div v-if="keywordKey.variantLibraryKeyword === 'In vitro construct library method'">
                 <div class="field">
                   <span class="p-float-label">
                     <Dropdown
-                        v-model="inVitroSystemKeyword"
+                        v-model="keywordKey.inVitroSystemKeyword"
                         :id="$scopedId('input-in-vitro-system-keywords')"
                         :options="inVitroSystemKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 450px"
+                        class="keyword-dropdown"
                     />
                     <label :for="$scopedId('input-in-vitro-system-keywords')">In Vitro Construct Library Method System</label>
-                    &nbsp;<Button :icon="(keywordTextVisible['inVitroSystem'] || inVitroSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('inVitroSystem')" aria-label="Filter" size="large"/>
                   </span>
-                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                  <Button
+                    class="keyword-description-button" 
+                    rounded
+                    :disabled="keywordKey.inVitroSystemKeyword == 'Other' ? true : null" 
+                    :icon="(keywordTextVisible['inVitroSystem'] || keywordKey.inVitroSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
+                    @click="keywordToggleInput('inVitroSystem')" 
+                    aria-label="Filter"
+                  />
+                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.inVitroSystemKeyword)"/>
+                  <Dialog
+                    v-model:visible="dialogVisible[keywordKey.inVitroSystemKeyword]"
+                    modal
+                    header="In Vitro Construct Library Method System" 
+                    :style="{ width: '50vw' }" 
+                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+                  >
+                    <p class="m-0">
+                      {{ inVitroSystemKeywordOptions[0].description }}
+                    </p>
+                  </Dialog>
+                  <span v-if="validationErrors.keywords?.inVitroSystemKeyword" class="mave-field-error">{{validationErrors.keywords?.inVitroSystemKeyword}}</span>
                 </div>
-                <div class="field" v-if="keywordTextVisible['inVitroSystem'] || inVitroSystemKeyword==='Other'">
-                  <span class="p-float-label">
-                    <Textarea v-model="inVitroSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method System Description {{inVitroSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                <div class="field" v-if="keywordTextVisible['inVitroSystem'] || keywordKey.inVitroSystemKeyword==='Other'">
+                  <span class="p-float-label keyword-description-input">
+                    <Textarea v-model="keywordDescription.inVitroSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method System Description {{keywordKey.inVitroSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
                   </span>
-                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                  <span v-if="validationErrors.keywords?.inVitroSystemKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.inVitroSystemKeywordDescription}}</span>
                 </div>
                 <div class="field">
                   <span class="p-float-label">
                     <Dropdown
-                        v-model="inVitroMechanismKeyword"
+                        v-model="keywordKey.inVitroMechanismKeyword"
                         :id="$scopedId('input-in-vitro-mechanism-keywords')"
                         :options="inVitroMechanismKeywordOptions"
                         optionLabel="value"
                         optionValue="value"
-                        style="width: 450px"
+                        class="keyword-dropdown"
                     />
                     <label :for="$scopedId('input-in-vitro-mechanism-keywords')">In Vitro Construct Library Method Mechanism</label>
-                    &nbsp;<Button :icon="(keywordTextVisible['inVitroMechanism'] || inVitroMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('inVitroMechanism')" aria-label="Filter" size="large"/>
                   </span>
-                  <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
+                  <Button 
+                    class="keyword-description-button" 
+                    rounded
+                    :disabled="keywordKey.inVitroMechanismKeyword == 'Other' ? true : null" 
+                    :icon="(keywordTextVisible['inVitroMechanism'] || keywordKey.inVitroMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
+                    @click="keywordToggleInput('inVitroMechanism')" 
+                    aria-label="Filter"
+                  />
+                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.inVitroMechanismKeyword)"/>
+                  <Dialog
+                    v-model:visible="dialogVisible[keywordKey.inVitroMechanismKeyword]"
+                    modal
+                    header="In Vitro Construct Library Method Mechanism"
+                    :style="{ width: '50vw' }"
+                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+                  >
+                    <p class="m-0">
+                      {{ inVitroMechanismKeywordOptions[0].description }}
+                    </p>
+                  </Dialog>
+                  <span v-if="validationErrors.keywords?.inVitroMechanismKeyword" class="mave-field-error">{{validationErrors.keywords?.inVitroMechanismKeyword}}</span>
                 </div>  
-                <div class="field" v-if="keywordTextVisible['inVitroMechanism'] || inVitroMechanismKeyword==='Other'">
-                  <span class="p-float-label">
-                    <Textarea v-model="inVitroMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method Mechanism Description {{inVitroMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
+                <div class="field" v-if="keywordTextVisible['inVitroMechanism'] || keywordKey.inVitroMechanismKeyword==='Other'">
+                  <span class="p-float-label keyword-description-input">
+                    <Textarea v-model="keywordDescription.inVitroMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
+                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method Mechanism Description {{keywordKey.inVitroMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
                   </span>
-                  <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                  <span v-if="validationErrors.keywords?.inVitroMechanismKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.inVitroMechanismKeywordDescription}}</span>
                 </div>
               </div>
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="deliveryMethodKeyword"
-                      :id="$scopedId('delivery-method-keywords')"
-                      :options="deliveryMethodKeywordOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 450px"
-                  />
-                  <label :for="$scopedId('delivery-method-keywords')">Delivery Method</label>
-                  &nbsp;<Button :icon="(keywordTextVisible['deliveryMethod'] || deliveryMethodKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('deliveryMethod')" aria-label="Filter" size="large"/>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-              <div class="field" v-if="keywordTextVisible['deliveryMethod'] || deliveryMethodKeyword==='Other'">
-                <span class="p-float-label">
-                  <Textarea v-model="deliveryMethodKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Delivery Method Description {{deliveryMethodKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                </span>
-                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
-              </div>
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="phenotypicDimensionalityKeyword"
-                      :id="$scopedId('phenotypic-dimensionality-keywords')"
-                      :options="phenotypicDimensionalityKeywordOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 450px"
-                  />
-                  <label :for="$scopedId('phenotypic-dimensionality-keywords')">Phenotypic Assay Dimensionality</label>
-                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicDimensionality'] || phenotypicDimensionalityKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicDimensionality')" aria-label="Filter" size="large"/>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-              <div class="field" v-if="keywordTextVisible['phenotypicDimensionality'] || phenotypicDimensionalityKeyword==='Other'">
-                <span class="p-float-label">
-                  <Textarea v-model="phenotypicDimensionalityKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Phenotypic Assay Dimensionality Description {{phenotypicDimensionalityKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                </span>
-                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
-              </div>
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="phenotypicMethodKeyword"
-                      :id="$scopedId('phenotypic-method-keywords')"
-                      :options="phenotypicMethodKeywordOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 450px"
-                  />
-                  <label :for="$scopedId('phenotypic-method-keywords')">Phenotypic Assay Method</label>
-                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicMethod'] || phenotypicMethodKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicMethod')" aria-label="Filter" size="large"/>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-              <div class="field" v-if="keywordTextVisible['phenotypicMethod'] || phenotypicMethodKeyword==='Other'">
-                <span class="p-float-label">
-                  <Textarea v-model="phenotypicMethodKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Phenotypic Assay Method Description {{phenotypicMethodKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                </span>
-                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
-              </div>
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="phenotypicModelSystemKeyword"
-                      :id="$scopedId('phenotypic-model-system-keywords')"
-                      :options="phenotypicModelSystemKeywordOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 450px"
-                  />
-                  <label :for="$scopedId('phenotypic-model-system-keywords')">Phenotypic Assay Model System</label>
-                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicModelSystem'] || phenotypicModelSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicModelSystem')" aria-label="Filter" size="large"/>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-              <div class="field" v-if="keywordTextVisible['phenotypicModelSystem'] || phenotypicModelSystemKeyword==='Other'">
-                <span class="p-float-label">
-                  <Textarea v-model="phenotypicModelSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Phenotypic Assay Model System Description {{phenotypicModelSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                </span>
-                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
-              </div>
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="phenotypicProfilingStrategyKeyword"
-                      :id="$scopedId('phenotypic-profiling-strategy-keywords')"
-                      :options="phenotypicProfilingStrategyKeywordOptions"
+              <!--For the rest keywords. They do not have any condition check as previous ones.-->
+              <div v-for="(keyword, index) in keywordData" :key="index">
+                <div class="field">
+                  <span class="p-float-label">
+                    <Dropdown
+                      v-model="keywordKey[keyword.model]"
+                      :id="$scopedId(keyword.id)"
+                      :options="getKeywordOptions(keyword.options)"
                       optionLabel="value"
                       optionValue="value"
-                      style="width: 450px"
+                      class="keyword-dropdown"
+                    />
+                    <label :for="$scopedId(keyword.id)">{{ keyword.label }}</label>
+                  </span>
+                  <Button
+                    class="keyword-description-button"
+                    rounded
+                    :disabled="keywordKey[keyword.model] == 'Other' ? true : null"
+                    :icon="(keywordTextVisible[keyword.key] || keywordKey[keyword.model] === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'"
+                    @click="keywordToggleInput(keyword.key)"
+                    aria-label="Filter"
                   />
-                  <label :for="$scopedId('phenotypic-profiling-strategy-keywords')">Phenotypic Assay Profiling Strategy</label>
-                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicProfilingStrategy'] || phenotypicProfilingStrategyKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicProfilingStrategy')" aria-label="Filter" size="large"/>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-              <div class="field" v-if="keywordTextVisible['phenotypicProfilingStrategy'] || phenotypicProfilingStrategyKeyword==='Other'">
-                <span class="p-float-label">
-                  <Textarea v-model="phenotypicProfilingStrategyKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Phenotypic Assay Profiling Strategy Description {{phenotypicProfilingStrategyKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                </span>
-                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(index)"/>
+                  <Dialog
+                    v-model:visible="dialogVisible[index]"
+                    modal
+                    :header="keyword.label"
+                    :style="{ width: '50vw' }"
+                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+                  >
+                    <p class="m-0">
+                      {{ getKeywordOptions(keyword.options)[0].description }}
+                    </p>
+                  </Dialog>
+                  <span v-if="validationErrors.keywords?.[keyword.model]" class="mave-field-error">{{ validationErrors.keywords?.[keyword.model] }}</span>
+                </div>
+                <div class="field" v-if="keywordTextVisible[keyword.key] || keywordKey[keyword.model] === 'Other'">
+                  <span class="p-float-label keyword-description-input">
+                    <Textarea
+                      v-model="keywordDescription[keyword.descriptionModel]"
+                      :id="$scopedId('input-title')"
+                      rows="4"
+                    />
+                    <label :for="$scopedId('input-title')">{{ keyword.descriptionLabel }} {{ keywordKey[keyword.model] === 'Other' ? '(Required)' : '(Optional)' }}</label>
+                  </span>
+                  <span v-if="validationErrors.keywords?.[keyword.descriptionModel]" class="mave-field-error"> {{ validationErrors.keywords?.[keyword.descriptionModel] }}</span>
+                </div>
               </div>
               <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="phenotypicSequencingTypeKeyword"
-                      :id="$scopedId('phenotypic-sequencing-type-keywords')"
-                      :options="phenotypicSequencingTypeKeywordOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      style="width: 450px"
-                  />
-                  <label :for="$scopedId('phenotypic-sequencing-type-keywords')">Phenotypic Assay Sequencing Read Type</label>
-                  &nbsp;<Button :icon="(keywordTextVisible['phenotypicSequencingType'] || phenotypicSequencingTypeKeyword==='Other')? 'pi pi-minus' : 'pi pi-plus'" @click="keywordToggleInput('phenotypicSequencingType')" aria-label="Filter" size="large"/>
-                </span>
-                <span v-if="validationErrors.keywords" class="mave-field-error">{{validationErrors.keywords}}</span>
-              </div>
-              <div class="field" v-if="keywordTextVisible['phenotypicSequencingType'] || phenotypicSequencingTypeKeyword==='Other'">
-                <span class="p-float-label">
-                  <Textarea v-model="phenotypicSequencingTypeKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Phenotypic Assay Sequencing Read Type Description {{phenotypicSequencingTypeKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                </span>
-                <span v-if="validationErrors.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.variantLibraryKeywordDescription}}</span>
+                <Button class="p-button-help" @click="resetKeywords">Clear Keywords</Button>
               </div>
             </template>
           </Card>
@@ -489,6 +494,7 @@ import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Chips from 'primevue/chips'
+import Dialog from 'primevue/dialog'
 import Dropdown from 'primevue/dropdown'
 import Multiselect from 'primevue/multiselect'
 import FileUpload from 'primevue/fileupload'
@@ -506,13 +512,9 @@ import config from '@/config'
 import {normalizeDoi, normalizePubmedId, normalizeRawRead, validateDoi, validatePubmedId, validateRawRead} from '@/lib/identifiers'
 import useFormatters from '@/composition/formatters'
 
-const controlledKeywordKeys = ['variantLibrary', 'endogenousSystem', 'endogenousMechanism', 'inVitroSystem', 'inVitroMechanism', 'deliveryMethod',
-  'phenotypicDimensionality', 'phenotypicMethod', 'phenotypicModelSystem', 'phenotypicProfilingStrategy', 'phenotypicSequencingType', 'phenotypicSequencingType'
-]
-
 export default {
   name: 'ExperimentEditor',
-  components: { AutoComplete, Button, Card, Chips, Dropdown, Multiselect, DefaultLayout, EmailPrompt, FileUpload, InputText, ProgressSpinner, TabPanel, TabView, Textarea },
+  components: { AutoComplete, Button, Card, Chips, Dialog, Dropdown, Multiselect, DefaultLayout, EmailPrompt, FileUpload, InputText, ProgressSpinner, TabPanel, TabView, Textarea },
 
   setup: () => {
     const variantLibraryKeywordOptions = useItems({itemTypeName: `controlled-keywords-variant-search`})
@@ -565,30 +567,92 @@ export default {
     title: null,
     shortDescription: null,
     abstractText: null,
+    dialogVisible: [],
     methodText: null,
-    variantLibraryKeyword: null,
-    variantLibraryKeywordDescription: null,
-    endogenousSystemKeyword: null,
-    endogenousSystemKeywordDescription: null,
-    endogenousMechanismKeyword: null,
-    endogenousMechanismKeywordDescription: null,
-    inVitroSystemKeyword: null,
-    inVitroSystemKeywordDescription: null,
-    inVitroMechanismKeyword: null,
-    inVitroMechanismKeywordDescription: null,
-    deliveryMethodKeyword: null,
-    deliveryMethodKeywordDescription: null,
-    phenotypicDimensionalityKeyword: null,
-    phenotypicDimensionalityKeywordDescription: null,
-    phenotypicMethodKeyword: null,
-    phenotypicMethodKeywordDescription: null,
-    phenotypicModelSystemKeyword: null,
-    phenotypicModelSystemKeywordDescription: null,
-    phenotypicProfilingStrategyKeyword: null,
-    phenotypicProfilingStrategyKeywordDescription: null,
-    phenotypicSequencingTypeKeyword: null,
-    phenotypicSequencingTypeKeywordDescription: null,
     keywords: [],
+    keywordDescription: {
+      variantLibraryKeywordDescription: null,
+      endogenousSystemKeywordDescription: null,
+      endogenousMechanismKeywordDescription: null,
+      inVitroSystemKeywordDescription: null,
+      inVitroMechanismKeywordDescription: null,
+      deliveryMethodKeywordDescription: null,
+      phenotypicDimensionalityKeywordDescription: null,
+      phenotypicMethodKeywordDescription: null,
+      phenotypicModelSystemKeywordDescription: null,
+      phenotypicProfilingStrategyKeywordDescription: null,
+      phenotypicSequencingTypeKeywordDescription: null,
+    },
+    keywordKey: {
+      variantLibraryKeyword: null,
+      endogenousSystemKeyword: null,
+      endogenousMechanismKeyword: null,
+      inVitroSystemKeyword: null,
+      inVitroMechanismKeyword: null,
+      deliveryMethodKeyword: null,
+      phenotypicDimensionalityKeyword: null,
+      phenotypicMethodKeyword: null,
+      phenotypicModelSystemKeyword: null,
+      phenotypicModelSystemKeyword: null,
+      phenotypicProfilingStrategyKeyword: null,
+      phenotypicSequencingTypeKeyword: null,
+    },
+    keywordData: [
+        {
+          model: 'deliveryMethodKeyword',
+          id: 'delivery-method-keywords',
+          options: 'deliveryMethodKeywordOptions',
+          label: 'Delivery Method',
+          key: 'deliveryMethod',
+          descriptionModel: 'deliveryMethodKeywordDescription',
+          descriptionLabel: 'Delivery Method Description',
+        },
+        {
+          model: 'phenotypicDimensionalityKeyword',
+          id: 'phenotypic-dimensionality-keywords',
+          options: 'phenotypicDimensionalityKeywordOptions',
+          label: 'Phenotypic Assay Dimensionality',
+          key: 'phenotypicDimensionality',
+          descriptionModel: 'phenotypicDimensionalityKeywordDescription',
+          descriptionLabel: 'Phenotypic Assay Dimensionality Description',
+        },
+        {
+          model: 'phenotypicMethodKeyword',
+          id: 'phenotypic-method-keywords',
+          options: 'phenotypicMethodKeywordOptions',
+          label: 'Phenotypic Assay Method',
+          key: 'phenotypicMethod',
+          descriptionModel: 'phenotypicMethodKeywordDescription',
+          descriptionLabel: 'Phenotypic Assay Method Description',
+        },
+        {
+          model: 'phenotypicModelSystemKeyword',
+          id: 'phenotypic-model-system-keywords',
+          options: 'phenotypicModelSystemKeywordOptions',
+          label: 'Phenotypic Assay Model System',
+          key: 'phenotypicModelSystem',
+          descriptionModel: 'phenotypicModelSystemKeywordDescription',
+          descriptionLabel: 'Phenotypic Assay Model System Description',
+        },
+        {
+          model: 'phenotypicProfilingStrategyKeyword',
+          id: 'phenotypic-profiling-strategy-keywords',
+          options: 'phenotypicProfilingStrategyKeywordOptions',
+          label: 'Phenotypic Assay Profiling Strategy',
+          key: 'phenotypicProfilingStrategy',
+          descriptionModel: 'phenotypicProfilingStrategyKeywordDescription',
+          descriptionLabel: 'Phenotypic Assay Profiling Strategy Description',
+        },
+        {
+          model: 'phenotypicSequencingTypeKeyword',
+          id: 'phenotypic-sequencing-type-keywords',
+          options: 'phenotypicSequencingTypeKeywordOptions',
+          label: 'Phenotypic Assay Sequencing Read Type',
+          key: 'phenotypicSequencingType',
+          descriptionModel: 'phenotypicSequencingTypeKeywordDescription',
+          descriptionLabel: 'Phenotypic Assay Sequencing Read Type Description',
+        },
+    ],
     keywordTextVisible:{
         variantLibrary: false,
         endogenousSystem: false,
@@ -617,7 +681,29 @@ export default {
       extraMetadataFile: null,
       scoresFile: null
     },
-    validationErrors: {},
+    validationErrors: {
+      keywords: {
+        // Condition check keywords
+        variantLibraryKeyword: null,
+        endogenousSystemKeyword: null,
+        endogenousMechanismKeyword: null,
+        inVitroSystemKeyword: null,
+        inVitroMechanismKeyword: null,
+        variantLibraryKeywordDescription: null,
+        endogenousSystemKeywordDescription: null,
+        endogenousMechanismKeywordDescription: null,
+        inVitroSystemKeywordDescription: null,
+        inVitroMechanismKeywordDescription: null,
+        // For loop keywords
+        variantLibraryKeyword: null,
+        deliveryMethodKeywordDescription: null,
+        phenotypicDimensionalityKeywordDescription: null,
+        phenotypicMethodKeywordDescription: null,
+        phenotypicModelSystemKeywordDescription: null,
+        phenotypicProfilingStrategyKeywordDescription: null,
+        phenotypicSequencingTypeKeywordDescription: null,
+      },
+    },
   }),
 
   computed: {
@@ -646,14 +732,14 @@ export default {
       },
       immediate: true
     },
-    variantLibraryKeyword(newValue) {
+    'keywordKey.variantLibraryKeyword': function(newValue) {
       if (newValue !== 'Endogenous locus library method') {
-        this.endogenousSystemKeyword = null
-        this.endogenousMechanismKeyword = null
+        this.keywordKey.endogenousSystemKeyword = null
+        this.keywordKey.endogenousMechanismKeyword = null
       }
       if (newValue !== 'In vitro construct library method') {
-        this.inVitroSystemKeyword = null
-        this.inVitroMechanismKeyword = null
+        this.keywordKey.inVitroSystemKeyword = null
+        this.keywordKey.inVitroMechanismKeyword = null
       }
     }
   },
@@ -784,8 +870,8 @@ export default {
         // Keywords could be an empty list now. Will modify it back to compulsory when we get final list. 
         const setKeyword = (key, keywordProp, descriptionProp) => {
           const keywordObj = this.item.keywords.find(keyword => keyword.keyword.key === key)
-          this[keywordProp] = keywordObj ? keywordObj.keyword.value : null
-          this[descriptionProp] = keywordObj ? keywordObj.description : null
+          this.keywordKey[keywordProp] = keywordObj ? keywordObj.keyword.value : null
+          this.keywordDescription[descriptionProp] = keywordObj ? keywordObj.description : null
         }
         setKeyword("Variant Library Creation Method", "variantLibraryKeyword", "variantLibraryKeywordDescription")
         setKeyword("Endogenous Locus Library Method System", "endogenousSystemKeyword", "endogenousSystemKeywordDescription")
@@ -800,28 +886,33 @@ export default {
         setKeyword("Phenotypic Assay Sequencing Read Type", "phenotypicSequencingTypeKeyword", "phenotypicSequencingTypeKeywordDescription")
       } else {
         this.keywords = []
-        this.variantLibraryKeyword = null
-        this.variantLibraryKeywordDescription = null
-        this.endogenousSystemKeyword = null
-        this.endogenousSystemKeywordDescription = null
-        this.endogenousMechanismKeyword = null
-        this.endogenousMechanismKeywordDescription = null
-        this.inVitroSystemKeyword = null
-        this.inVitroSystemKeywordDescription = null
-        this.inVitroMechanismKeyword = null
-        this.inVitroMechanismKeywordDescription = null
-        this.deliveryMethodKeyword = null
-        this.deliveryMethodKeywordDescription = null
-        this.phenotypicDimensionalityKeyword = null
-        this.phenotypicDimensionalityKeywordDescription = null
-        this.phenotypicMethodKeyword = null
-        this.phenotypicMethodKeywordDescription = null
-        this.phenotypicModelSystemKeyword = null
-        this.phenotypicModelSystemKeywordDescription = null
-        this.phenotypicProfilingStrategyKeyword = null
-        this.phenotypicProfilingStrategyKeywordDescription = null
-        this.phenotypicSequencingTypeKeyword = null
-        this.phenotypicSequencingTypeKeywordDescription = null
+        this.keywordDescription = {
+          variantLibraryKeywordDescription: null,
+          deliveryMethodKeywordDescription: null,
+          endogenousSystemKeywordDescription: null,
+          endogenousMechanismKeywordDescription: null,
+          inVitroSystemKeywordDescription: null,
+          inVitroMechanismKeywordDescription: null,
+          phenotypicDimensionalityKeywordDescription: null,
+          phenotypicMethodKeywordDescription: null,
+          phenotypicModelSystemKeywordDescription: null,
+          phenotypicProfilingStrategyKeywordDescription: null,
+          phenotypicSequencingTypeKeywordDescription: null,
+        }
+        this.keywordKey = {
+          variantLibraryKeyword: null,
+          endogenousSystemKeyword: null,
+          endogenousMechanismKeyword: null,
+          inVitroSystemKeyword: null,
+          inVitroMechanismKeyword: null,
+          deliveryMethodKeyword: null,
+          phenotypicDimensionalityKeyword: null,
+          phenotypicMethodKeyword: null,
+          phenotypicModelSystemKeyword: null,
+          phenotypicModelSystemKeyword: null,
+          phenotypicProfilingStrategyKeyword: null,
+          phenotypicSequencingTypeKeyword: null,
+        }
       }
     },
 
@@ -888,66 +979,66 @@ export default {
       )
       const combinedKeywords = []
       let variantKeywords = []
-      if(this.variantLibraryKeyword === "Endogenous locus library method") {
+      if(this.keywordKey.variantLibraryKeyword === "Endogenous locus library method") {
         variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
-            "description": this.variantLibraryKeywordDescription,
+            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKey.variantLibraryKeyword},
+            "description": this.keywordDescription.variantLibraryKeywordDescription,
           },
           {
-            "keyword": {"key": "Endogenous Locus Library Method System", "value": this.endogenousSystemKeyword},
-            "description": this.endogenousSystemKeywordDescription,
+            "keyword": {"key": "Endogenous Locus Library Method System", "value": this.keywordKey.endogenousSystemKeyword},
+            "description": this.keywordDescription.endogenousSystemKeywordDescription,
           },
           {
-            "keyword": {"key": "Endogenous Locus Library Method Mechanism", "value": this.endogenousMechanismKeyword},
-            "description": this.endogenousMechanismKeywordDescription,
+            "keyword": {"key": "Endogenous Locus Library Method Mechanism", "value": this.keywordKey.endogenousMechanismKeyword},
+            "description": this.keywordDescription.endogenousMechanismKeywordDescription,
           }
         ]
-      }else if(this.variantLibraryKeyword === "In vitro construct library method"){
+      }else if(this.keywordKey.variantLibraryKeyword === "In vitro construct library method"){
         variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
-            "description": this.variantLibraryKeywordDescription,
+            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKey.variantLibraryKeyword},
+            "description": this.keywordDescription.variantLibraryKeywordDescription,
           },
           {
-            "keyword": {"key": "In Vitro Construct Library Method System", "value": this.inVitroSystemKeyword},
-            "description": this.inVitroSystemKeywordDescription,
+            "keyword": {"key": "In Vitro Construct Library Method System", "value": this.keywordKey.inVitroSystemKeyword},
+            "description": this.keywordDescription.inVitroSystemKeywordDescription,
           },
           {
-            "keyword": {"key": "In Vitro Construct Library Method Mechanism", "value": this.inVitroMechanismKeyword},
-            "description": this.inVitroMechanismKeywordDescription,
+            "keyword": {"key": "In Vitro Construct Library Method Mechanism", "value": this.keywordKey.inVitroMechanismKeyword},
+            "description": this.keywordDescription.inVitroMechanismKeywordDescription,
           }
         ]
-      }else if(this.variantLibraryKeyword === "Other"){
+      }else if(this.keywordKey.variantLibraryKeyword === "Other"){
         variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.variantLibraryKeyword},
-            "description": this.variantLibraryKeywordDescription,
+            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKey.variantLibraryKeyword},
+            "description": this.keywordDescription.variantLibraryKeywordDescription,
           }
         ]
       }
       combinedKeywords.push(...variantKeywords)
       const phenotypicKeywords = [
         {
-          "keyword": {"key": "Delivery method", "value": this.deliveryMethodKeyword},
-          "description": this.deliveryMethodKeywordDescription,
+          "keyword": {"key": "Delivery method", "value": this.keywordKey['deliveryMethodKeyword']},
+          "description": this.keywordDescription.deliveryMethodKeywordDescription,
         },
         {
-          "keyword": {"key": "Phenotypic Assay Dimensionality", "value": this.phenotypicDimensionalityKeyword},
-          "description": this.phenotypicDimensionalityKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Dimensionality", "value": this.keywordKey['phenotypicDimensionalityKeyword']},
+          "description": this.keywordDescription.phenotypicDimensionalityKeywordDescription,
         },
         {
-          "keyword": {"key": "Phenotypic Assay Method", "value": this.phenotypicMethodKeyword},
-          "description": this.phenotypicMethodKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Method", "value": this.keywordKey['phenotypicMethodKeyword']},
+          "description": this.keywordDescription.phenotypicMethodKeywordDescription,
         },
         {
-          "keyword": {"key": "Phenotypic Assay Model System", "value": this.phenotypicModelSystemKeyword},
-          "description": this.phenotypicModelSystemKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Model System", "value": this.keywordKey['phenotypicModelSystemKeyword']},
+          "description": this.keywordDescription.phenotypicModelSystemKeywordDescription,
         },
         {
-          "keyword": {"key": "Phenotypic Assay Profiling Strategy", "value": this.phenotypicProfilingStrategyKeyword},
-          "description": this.phenotypicProfilingStrategyKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Profiling Strategy", "value": this.keywordKey['phenotypicProfilingStrategyKeyword']},
+          "description": this.keywordDescription.phenotypicProfilingStrategyKeywordDescription,
         },
         {
-          "keyword": {"key": "Phenotypic Assay Sequencing Read Type", "value": this.phenotypicSequencingTypeKeyword},
-          "description": this.phenotypicSequencingTypeKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Sequencing Read Type", "value": this.keywordKey['phenotypicSequencingTypeKeyword']},
+          "description": this.keywordDescription.phenotypicSequencingTypeKeywordDescription,
         }
       ]
       combinedKeywords.push(...phenotypicKeywords)
@@ -1059,10 +1150,17 @@ export default {
       return _.get(...args)
     },
 
+    getKeywordOptions(optionsName) {
+      return this[optionsName]
+    },
+
     keywordToggleInput: function(field) {
       this.keywordTextVisible[field] = !this.keywordTextVisible[field]
-    }
+    },
 
+    showDialog: function (index) {
+      this.dialogVisible[index] = true
+    },
   }
 }
 
@@ -1072,12 +1170,6 @@ export default {
 
 <style scoped>
 
-/* Keywords */
-
-.custom-keyword-dropdown .p-dropdown-trigger {
-  width: 600px; 
-}
-
 /* Cards */
 
 .mave-experiment-editor:deep(.p-card) {
@@ -1101,6 +1193,13 @@ export default {
   z-index: 1001;
 }
 
+/* Keywords */
+
+.keyword-dropdown {
+  width: 450px;
+  height: 45px;
+}
+
 .keyword-editor .field {
   display: flex;
   align-items: center;
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index d7142994..1043333a 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -89,13 +89,25 @@
           <div class="mave-score-set-keywords">
             <li v-for="(keyword, index) in item.keywords" :key="index">
               {{ keyword.keyword.key }}
+              <!--Present local database keyword description-->
               <i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(index)"/>
-              <Dialog v-model:visible="dialogVisible[index]" modal header="Description" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+              <Dialog v-model:visible="dialogVisible[index]" modal :header="keyword.keyword.key" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
                 <p class="m-0">
                   {{ keyword.keyword.description }}
                 </p>
-                <div v-if="keyword.description">Extra description: {{ keyword.description }}</div>
               </Dialog> : <a :href="`https://www.mavedb.org/search/?keywords=${keyword.keyword.value}`">{{ keyword.keyword.value }}</a>
+              <!--Present user's description-->
+              <div class="field" v-if="keyword.description">
+                <div v-if="keyword.description.length >= 500"> 
+                  <div v-if="readFullDescription">{{ keyword.description.substring(0, 500) + "...." }}
+                  </div>
+                  <div v-else>{{ keyword.description }}</div>
+                  <Button @click="readFullDescription = !readFullDescription" class="p-button-text p-button-sm p-button-info">
+                    {{ readFullDescription ? 'Show more' : 'Show less' }}
+                  </Button>
+                </div>
+                <div v-else>{{ keyword.description }}</div>
+              </div>
             </li>
           </div>
         </div>
@@ -227,7 +239,8 @@ export default {
   data: () => ({
     associatedScoreSets: [],
     dialogVisible: [],
-    readMore: true
+    readMore: true,
+    readFullDescription: true,
   }),
 
   created() {

From 7cc846d016f5b5e975cdc2e277143399a32fa747 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Mon, 29 Jul 2024 16:28:00 +1000
Subject: [PATCH 12/17] Simplified codes but can't show validation error msg
 correctly yet.

---
 src/components/screens/ExperimentEditor.vue | 628 ++++++--------------
 1 file changed, 183 insertions(+), 445 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 83e54380..cc0a095e 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -211,261 +211,53 @@
               <div class="field">
                 <label style="font-weight: bold; margin-right: 3px;">Keywords</label>
               </div>
-              <div class="field">
-                <span class="p-float-label">
-                  <Dropdown
-                      v-model="keywordKey.variantLibraryKeyword"
-                      :id="$scopedId('input-variant-library-keywords')"
-                      :options="variantLibraryKeywordOptions"
-                      optionLabel="value"
-                      optionValue="value"
-                      class="keyword-dropdown"
-                  />
-                  <label :for="$scopedId('input-variant-library-keywords')">Variant Library Creation Method</label>
-                </span>
-                <Button
-                    class="keyword-description-button" 
-                    rounded
-                    :disabled="keywordKey.variantLibraryKeyword == 'Other' ? true : null"
-                    :icon="(keywordTextVisible['variantLibrary'] || keywordKey.variantLibraryKeyword === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'"
-                    @click="keywordToggleInput('variantLibrary')"
-                    aria-label="Filter"
-                />
-                &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.variantLibraryKeyword)"/>
-                <Dialog
-                  v-model:visible="dialogVisible[keywordKey.variantLibraryKeyword]"
-                  modal
-                  header="Variant Library Creation Method"
-                  :style="{ width: '50vw' }"
-                  :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
-                >
-                  <p class="m-0">
-                    {{ variantLibraryKeywordOptions[0].description }}
-                  </p>
-                </Dialog>
-                <span v-if="validationErrors.keywords?.variantLibraryKeyword" class="mave-field-error">{{validationErrors.keywords?.variantLibraryKeyword}}</span>
-              </div>
-              <div class="field" v-if="keywordTextVisible['variantLibrary'] || keywordKey.variantLibraryKeyword==='Other'">
-                <span class="p-float-label keyword-description-input">
-                  <Textarea v-model="keywordDescription.variantLibraryKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                  <label :for="$scopedId('input-title')">Variant Library Creation Method Description {{keywordKey.variantLibraryKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                </span>
-                <span v-if="validationErrors.keywords?.variantLibraryKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.variantLibraryKeywordDescription}}</span>
-              </div>
-              <div v-if="keywordKey.variantLibraryKeyword === 'Endogenous locus library method'">
-                <div class="field">
-                  <span class="p-float-label">
-                    <Dropdown
-                        v-model="keywordKey.endogenousSystemKeyword"
-                        :id="$scopedId('input-endogenous-system-keywords')"
-                        :options="endogenousSystemKeywordOptions"
-                        optionLabel="value"
-                        optionValue="value"
-                        class="keyword-dropdown"
-                    />
-                    <label :for="$scopedId('input-endogenous-system-keywords')">Endogenous Locus Library Method System</label>
-                  </span>
-                  <Button 
-                    class="keyword-description-button" 
-                    rounded
-                    :disabled="keywordKey.endogenousSystemKeyword == 'Other' ? true : null"
-                    :icon="(keywordTextVisible['endogenousSystem']  || keywordKey.endogenousSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
-                    @click="keywordToggleInput('endogenousSystem')" 
-                    aria-label="Filter"
-                  />
-                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.endogenousSystemKeyword)"/>
-                  <Dialog 
-                    v-model:visible="dialogVisible[keywordKey.endogenousSystemKeyword]"
-                    modal
-                    header="Endogenous Locus Library Method System"
-                    :style="{ width: '50vw' }"
-                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
-                  >
-                    <p class="m-0">
-                      {{ endogenousSystemKeywordOptions[0].description }}
-                    </p>
-                  </Dialog>
-                  <span v-if="validationErrors.keywords?.endogenousSystemKeyword" class="mave-field-error">{{validationErrors.keywords?.endogenousSystemKeyword}}</span>
-                </div>
-                <div class="field" v-if="keywordTextVisible['endogenousSystem'] || keywordKey.endogenousSystemKeyword==='Other'">
-                  <span class="p-float-label keyword-description-input ">
-                    <Textarea v-model="keywordDescription.endogenousSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method System Description {{keywordKey.endogenousSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                  </span>
-                  <span v-if="validationErrors.keywords?.endogenousSystemKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.endogenousSystemKeywordDescription}}</span>
-                </div>
-                <div class="field">
-                  <span class="p-float-label">
-                    <Dropdown
-                        v-model="keywordKey.endogenousMechanismKeyword"
-                        :id="$scopedId('input-endogenous-mechanism-keywords')"
-                        :options="endogenousMechanismKeywordOptions"
-                        optionLabel="value"
-                        optionValue="value"
-                        class="keyword-dropdown"
-                    />
-                    <label :for="$scopedId('input-endogenous-mechanism-keywords')">Endogenous Locus Library Method Mechanism</label>
-                  </span>
-                  <Button 
-                    class="keyword-description-button" 
-                    rounded
-                    :disabled="keywordKey.endogenousMechanismKeyword == 'Other' ? true : null"  
-                    :icon="(keywordTextVisible['endogenousMechanism'] || keywordKey.endogenousMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
-                    @click="keywordToggleInput('endogenousMechanism')" 
-                    aria-label="Filter"
-                  />
-                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.endogenousMechanismKeyword)"/>
-                  <Dialog 
-                    v-model:visible="dialogVisible[keywordKey.endogenousMechanismKeyword]" 
-                    modal 
-                    header="Endogenous Locus Library Method Mechanism" 
-                    :style="{ width: '50vw' }" 
-                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
-                  >
-                    <p class="m-0">
-                      {{ endogenousMechanismKeywordOptions[0].description }}
-                    </p>
-                  </Dialog>
-                  <span v-if="validationErrors.keywords?.endogenousMechanismKeyword" class="mave-field-error">{{validationErrors.keywords?.endogenousMechanismKeyword}}</span>
-                </div>
-                <div class="field" v-if="keywordTextVisible['endogenousMechanism'] || keywordKey.endogenousMechanismKeyword==='Other'">
-                  <span class="p-float-label keyword-description-input">
-                    <Textarea v-model="keywordDescription.endogenousMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">Endogenous Locus Library Method Mechanism Description {{keywordKey.endogenousMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                  </span>
-                  <span v-if="validationErrors.keywords?.endogenousMechanismKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.endogenousMechanismKeywordDescription}}</span>
-                </div>
-              </div>
-              <div v-if="keywordKey.variantLibraryKeyword === 'In vitro construct library method'">
-                <div class="field">
-                  <span class="p-float-label">
-                    <Dropdown
-                        v-model="keywordKey.inVitroSystemKeyword"
-                        :id="$scopedId('input-in-vitro-system-keywords')"
-                        :options="inVitroSystemKeywordOptions"
-                        optionLabel="value"
-                        optionValue="value"
-                        class="keyword-dropdown"
-                    />
-                    <label :for="$scopedId('input-in-vitro-system-keywords')">In Vitro Construct Library Method System</label>
-                  </span>
-                  <Button
-                    class="keyword-description-button" 
-                    rounded
-                    :disabled="keywordKey.inVitroSystemKeyword == 'Other' ? true : null" 
-                    :icon="(keywordTextVisible['inVitroSystem'] || keywordKey.inVitroSystemKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
-                    @click="keywordToggleInput('inVitroSystem')" 
-                    aria-label="Filter"
-                  />
-                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.inVitroSystemKeyword)"/>
-                  <Dialog
-                    v-model:visible="dialogVisible[keywordKey.inVitroSystemKeyword]"
-                    modal
-                    header="In Vitro Construct Library Method System" 
-                    :style="{ width: '50vw' }" 
-                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
-                  >
-                    <p class="m-0">
-                      {{ inVitroSystemKeywordOptions[0].description }}
-                    </p>
-                  </Dialog>
-                  <span v-if="validationErrors.keywords?.inVitroSystemKeyword" class="mave-field-error">{{validationErrors.keywords?.inVitroSystemKeyword}}</span>
-                </div>
-                <div class="field" v-if="keywordTextVisible['inVitroSystem'] || keywordKey.inVitroSystemKeyword==='Other'">
-                  <span class="p-float-label keyword-description-input">
-                    <Textarea v-model="keywordDescription.inVitroSystemKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method System Description {{keywordKey.inVitroSystemKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                  </span>
-                  <span v-if="validationErrors.keywords?.inVitroSystemKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.inVitroSystemKeywordDescription}}</span>
-                </div>
-                <div class="field">
-                  <span class="p-float-label">
-                    <Dropdown
-                        v-model="keywordKey.inVitroMechanismKeyword"
-                        :id="$scopedId('input-in-vitro-mechanism-keywords')"
-                        :options="inVitroMechanismKeywordOptions"
+              <div v-for="keyword in keywordData" :key="keyword.key">
+                <div v-if="keywordVisibility[keyword.key]">
+                  <div class="field">
+                    <span class="p-float-label">
+                      <Dropdown
+                        v-model="keywordKeys[keyword.key]"
+                        :id="$scopedId(`keyword-input-${keyword.key}`)"
+                        :options="getKeywordOptions(keyword.option)" 
                         optionLabel="value"
                         optionValue="value"
                         class="keyword-dropdown"
+                      />
+                      <label :for="$scopedId(`keyword-input-${keyword.key}`)">{{ keyword.key }}</label>
+                    </span>
+                    <Button
+                      class="keyword-description-button"
+                      rounded
+                      :disabled="keywordKeys[keyword.key] == 'Other' ? true : null"
+                      :icon="(keywordTextVisible[keyword.key] || keywordKeys[keyword.key] === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'"
+                      @click="keywordToggleInput(keyword.key)"
+                      aria-label="Filter"
                     />
-                    <label :for="$scopedId('input-in-vitro-mechanism-keywords')">In Vitro Construct Library Method Mechanism</label>
-                  </span>
-                  <Button 
-                    class="keyword-description-button" 
-                    rounded
-                    :disabled="keywordKey.inVitroMechanismKeyword == 'Other' ? true : null" 
-                    :icon="(keywordTextVisible['inVitroMechanism'] || keywordKey.inVitroMechanismKeyword==='Other')? 'pi pi-minus' : 'pi pi-file-edit'" 
-                    @click="keywordToggleInput('inVitroMechanism')" 
-                    aria-label="Filter"
-                  />
-                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keywordKey.inVitroMechanismKeyword)"/>
-                  <Dialog
-                    v-model:visible="dialogVisible[keywordKey.inVitroMechanismKeyword]"
-                    modal
-                    header="In Vitro Construct Library Method Mechanism"
-                    :style="{ width: '50vw' }"
-                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
-                  >
-                    <p class="m-0">
-                      {{ inVitroMechanismKeywordOptions[0].description }}
-                    </p>
-                  </Dialog>
-                  <span v-if="validationErrors.keywords?.inVitroMechanismKeyword" class="mave-field-error">{{validationErrors.keywords?.inVitroMechanismKeyword}}</span>
-                </div>  
-                <div class="field" v-if="keywordTextVisible['inVitroMechanism'] || keywordKey.inVitroMechanismKeyword==='Other'">
-                  <span class="p-float-label keyword-description-input">
-                    <Textarea v-model="keywordDescription.inVitroMechanismKeywordDescription" :id="$scopedId('input-title')" rows="4"/>
-                    <label :for="$scopedId('input-title')">In Vitro Construct Library Method Mechanism Description {{keywordKey.inVitroMechanismKeyword==='Other' ? '(Required)' : '(Optional)'}}</label>
-                  </span>
-                  <span v-if="validationErrors.keywords?.inVitroMechanismKeywordDescription" class="mave-field-error">{{validationErrors.keywords?.inVitroMechanismKeywordDescription}}</span>
-                </div>
-              </div>
-              <!--For the rest keywords. They do not have any condition check as previous ones.-->
-              <div v-for="(keyword, index) in keywordData" :key="index">
-                <div class="field">
-                  <span class="p-float-label">
-                    <Dropdown
-                      v-model="keywordKey[keyword.model]"
-                      :id="$scopedId(keyword.id)"
-                      :options="getKeywordOptions(keyword.options)"
-                      optionLabel="value"
-                      optionValue="value"
-                      class="keyword-dropdown"
-                    />
-                    <label :for="$scopedId(keyword.id)">{{ keyword.label }}</label>
-                  </span>
-                  <Button
-                    class="keyword-description-button"
-                    rounded
-                    :disabled="keywordKey[keyword.model] == 'Other' ? true : null"
-                    :icon="(keywordTextVisible[keyword.key] || keywordKey[keyword.model] === 'Other') ? 'pi pi-minus' : 'pi pi-file-edit'"
-                    @click="keywordToggleInput(keyword.key)"
-                    aria-label="Filter"
-                  />
-                  &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(index)"/>
-                  <Dialog
-                    v-model:visible="dialogVisible[index]"
-                    modal
-                    :header="keyword.label"
-                    :style="{ width: '50vw' }"
-                    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
-                  >
-                    <p class="m-0">
-                      {{ getKeywordOptions(keyword.options)[0].description }}
-                    </p>
-                  </Dialog>
-                  <span v-if="validationErrors.keywords?.[keyword.model]" class="mave-field-error">{{ validationErrors.keywords?.[keyword.model] }}</span>
-                </div>
-                <div class="field" v-if="keywordTextVisible[keyword.key] || keywordKey[keyword.model] === 'Other'">
-                  <span class="p-float-label keyword-description-input">
-                    <Textarea
-                      v-model="keywordDescription[keyword.descriptionModel]"
-                      :id="$scopedId('input-title')"
-                      rows="4"
-                    />
-                    <label :for="$scopedId('input-title')">{{ keyword.descriptionLabel }} {{ keywordKey[keyword.model] === 'Other' ? '(Required)' : '(Optional)' }}</label>
-                  </span>
-                  <span v-if="validationErrors.keywords?.[keyword.descriptionModel]" class="mave-field-error"> {{ validationErrors.keywords?.[keyword.descriptionModel] }}</span>
+                    &nbsp;<i class="pi pi-info-circle" style="color: green; cursor: pointer;" @click="showDialog(keyword.key)"/>
+                    <Dialog
+                      v-model:visible="dialogVisible[keyword.key]"
+                      modal
+                      :header="keyword.key"
+                      :style="{ width: '50vw' }"
+                      :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+                    >
+                      <p class="m-0">
+                        {{ getKeywordOptions(keyword.option)[0].description }}
+                      </p>
+                    </Dialog>
+                    <span v-if="validationErrors.keywords?.[keyword.key]" class="mave-field-error">{{ validationErrors.keywords?.[keyword.key] }}</span>
+                  </div>
+                  <div class="field" v-if="keywordTextVisible[keyword.key] || keywordKeys[keyword.key] === 'Other'">
+                    <span class="p-float-label keyword-description-input">
+                      <Textarea
+                        v-model="keywordDescriptions[keyword.key]"
+                        :id="$scopedId('input-title')"
+                        rows="4"
+                      />
+                      <label :for="$scopedId('input-title')">{{ keyword.descriptionLabel }} {{ keywordKeys[keyword.key] === 'Other' ? '(Required)' : '(Optional)' }}</label>
+                    </span>
+                    <span v-if="validationErrors.keywordDescriptions?.[keyword.descriptionLabel]" class="mave-field-error"> {{ validationErrors.keywordDescriptions?.[keyword.descriptionLabel] }}</span>
+                  </div>
                 </div>
               </div>
               <div class="field">
@@ -512,6 +304,64 @@ import config from '@/config'
 import {normalizeDoi, normalizePubmedId, normalizeRawRead, validateDoi, validatePubmedId, validateRawRead} from '@/lib/identifiers'
 import useFormatters from '@/composition/formatters'
 
+const KEYWORDS = [
+  {
+    key: 'Variant Library Creation Method',
+    descriptionLabel: 'Variant Library Creation Method Description',
+    option: 'variantLibraryKeywordOptions',
+  },
+  {
+    key: 'Endogenous Locus Library Method System',
+    descriptionLabel: 'Endogenous Locus Library Method System Description',
+    option: 'endogenousSystemKeywordOptions',
+  },
+  {
+    key: 'Endogenous Locus Library Method Mechanism',
+    descriptionLabel: 'Endogenous Locus Library Method Mechanism Description',
+    option: 'endogenousMechanismKeywordOptions',
+  },
+  {
+    key: 'In Vitro Construct Library Method System',
+    descriptionLabel: 'In Vitro Construct Library Method System Description',
+    option: 'inVitroSystemKeywordOptions',
+  },
+  {
+    key: 'In Vitro Construct Library Method Mechanism',
+    descriptionLabel: 'In Vitro Construct Library Method Mechanism Description',
+    option: 'inVitroMechanismKeywordOptions',
+  },
+  {
+    key: 'Delivery method',
+    descriptionLabel: 'Delivery method Description',
+    option: 'deliveryMethodKeywordOptions',
+  },
+  {
+    key: 'Phenotypic Assay Dimensionality',
+    descriptionLabel: 'Phenotypic Assay Dimensionality Description',
+    option: 'phenotypicDimensionalityKeywordOptions'
+  },
+  {
+    key: 'Phenotypic Assay Method',
+    descriptionLabel: 'Phenotypic Assay Method Description',
+    option: 'phenotypicMethodKeywordOptions',
+  },
+  {
+    key: 'Phenotypic Assay Model System',
+    descriptionLabel: 'Phenotypic Assay Model System Description',
+    option: 'phenotypicModelSystemKeywordOptions',
+  },
+  {
+    key: 'Phenotypic Assay Profiling Strategy',
+    descriptionLabel: 'Phenotypic Assay Profiling Strategy Description',
+    option: 'phenotypicProfilingStrategyKeywordOptions',
+  },
+  {
+    key: 'Phenotypic Assay Sequencing Read Type',
+    descriptionLabel: 'Phenotypic Assay Sequencing Read Type Description',
+    option: 'phenotypicSequencingTypeKeywordOptions',
+  }
+]
+
 export default {
   name: 'ExperimentEditor',
   components: { AutoComplete, Button, Card, Chips, Dialog, Dropdown, Multiselect, DefaultLayout, EmailPrompt, FileUpload, InputText, ProgressSpinner, TabPanel, TabView, Textarea },
@@ -533,6 +383,19 @@ export default {
     return {
       ...useFormatters(),
       ...useItem({itemTypeName: 'experiment'}),
+      // keywordOptions: {
+      //   'Variant Library Creation Method': variantLibraryKeywordOptions.items,
+      //   'Endogenous Locus Library Method System': endogenousSystemKeywordOptions.items,
+      //   'Endogenous Locus Library Method Mechanism': endogenousMechanismKeywordOptions.items,
+      //   'In Vitro Construct Library Method System': inVitroSystemKeywordOptions.items,
+      //   'In Vitro Construct Library Method Mechanism': inVitroMechanismKeywordOptions.items,
+      //   'Delivery method': deliveryMethodKeywordOptions.items,
+      //   'Phenotypic Assay Dimensionality': phenotypicDimensionalityKeywordOptions.items,
+      //   'Phenotypic Assay Method': phenotypicMethodKeywordOptions.items,
+      //   'Phenotypic Assay Model System': phenotypicModelSystemKeywordOptions.items,
+      //   'Phenotypic Assay Profiling Strategy': phenotypicProfilingStrategyKeywordOptions.items,
+      //   'Phenotypic Assay Sequencing Read Type': phenotypicSequencingTypeKeywordOptions.items,
+      // },
       variantLibraryKeywordOptions: variantLibraryKeywordOptions.items,
       endogenousSystemKeywordOptions: endogenousSystemKeywordOptions.items,
       endogenousMechanismKeywordOptions: endogenousMechanismKeywordOptions.items,
@@ -570,102 +433,9 @@ export default {
     dialogVisible: [],
     methodText: null,
     keywords: [],
-    keywordDescription: {
-      variantLibraryKeywordDescription: null,
-      endogenousSystemKeywordDescription: null,
-      endogenousMechanismKeywordDescription: null,
-      inVitroSystemKeywordDescription: null,
-      inVitroMechanismKeywordDescription: null,
-      deliveryMethodKeywordDescription: null,
-      phenotypicDimensionalityKeywordDescription: null,
-      phenotypicMethodKeywordDescription: null,
-      phenotypicModelSystemKeywordDescription: null,
-      phenotypicProfilingStrategyKeywordDescription: null,
-      phenotypicSequencingTypeKeywordDescription: null,
-    },
-    keywordKey: {
-      variantLibraryKeyword: null,
-      endogenousSystemKeyword: null,
-      endogenousMechanismKeyword: null,
-      inVitroSystemKeyword: null,
-      inVitroMechanismKeyword: null,
-      deliveryMethodKeyword: null,
-      phenotypicDimensionalityKeyword: null,
-      phenotypicMethodKeyword: null,
-      phenotypicModelSystemKeyword: null,
-      phenotypicModelSystemKeyword: null,
-      phenotypicProfilingStrategyKeyword: null,
-      phenotypicSequencingTypeKeyword: null,
-    },
-    keywordData: [
-        {
-          model: 'deliveryMethodKeyword',
-          id: 'delivery-method-keywords',
-          options: 'deliveryMethodKeywordOptions',
-          label: 'Delivery Method',
-          key: 'deliveryMethod',
-          descriptionModel: 'deliveryMethodKeywordDescription',
-          descriptionLabel: 'Delivery Method Description',
-        },
-        {
-          model: 'phenotypicDimensionalityKeyword',
-          id: 'phenotypic-dimensionality-keywords',
-          options: 'phenotypicDimensionalityKeywordOptions',
-          label: 'Phenotypic Assay Dimensionality',
-          key: 'phenotypicDimensionality',
-          descriptionModel: 'phenotypicDimensionalityKeywordDescription',
-          descriptionLabel: 'Phenotypic Assay Dimensionality Description',
-        },
-        {
-          model: 'phenotypicMethodKeyword',
-          id: 'phenotypic-method-keywords',
-          options: 'phenotypicMethodKeywordOptions',
-          label: 'Phenotypic Assay Method',
-          key: 'phenotypicMethod',
-          descriptionModel: 'phenotypicMethodKeywordDescription',
-          descriptionLabel: 'Phenotypic Assay Method Description',
-        },
-        {
-          model: 'phenotypicModelSystemKeyword',
-          id: 'phenotypic-model-system-keywords',
-          options: 'phenotypicModelSystemKeywordOptions',
-          label: 'Phenotypic Assay Model System',
-          key: 'phenotypicModelSystem',
-          descriptionModel: 'phenotypicModelSystemKeywordDescription',
-          descriptionLabel: 'Phenotypic Assay Model System Description',
-        },
-        {
-          model: 'phenotypicProfilingStrategyKeyword',
-          id: 'phenotypic-profiling-strategy-keywords',
-          options: 'phenotypicProfilingStrategyKeywordOptions',
-          label: 'Phenotypic Assay Profiling Strategy',
-          key: 'phenotypicProfilingStrategy',
-          descriptionModel: 'phenotypicProfilingStrategyKeywordDescription',
-          descriptionLabel: 'Phenotypic Assay Profiling Strategy Description',
-        },
-        {
-          model: 'phenotypicSequencingTypeKeyword',
-          id: 'phenotypic-sequencing-type-keywords',
-          options: 'phenotypicSequencingTypeKeywordOptions',
-          label: 'Phenotypic Assay Sequencing Read Type',
-          key: 'phenotypicSequencingType',
-          descriptionModel: 'phenotypicSequencingTypeKeywordDescription',
-          descriptionLabel: 'Phenotypic Assay Sequencing Read Type Description',
-        },
-    ],
-    keywordTextVisible:{
-        variantLibrary: false,
-        endogenousSystem: false,
-        endogenousMechanism: false,
-        inVitroSystem: false,
-        inVitroMechanism: false,
-        deliveryMethod: false,
-        phenotypicDimensionality: false,
-        phenotypicMethod: false,
-        phenotypicModelSystem: false,
-        phenotypicProfilingStrategy: false,
-        phenotypicSequencingType: false
-      },
+    keywordKeys: _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, null])),
+    keywordDescriptions: _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, null])),
+    keywordTextVisible: _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, false])),
     doiIdentifiers: [],
     primaryPublicationIdentifiers: [],
     secondaryPublicationIdentifiers: [],
@@ -682,28 +452,9 @@ export default {
       scoresFile: null
     },
     validationErrors: {
-      keywords: {
-        // Condition check keywords
-        variantLibraryKeyword: null,
-        endogenousSystemKeyword: null,
-        endogenousMechanismKeyword: null,
-        inVitroSystemKeyword: null,
-        inVitroMechanismKeyword: null,
-        variantLibraryKeywordDescription: null,
-        endogenousSystemKeywordDescription: null,
-        endogenousMechanismKeywordDescription: null,
-        inVitroSystemKeywordDescription: null,
-        inVitroMechanismKeywordDescription: null,
-        // For loop keywords
-        variantLibraryKeyword: null,
-        deliveryMethodKeywordDescription: null,
-        phenotypicDimensionalityKeywordDescription: null,
-        phenotypicMethodKeywordDescription: null,
-        phenotypicModelSystemKeywordDescription: null,
-        phenotypicProfilingStrategyKeywordDescription: null,
-        phenotypicSequencingTypeKeywordDescription: null,
-      },
-    },
+      keywords: _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, null])),
+      keywordDescriptions: _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, null])),
+    }
   }),
 
   computed: {
@@ -718,6 +469,18 @@ export default {
         return publicationIdentifierSuggestions
       }
     },
+    keywordVisibility: function() {
+      return {
+        ..._.fromPairs(KEYWORDS.map((keyword) => [keyword.key, true])),
+        'Endogenous Locus Library Method System': this.keywordKeys['Variant Library Creation Method'] == 'Endogenous locus library method',
+        'Endogenous Locus Library Method Mechanism': this.keywordKeys['Variant Library Creation Method'] == 'Endogenous locus library method',
+        'In Vitro Construct Library Method System': this.keywordKeys['Variant Library Creation Method'] == 'In vitro construct library method',
+        'In Vitro Construct Library Method Mechanism': this.keywordKeys['Variant Library Creation Method'] == 'In vitro construct library method',
+      }
+    },
+    keywordData() {
+      return KEYWORDS
+    },
   },
 
   watch: {
@@ -732,14 +495,14 @@ export default {
       },
       immediate: true
     },
-    'keywordKey.variantLibraryKeyword': function(newValue) {
+    'keywordKeys.Variant Library Creation Method': function(newValue) {
       if (newValue !== 'Endogenous locus library method') {
-        this.keywordKey.endogenousSystemKeyword = null
-        this.keywordKey.endogenousMechanismKeyword = null
+        this.keywordKeys['Endogenous Locus Library Method System'] = null
+        this.keywordKeys['Endogenous Locus Library Method Mechanism'] = null
       }
       if (newValue !== 'In vitro construct library method') {
-        this.keywordKey.inVitroSystemKeyword = null
-        this.keywordKey.inVitroMechanismKeyword = null
+        this.keywordKeys['In Vitro Construct Library Method System'] = null
+        this.keywordKeys['In Vitro Construct Library Method Mechanism'] = null
       }
     }
   },
@@ -868,51 +631,26 @@ export default {
     resetKeywords: function() {
       if (this.item && this.item.keywords.length !== 0) {
         // Keywords could be an empty list now. Will modify it back to compulsory when we get final list. 
-        const setKeyword = (key, keywordProp, descriptionProp) => {
+        const setKeyword = (key) => {
           const keywordObj = this.item.keywords.find(keyword => keyword.keyword.key === key)
-          this.keywordKey[keywordProp] = keywordObj ? keywordObj.keyword.value : null
-          this.keywordDescription[descriptionProp] = keywordObj ? keywordObj.description : null
+          this.keywordKeys[key] = keywordObj ? keywordObj.keyword.value : null
+          this.keywordDescriptions[key] = keywordObj ? keywordObj.description : null
         }
-        setKeyword("Variant Library Creation Method", "variantLibraryKeyword", "variantLibraryKeywordDescription")
-        setKeyword("Endogenous Locus Library Method System", "endogenousSystemKeyword", "endogenousSystemKeywordDescription")
-        setKeyword("Endogenous Locus Library Method Mechanism", "endogenousMechanismKeyword", "endogenousMechanismKeywordDescription")
-        setKeyword("In Vitro Construct Library Method System", "inVitroSystemKeyword", "inVitroSystemKeywordDescription")
-        setKeyword("In Vitro Construct Library Method Mechanism", "inVitroMechanismKeyword", "inVitroMechanismKeywordDescription")
-        setKeyword("Delivery method", "deliveryMethodKeyword", "deliveryMethodKeywordDescription")
-        setKeyword("Phenotypic Assay Dimensionality", "phenotypicDimensionalityKeyword", "phenotypicDimensionalityKeywordDescription")
-        setKeyword("Phenotypic Assay Method", "phenotypicMethodKeyword", "phenotypicMethodKeywordDescription")
-        setKeyword("Phenotypic Assay Model System", "phenotypicModelSystemKeyword", "phenotypicModelSystemKeywordDescription")
-        setKeyword("Phenotypic Assay Profiling Strategy", "phenotypicProfilingStrategyKeyword", "phenotypicProfilingStrategyKeywordDescription")
-        setKeyword("Phenotypic Assay Sequencing Read Type", "phenotypicSequencingTypeKeyword", "phenotypicSequencingTypeKeywordDescription")
+        setKeyword("Variant Library Creation Method")
+        setKeyword("Endogenous Locus Library Method System")
+        setKeyword("Endogenous Locus Library Method Mechanism")
+        setKeyword("In Vitro Construct Library Method System")
+        setKeyword("In Vitro Construct Library Method Mechanism")
+        setKeyword("Delivery method")
+        setKeyword("Phenotypic Assay Dimensionality")
+        setKeyword("Phenotypic Assay Method")
+        setKeyword("Phenotypic Assay Model System")
+        setKeyword("Phenotypic Assay Profiling Strategy")
+        setKeyword("Phenotypic Assay Sequencing Read Type")
       } else {
         this.keywords = []
-        this.keywordDescription = {
-          variantLibraryKeywordDescription: null,
-          deliveryMethodKeywordDescription: null,
-          endogenousSystemKeywordDescription: null,
-          endogenousMechanismKeywordDescription: null,
-          inVitroSystemKeywordDescription: null,
-          inVitroMechanismKeywordDescription: null,
-          phenotypicDimensionalityKeywordDescription: null,
-          phenotypicMethodKeywordDescription: null,
-          phenotypicModelSystemKeywordDescription: null,
-          phenotypicProfilingStrategyKeywordDescription: null,
-          phenotypicSequencingTypeKeywordDescription: null,
-        }
-        this.keywordKey = {
-          variantLibraryKeyword: null,
-          endogenousSystemKeyword: null,
-          endogenousMechanismKeyword: null,
-          inVitroSystemKeyword: null,
-          inVitroMechanismKeyword: null,
-          deliveryMethodKeyword: null,
-          phenotypicDimensionalityKeyword: null,
-          phenotypicMethodKeyword: null,
-          phenotypicModelSystemKeyword: null,
-          phenotypicModelSystemKeyword: null,
-          phenotypicProfilingStrategyKeyword: null,
-          phenotypicSequencingTypeKeyword: null,
-        }
+        this.keywordKeys = _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, null]))
+        this.keywordKeys = _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, null]))
       }
     },
 
@@ -979,66 +717,66 @@ export default {
       )
       const combinedKeywords = []
       let variantKeywords = []
-      if(this.keywordKey.variantLibraryKeyword === "Endogenous locus library method") {
+      if(this.keywordKeys['Variant Library Creation Method'] === "Endogenous locus library method") {
         variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKey.variantLibraryKeyword},
-            "description": this.keywordDescription.variantLibraryKeywordDescription,
+            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKeys['Variant Library Creation Method']},
+            "description": this.keywordDescriptions['Variant Library Creation Method'],
           },
           {
-            "keyword": {"key": "Endogenous Locus Library Method System", "value": this.keywordKey.endogenousSystemKeyword},
-            "description": this.keywordDescription.endogenousSystemKeywordDescription,
+            "keyword": {"key": "Endogenous Locus Library Method System", "value": this.keywordKeys['Endogenous Locus Library Method System']},
+            "description": this.keywordDescriptions['Endogenous Locus Library Method System'],
           },
           {
-            "keyword": {"key": "Endogenous Locus Library Method Mechanism", "value": this.keywordKey.endogenousMechanismKeyword},
-            "description": this.keywordDescription.endogenousMechanismKeywordDescription,
+            "keyword": {"key": "Endogenous Locus Library Method Mechanism", "value": this.keywordKeys['Endogenous Locus Library Method Mechanism']},
+            "description": this.keywordDescriptions['Endogenous Locus Library Method Mechanism'],
           }
         ]
-      }else if(this.keywordKey.variantLibraryKeyword === "In vitro construct library method"){
+      }else if(this.keywordKeys['Variant Library Creation Method'] === "In vitro construct library method"){
         variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKey.variantLibraryKeyword},
-            "description": this.keywordDescription.variantLibraryKeywordDescription,
+            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKeys['Variant Library Creation Method']},
+            "description": this.keywordDescriptions['Variant Library Creation Method'],
           },
           {
-            "keyword": {"key": "In Vitro Construct Library Method System", "value": this.keywordKey.inVitroSystemKeyword},
-            "description": this.keywordDescription.inVitroSystemKeywordDescription,
+            "keyword": {"key": "In Vitro Construct Library Method System", "value": this.keywordKeys['In Vitro Construct Library Method System']},
+            "description": this.keywordDescriptions['In Vitro Construct Library Method System'],
           },
           {
-            "keyword": {"key": "In Vitro Construct Library Method Mechanism", "value": this.keywordKey.inVitroMechanismKeyword},
-            "description": this.keywordDescription.inVitroMechanismKeywordDescription,
+            "keyword": {"key": "In Vitro Construct Library Method Mechanism", "value": this.keywordKeys['In Vitro Construct Library Method Mechanism']},
+            "description": this.keywordDescriptions['In Vitro Construct Library Method Mechanism'],
           }
         ]
-      }else if(this.keywordKey.variantLibraryKeyword === "Other"){
+      }else if(this.keywordKeys['Variant Library Creation Method'] === "Other"){
         variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKey.variantLibraryKeyword},
-            "description": this.keywordDescription.variantLibraryKeywordDescription,
+            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKeys['Variant Library Creation Method']},
+            "description": this.keywordDescriptions['Variant Library Creation Method'],
           }
         ]
       }
       combinedKeywords.push(...variantKeywords)
       const phenotypicKeywords = [
         {
-          "keyword": {"key": "Delivery method", "value": this.keywordKey['deliveryMethodKeyword']},
-          "description": this.keywordDescription.deliveryMethodKeywordDescription,
+          "keyword": {"key": "Delivery method", "value": this.keywordKeys['Delivery method']},
+          "description": this.keywordDescriptions['Delivery method'],
         },
         {
-          "keyword": {"key": "Phenotypic Assay Dimensionality", "value": this.keywordKey['phenotypicDimensionalityKeyword']},
-          "description": this.keywordDescription.phenotypicDimensionalityKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Dimensionality", "value": this.keywordKeys['Phenotypic Assay Dimensionality']},
+          "description": this.keywordDescriptions['Phenotypic Assay Dimensionality'],
         },
         {
-          "keyword": {"key": "Phenotypic Assay Method", "value": this.keywordKey['phenotypicMethodKeyword']},
-          "description": this.keywordDescription.phenotypicMethodKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Method", "value": this.keywordKeys['Phenotypic Assay Method']},
+          "description": this.keywordDescriptions['Phenotypic Assay Method'],
         },
         {
-          "keyword": {"key": "Phenotypic Assay Model System", "value": this.keywordKey['phenotypicModelSystemKeyword']},
-          "description": this.keywordDescription.phenotypicModelSystemKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Model System", "value": this.keywordKeys['Phenotypic Assay Model System']},
+          "description": this.keywordDescriptions['Phenotypic Assay Model System'],
         },
         {
-          "keyword": {"key": "Phenotypic Assay Profiling Strategy", "value": this.keywordKey['phenotypicProfilingStrategyKeyword']},
-          "description": this.keywordDescription.phenotypicProfilingStrategyKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Profiling Strategy", "value": this.keywordKeys['Phenotypic Assay Profiling Strategy']},
+          "description": this.keywordDescriptions['Phenotypic Assay Profiling Strategy'],
         },
         {
-          "keyword": {"key": "Phenotypic Assay Sequencing Read Type", "value": this.keywordKey['phenotypicSequencingTypeKeyword']},
-          "description": this.keywordDescription.phenotypicSequencingTypeKeywordDescription,
+          "keyword": {"key": "Phenotypic Assay Sequencing Read Type", "value": this.keywordKeys['Phenotypic Assay Sequencing Read Type']},
+          "description": this.keywordDescriptions['Phenotypic Assay Sequencing Read Type'],
         }
       ]
       combinedKeywords.push(...phenotypicKeywords)
@@ -1225,4 +963,4 @@ export default {
   width: 450px;
 }
 
-</style>
+</style>
\ No newline at end of file

From 46990770e2b516f492108bdd7272ca6aa8e352f7 Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Fri, 2 Aug 2024 11:15:22 +1000
Subject: [PATCH 13/17] Modified codes and debug

---
 src/components/screens/ExperimentEditor.vue | 127 ++++++--------------
 src/components/screens/ExperimentView.vue   |  15 ++-
 2 files changed, 48 insertions(+), 94 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index cc0a095e..ab970312 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -245,7 +245,7 @@
                         {{ getKeywordOptions(keyword.option)[0].description }}
                       </p>
                     </Dialog>
-                    <span v-if="validationErrors.keywords?.[keyword.key]" class="mave-field-error">{{ validationErrors.keywords?.[keyword.key] }}</span>
+                    <span v-if="validationErrors[`keywords.${keyword.key}`]" class="mave-field-error">{{ validationErrors[`keywords.${keyword.key}`] }}</span>
                   </div>
                   <div class="field" v-if="keywordTextVisible[keyword.key] || keywordKeys[keyword.key] === 'Other'">
                     <span class="p-float-label keyword-description-input">
@@ -256,7 +256,7 @@
                       />
                       <label :for="$scopedId('input-title')">{{ keyword.descriptionLabel }} {{ keywordKeys[keyword.key] === 'Other' ? '(Required)' : '(Optional)' }}</label>
                     </span>
-                    <span v-if="validationErrors.keywordDescriptions?.[keyword.descriptionLabel]" class="mave-field-error"> {{ validationErrors.keywordDescriptions?.[keyword.descriptionLabel] }}</span>
+                    <span v-if="validationErrors[`keywordDescriptions.${keyword.key}`]" class="mave-field-error"> {{ validationErrors[`keywordDescriptions.${keyword.key}`] }}</span>
                   </div>
                 </div>
               </div>
@@ -362,6 +362,21 @@ const KEYWORDS = [
   }
 ]
 
+// Used for save function
+const KEYWORD_GROUPS = {
+    "Endogenous locus library method": [
+      "Variant Library Creation Method",
+      "Endogenous Locus Library Method System",
+      "Endogenous Locus Library Method Mechanism"
+    ],
+    "In vitro construct library method": [
+      "Variant Library Creation Method",
+      "In Vitro Construct Library Method System",
+      "In Vitro Construct Library Method Mechanism"
+    ],
+    "Other": ["Variant Library Creation Method"]
+  }
+
 export default {
   name: 'ExperimentEditor',
   components: { AutoComplete, Button, Card, Chips, Dialog, Dropdown, Multiselect, DefaultLayout, EmailPrompt, FileUpload, InputText, ProgressSpinner, TabPanel, TabView, Textarea },
@@ -383,19 +398,6 @@ export default {
     return {
       ...useFormatters(),
       ...useItem({itemTypeName: 'experiment'}),
-      // keywordOptions: {
-      //   'Variant Library Creation Method': variantLibraryKeywordOptions.items,
-      //   'Endogenous Locus Library Method System': endogenousSystemKeywordOptions.items,
-      //   'Endogenous Locus Library Method Mechanism': endogenousMechanismKeywordOptions.items,
-      //   'In Vitro Construct Library Method System': inVitroSystemKeywordOptions.items,
-      //   'In Vitro Construct Library Method Mechanism': inVitroMechanismKeywordOptions.items,
-      //   'Delivery method': deliveryMethodKeywordOptions.items,
-      //   'Phenotypic Assay Dimensionality': phenotypicDimensionalityKeywordOptions.items,
-      //   'Phenotypic Assay Method': phenotypicMethodKeywordOptions.items,
-      //   'Phenotypic Assay Model System': phenotypicModelSystemKeywordOptions.items,
-      //   'Phenotypic Assay Profiling Strategy': phenotypicProfilingStrategyKeywordOptions.items,
-      //   'Phenotypic Assay Sequencing Read Type': phenotypicSequencingTypeKeywordOptions.items,
-      // },
       variantLibraryKeywordOptions: variantLibraryKeywordOptions.items,
       endogenousSystemKeywordOptions: endogenousSystemKeywordOptions.items,
       endogenousMechanismKeywordOptions: endogenousMechanismKeywordOptions.items,
@@ -442,7 +444,6 @@ export default {
     publicationIdentifiers: [],
     rawReadIdentifiers: [],
     extraMetadata: {},
-
     progressVisible: false,
     serverSideValidationErrors: {},
     clientSideValidationErrors: {},
@@ -481,6 +482,9 @@ export default {
     keywordData() {
       return KEYWORDS
     },
+    keywordGroups() {
+      return KEYWORD_GROUPS
+    }
   },
 
   watch: {
@@ -636,17 +640,9 @@ export default {
           this.keywordKeys[key] = keywordObj ? keywordObj.keyword.value : null
           this.keywordDescriptions[key] = keywordObj ? keywordObj.description : null
         }
-        setKeyword("Variant Library Creation Method")
-        setKeyword("Endogenous Locus Library Method System")
-        setKeyword("Endogenous Locus Library Method Mechanism")
-        setKeyword("In Vitro Construct Library Method System")
-        setKeyword("In Vitro Construct Library Method Mechanism")
-        setKeyword("Delivery method")
-        setKeyword("Phenotypic Assay Dimensionality")
-        setKeyword("Phenotypic Assay Method")
-        setKeyword("Phenotypic Assay Model System")
-        setKeyword("Phenotypic Assay Profiling Strategy")
-        setKeyword("Phenotypic Assay Sequencing Read Type")
+        for (const k of KEYWORDS) {
+          setKeyword(k.key)
+        }
       } else {
         this.keywords = []
         this.keywordKeys = _.fromPairs(KEYWORDS.map((keyword) => [keyword.key, null]))
@@ -715,72 +711,25 @@ export default {
       ).filter(
           secondary => !primaryPublicationIdentifiers.some(primary => primary.identifier == secondary.identifier && primary.dbName == secondary.dbName)
       )
+      // Keywods section
       const combinedKeywords = []
-      let variantKeywords = []
-      if(this.keywordKeys['Variant Library Creation Method'] === "Endogenous locus library method") {
-        variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKeys['Variant Library Creation Method']},
-            "description": this.keywordDescriptions['Variant Library Creation Method'],
-          },
-          {
-            "keyword": {"key": "Endogenous Locus Library Method System", "value": this.keywordKeys['Endogenous Locus Library Method System']},
-            "description": this.keywordDescriptions['Endogenous Locus Library Method System'],
-          },
-          {
-            "keyword": {"key": "Endogenous Locus Library Method Mechanism", "value": this.keywordKeys['Endogenous Locus Library Method Mechanism']},
-            "description": this.keywordDescriptions['Endogenous Locus Library Method Mechanism'],
-          }
-        ]
-      }else if(this.keywordKeys['Variant Library Creation Method'] === "In vitro construct library method"){
-        variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKeys['Variant Library Creation Method']},
-            "description": this.keywordDescriptions['Variant Library Creation Method'],
-          },
-          {
-            "keyword": {"key": "In Vitro Construct Library Method System", "value": this.keywordKeys['In Vitro Construct Library Method System']},
-            "description": this.keywordDescriptions['In Vitro Construct Library Method System'],
-          },
-          {
-            "keyword": {"key": "In Vitro Construct Library Method Mechanism", "value": this.keywordKeys['In Vitro Construct Library Method Mechanism']},
-            "description": this.keywordDescriptions['In Vitro Construct Library Method Mechanism'],
-          }
-        ]
-      }else if(this.keywordKeys['Variant Library Creation Method'] === "Other"){
-        variantKeywords = [{
-            "keyword": {"key": "Variant Library Creation Method", "value": this.keywordKeys['Variant Library Creation Method']},
-            "description": this.keywordDescriptions['Variant Library Creation Method'],
-          }
-        ]
+      const methodKey = this.keywordKeys['Variant Library Creation Method']
+      if (this.keywordGroups[methodKey]) {
+        this.keywordGroups[methodKey].forEach((key) => {
+          combinedKeywords.push({
+            "keyword": {"key": key, "value": this.keywordKeys[key]},
+            "description": this.keywordDescriptions[key],
+          })
+        })
       }
-      combinedKeywords.push(...variantKeywords)
-      const phenotypicKeywords = [
-        {
-          "keyword": {"key": "Delivery method", "value": this.keywordKeys['Delivery method']},
-          "description": this.keywordDescriptions['Delivery method'],
-        },
-        {
-          "keyword": {"key": "Phenotypic Assay Dimensionality", "value": this.keywordKeys['Phenotypic Assay Dimensionality']},
-          "description": this.keywordDescriptions['Phenotypic Assay Dimensionality'],
-        },
-        {
-          "keyword": {"key": "Phenotypic Assay Method", "value": this.keywordKeys['Phenotypic Assay Method']},
-          "description": this.keywordDescriptions['Phenotypic Assay Method'],
-        },
-        {
-          "keyword": {"key": "Phenotypic Assay Model System", "value": this.keywordKeys['Phenotypic Assay Model System']},
-          "description": this.keywordDescriptions['Phenotypic Assay Model System'],
-        },
-        {
-          "keyword": {"key": "Phenotypic Assay Profiling Strategy", "value": this.keywordKeys['Phenotypic Assay Profiling Strategy']},
-          "description": this.keywordDescriptions['Phenotypic Assay Profiling Strategy'],
-        },
-        {
-          "keyword": {"key": "Phenotypic Assay Sequencing Read Type", "value": this.keywordKeys['Phenotypic Assay Sequencing Read Type']},
-          "description": this.keywordDescriptions['Phenotypic Assay Sequencing Read Type'],
-        }
-      ]
+      const phenotypicKeywords = KEYWORDS.slice(5).map((keyword) => ({
+        "keyword": {"key": keyword.key, "value": this.keywordKeys[keyword.key]},
+        "description": this.keywordDescriptions[keyword.key],
+      }))
       combinedKeywords.push(...phenotypicKeywords)
+      // Push all of the keyworeds to this.keywords directly will raise a bug if users choose Other option without typing anything. 
       this.keywords = combinedKeywords
+
       const editedFields = {
         title: this.title,
         shortDescription: this.shortDescription,
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index 1043333a..dd1c3613 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -98,12 +98,13 @@
               </Dialog> : <a :href="`https://www.mavedb.org/search/?keywords=${keyword.keyword.value}`">{{ keyword.keyword.value }}</a>
               <!--Present user's description-->
               <div class="field" v-if="keyword.description">
-                <div v-if="keyword.description.length >= 500"> 
-                  <div v-if="readFullDescription">{{ keyword.description.substring(0, 500) + "...." }}
+                <div v-if="keyword.description.length >= 300"> 
+                  <div v-if="!fullDescription[index]">
+                    {{ keyword.description.substring(0, 300) + "...." }}
                   </div>
                   <div v-else>{{ keyword.description }}</div>
-                  <Button @click="readFullDescription = !readFullDescription" class="p-button-text p-button-sm p-button-info">
-                    {{ readFullDescription ? 'Show more' : 'Show less' }}
+                  <Button @click="showFullDescription(index)" class="p-button-text p-button-sm p-button-info">
+                    {{ fullDescription[index] ? 'Show less' : 'Show all' }}
                   </Button>
                 </div>
                 <div v-else>{{ keyword.description }}</div>
@@ -240,7 +241,7 @@ export default {
     associatedScoreSets: [],
     dialogVisible: [],
     readMore: true,
-    readFullDescription: true,
+    fullDescription: [],
   }),
 
   created() {
@@ -321,6 +322,10 @@ export default {
       this.readMore = true
       return this.readMore
     },
+    showFullDescription: function(index) {
+      console.log()
+      this.fullDescription[index] = !this.fullDescription[index]
+    },
     showDialog: function (index) {
       this.dialogVisible[index] = true
     }

From 0663a7b7ebfb9d76865d5b39a1ee86ec52f2129d Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Tue, 20 Aug 2024 10:04:24 +1000
Subject: [PATCH 14/17] Remove unnecessary console.

---
 src/components/screens/ExperimentEditor.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index ab970312..2f326dd1 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -752,7 +752,6 @@ export default {
       }
 
       const editedItem = _.merge({}, this.item || {}, editedFields)
-      console.log(editedItem)
       let response
       try {
         if (this.item) {

From 34c527f18433f2334f9eaf26cdb13a471ed91dc5 Mon Sep 17 00:00:00 2001
From: Ben Capodanno <capodb@uw.edu>
Date: Tue, 20 Aug 2024 17:10:15 -0700
Subject: [PATCH 15/17] minimal keyword searching

---
 src/components/screens/ExperimentView.vue |  4 ++--
 src/components/screens/SearchView.vue     | 25 ++++++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index dd1c3613..5a77bbaf 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -95,10 +95,10 @@
                 <p class="m-0">
                   {{ keyword.keyword.description }}
                 </p>
-              </Dialog> : <a :href="`https://www.mavedb.org/search/?keywords=${keyword.keyword.value}`">{{ keyword.keyword.value }}</a>
+              </Dialog> : <a :href="`${config.appBaseUrl}/search?keywords=${keyword.keyword.value}`">{{ keyword.keyword.value }}</a>
               <!--Present user's description-->
               <div class="field" v-if="keyword.description">
-                <div v-if="keyword.description.length >= 300"> 
+                <div v-if="keyword.description.length >= 300">
                   <div v-if="!fullDescription[index]">
                     {{ keyword.description.substring(0, 300) + "...." }}
                   </div>
diff --git a/src/components/screens/SearchView.vue b/src/components/screens/SearchView.vue
index b04bd38c..79fd428e 100644
--- a/src/components/screens/SearchView.vue
+++ b/src/components/screens/SearchView.vue
@@ -123,6 +123,7 @@ export default defineComponent({
       filterPublicationAuthors: extractQueryParam(this.$route.query['publication-author']) as Array<string>,
       filterPublicationDatabases: extractQueryParam(this.$route.query['publication-database']) as Array<string>,
       filterPublicationJournals: extractQueryParam(this.$route.query['publication-journal']) as Array<string>,
+      filterKeywords: extractQueryParam(this.$route.query['keywords']) as Array<string>,
       loading: false,
       searchText: this.$route.query.search as string | null,
       scoreSets: [] as Array<ShortScoreSet>,
@@ -140,7 +141,7 @@ export default defineComponent({
       return countTargetGeneMetadata(this.publishedScoreSets, (targetGene) => targetGene.name)
     },
     targetOrganismFilterOptions: function() {
-      return countTargetGeneMetadata(this.publishedScoreSets, 
+      return countTargetGeneMetadata(this.publishedScoreSets,
         (targetGene) => targetGene.targetSequence?.taxonomy.organismName || '')
     },
     targetAccessionFilterOptions: function() {
@@ -216,6 +217,13 @@ export default defineComponent({
         }
       }
     },
+    filterKeywords: {
+      handler: function(oldValue, newValue) {
+        if (oldValue != newValue) {
+          this.debouncedSearch()
+        }
+      }
+    },
     searchText: {
       handler: function(oldValue, newValue) {
         if (oldValue != newValue) {
@@ -291,6 +299,14 @@ export default defineComponent({
         }
       },
       immediate: true
+    },
+    '$route.query.keywords': {
+      handler: function(newValue, oldValue) {
+        if (newValue != oldValue) {
+          this.filterKeywords = extractQueryParam(newValue)
+        }
+      },
+      immediate: true
     }
   },
   methods: {
@@ -306,7 +322,8 @@ export default defineComponent({
         ...(this.filterTargetAccession.length > 0) ? {'target-accession': this.filterTargetAccession} : {},
         ...(this.filterPublicationAuthors.length > 0) ? {'publication-author': this.filterPublicationAuthors} : {},
         ...(this.filterPublicationDatabases.length > 0) ? {'publication-database': this.filterPublicationDatabases} : {},
-        ...(this.filterPublicationJournals.length > 0) ? {'publication-journal': this.filterPublicationJournals} : {}
+        ...(this.filterPublicationJournals.length > 0) ? {'publication-journal': this.filterPublicationJournals} : {},
+        ...(this.filterKeywords.length > 0) ? {'keywords': this.filterKeywords} : {}
       }})
       this.loading = true;
       await this.fetchSearchResults()
@@ -323,6 +340,7 @@ export default defineComponent({
             authors: this.filterPublicationAuthors.length > 0 ? this.filterPublicationAuthors : undefined,
             databases: this.filterPublicationDatabases.length > 0 ? this.filterPublicationDatabases : undefined,
             journals: this.filterPublicationJournals.length > 0 ? this.filterPublicationJournals : undefined,
+            keywords: this.filterKeywords.length > 0 ? this.filterKeywords : undefined,
         }
         let response = await axios.post(
           `${config.apiBaseUrl}/score-sets/search`,
@@ -351,6 +369,7 @@ export default defineComponent({
       this.filterPublicationAuthors = []
       this.filterPublicationDatabases = []
       this.filterPublicationJournals = []
+      this.filterKeywords = []
     }
   }
 })
@@ -419,4 +438,4 @@ export default defineComponent({
   padding: 0;
 }
 
-</style>
\ No newline at end of file
+</style>

From 841ae33d0a8f6b01deaf08746c283078b916eaff Mon Sep 17 00:00:00 2001
From: EstelleDa <baishenlonger@live.com.sg>
Date: Wed, 21 Aug 2024 17:28:06 +1000
Subject: [PATCH 16/17] Remove old keywords from Home page

---
 src/components/screens/ExperimentView.vue | 1 -
 src/components/screens/HomeScreen.vue     | 8 --------
 2 files changed, 9 deletions(-)

diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index 5a77bbaf..a279dc45 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -323,7 +323,6 @@ export default {
       return this.readMore
     },
     showFullDescription: function(index) {
-      console.log()
       this.fullDescription[index] = !this.fullDescription[index]
     },
     showDialog: function (index) {
diff --git a/src/components/screens/HomeScreen.vue b/src/components/screens/HomeScreen.vue
index 0fea0acb..a1dc250b 100644
--- a/src/components/screens/HomeScreen.vue
+++ b/src/components/screens/HomeScreen.vue
@@ -38,7 +38,6 @@
                 <tr>
                   <th>Organisms</th>
                   <th>Target genes</th>
-                  <th>Keywords</th>
                 </tr>
               </thead>
               <tbody>
@@ -57,13 +56,6 @@
                       <li><router-link :to="{name: 'search', query: {search: 'TEM-1 β-lactamase'}}">TEM-1 β-lactamase</router-link></li>
                     </ul>
                   </td>
-                  <td>
-                    <ul>
-                      <li><router-link :to="{name: 'search', query: {search: 'MPRA'}}">MPRA</router-link></li>
-                      <li><router-link :to="{name: 'search', query: {search: 'SGE'}}">SGE</router-link></li>
-                      <li><router-link :to="{name: 'search', query: {search: 'barcode sequencing'}}">barcode sequencing</router-link></li>
-                    </ul>
-                  </td>
                 </tr>
               </tbody>
             </table>

From ee497c1f453690c86fd01f102a1f5b8000dab0ee Mon Sep 17 00:00:00 2001
From: Ben Capodanno <capodb@uw.edu>
Date: Wed, 21 Aug 2024 16:39:34 -0700
Subject: [PATCH 17/17] Change Config URLs Away from Localhost

---
 .env.dev     | 2 +-
 .env.prodapi | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.env.dev b/.env.dev
index b4931387..1888065a 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,3 +1,3 @@
 VITE_API_URL=http://localhost:8002/api/v1
-VITE_APP_URL=https://localhost:8081
+VITE_APP_URL=https://127.0.0.1:8081
 VITE_SITE_TITLE=MaveDB (local API)
diff --git a/.env.prodapi b/.env.prodapi
index 75d25fb6..9e2092ea 100644
--- a/.env.prodapi
+++ b/.env.prodapi
@@ -1,3 +1,3 @@
 VITE_API_URL=https://api.mavedb.org/api/v1
-VITE_APP_URL=https://localhost:8081
+VITE_APP_URL=https://127.0.0.1:8081
 VITE_SITE_TITLE=MaveDB (prod API)