resolved linter erros & added condition Related To field

SFB-ELAINE · Nov 11, 2020 · bd96ddc · bd96ddc
1 parent bad0a1e
commit bd96ddc
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/packages/backend/src/data.ts b/packages/backend/src/data.ts
@@ -1,4 +1,4 @@
-import { uniqueId, NodeDefinition, RelationshipRule } from 'common';
+import { NodeDefinition, RelationshipRule } from 'common';
 
 export {
   provenanceNodes,
@@ -30,7 +30,8 @@ const requirement: NodeDefinition = {
   classification: 'entity',
   //labelFormatString: "R${version}${study ? ' (' + study.source  + ')' : ''}",
   labelFormatString: "R${version}",
-  informationFields: ["Description", "Related to", "Main species", "Type, qualitative, quantitative"]
+  informationFields: ["Description", "Related to", "Main species", "Type, qualitative, quantitative"],
+  showRelatedTo: true,
 }
 
 const qualitativeModel: NodeDefinition = {
@@ -62,7 +63,8 @@ const simulationData: NodeDefinition = {
   classification: 'entity',
   //labelFormatString: "D${version}${study ? ' (' + study.source  + ')' : ''}",
   labelFormatString: "SD${version}",
-  informationFields: ["Description", "Reference", "Related to"]
+  informationFields: ["Description", "Reference", "Related to"],
+  showRelatedTo: true,
 }
 
 const wetlabData: NodeDefinition = {

diff --git a/packages/common/src/schemas.ts b/packages/common/src/schemas.ts
@@ -106,7 +106,15 @@ export const NodeDefinitionSchema = n.schema({
      */
     informationFields: {
       type: n.array(n.string),
-    }
+    },
+
+    /**
+     * Whether to show the "Related To" field in the node editor in the frontend. If set to true, this type of node
+     * will able to be related to other nodes.
+     */
+    showRelatedTo: {
+      type: n.boolean,
+    },
   },
 });
 

diff --git a/packages/frontend/src/Visualizer.vue b/packages/frontend/src/Visualizer.vue
@@ -266,7 +266,7 @@ export default createComponent({
 
     // If we are setting the "Related To" property, the user first clicks within the
     // node editor card. When they click, an event is emitted and the node is stored here
-    // The next time that a node is clikced, we will use this node to store the 
+    // The next time that a node is clikced, we will use this node to store the
     // "Related To" relationship
     const nodeToRelate = ref<ProvenanceNode>();
 
@@ -322,7 +322,10 @@ export default createComponent({
       target: HTMLInputElement & EventTarget;
     }
 
-    const getLabelWrapper = (node: ProvenanceNode) => getLabel(node, getDefinition(node), studyLookup.value, modelVersionLookup.value)
+    const getLabelWrapper = (node: ProvenanceNode) => getLabel(
+      node,
+      getDefinition(node), studyLookup.value, modelVersionLookup.value,
+    );
 
     const importNodes = async (e: HTMLInputEvent) => {
       const files = e.target.files;
@@ -888,7 +891,7 @@ export default createComponent({
         },
         onDidClick: (e: MouseEvent) => {
           if (nodeToRelate.value) {
-            editNode(nodeToRelate.value, "relatedTo", n.id)
+            editNode(nodeToRelate.value, 'relatedTo', n.id);
             nodeToRelate.value = undefined;
             return;
           }

diff --git a/packages/frontend/src/components/NodeFormCard.vue b/packages/frontend/src/components/NodeFormCard.vue
@@ -31,7 +31,7 @@
       </b-select>
     </b-field>
 
-    <b-field label="Related To" style="display: flex; flex-direction: column">
+    <b-field v-if="definition.showRelatedTo" label="Related To" style="display: flex; flex-direction: column">
       <div v-if="relatedToLabel" style="margin-top: -0.3em; display: flex; align-items: center; justify-content: space-between">
         <div>
           Related to "{{ relatedToLabel }}"
@@ -130,24 +130,24 @@ export default createComponent({
     const definedFields = computed((): string[] => (
       props.definition ?
         props.definition.informationFields ?
-          props.definition.informationFields.map((field) => field.split(",")[0]) : [] :
+          props.definition.informationFields.map((field) => field.split(',')[0]) : [] :
           []
     ));
 
     // See schemas.ts for more informatio about "informationFields"
     // Basically, these fileds are defined and can either be a text field
     // or an dropdown with options
     const definedFieldsOptions = computed(() => {
-      if (!props.definition || !props.definition.informationFields) return {};
+      if (!props.definition || !props.definition.informationFields) { return {}; }
       const lookup: Record<string, string[] | undefined> = {};
       props.definition.informationFields.forEach((field) => {
-        const [fieldName, ...options] = field.split(",");
-        if (options.length === 0) return;
+        const [fieldName, ...options] = field.split(',');
+        if (options.length === 0) { return; }
         lookup[fieldName] = options;
-      })
+      });
 
       return lookup;
-    })
+    });
 
     const extraFields = computed((): InformationField[] => props.fields.filter((field) => (
       !definedFields.value.includes(field.key)
@@ -180,7 +180,7 @@ export default createComponent({
     }
 
     function clearRelatedTo() {
-      updateNode('relatedTo', '')
+      updateNode('relatedTo', '');
     }
 
     function definitionChange(definitionId: string) {
@@ -224,7 +224,7 @@ export default createComponent({
         // Things *should* have returned by then
         setTimeout(() => {
           sentRequests[id] = false;
-        }, 5000)
+        }, 5000);
 
         informationNode = {
           id: uniqueId(),
@@ -240,7 +240,7 @@ export default createComponent({
 
     const relatedToLabel =  computed(() => {
       // console.log(`Related to label: ${props.node.id} -> ${props.node.relatedTo}`)
-      const n = props.node.relatedTo ? props.nodes.find((node) => node.id === props.node.relatedTo) : undefined
+      const n = props.node.relatedTo ? props.nodes.find((node) => node.id === props.node.relatedTo) : undefined;
       return n ? props.getLabel(n) : undefined;
     });
 

diff --git a/packages/frontend/src/constants.ts b/packages/frontend/src/constants.ts
@@ -34,6 +34,13 @@ export const relationshipColors: RelationshipColors = {
     source: 'activity',
     target: 'entity',
   },
+  'Related to': {
+    // We may want to remove this if this relationship isn't used
+    // Also we may want to customize these values
+    color: 'yellow',
+    source: 'activity',
+    target: 'entity',
+  },
 };
 
 export const NODE_OUTLINE = 'rgb(22, 89, 136)';