Merge pull request #103 from MyersResearchGroup/add-type-support

added type support

apps/web/src/components/CurationForm.jsx

@@ -1,8 +1,9 @@
-import { Container, Title, Tabs, Text, Space, LoadingOverlay, Button, Group, Header, List, ActionIcon, Tooltip, Textarea, Menu, Modal, TextInput, PasswordInput, Loader, Center, Select, SegmentedControl, Checkbox } from '@mantine/core'
+import { Container, Title, Tabs, Text, Space, LoadingOverlay, Button, Group, Header, List, ActionIcon, Tooltip, Textarea, Menu, Modal, TextInput, PasswordInput, Loader, Center, Select, SegmentedControl, Checkbox, TypographyStylesProvider } from '@mantine/core'
 import { useStore, mutateDocument, mutateDocumentForDisplayID } from '../modules/store'
 import { useCyclicalColors } from "../hooks/misc"
 import SimilarParts from './SimilarParts'
 import RoleSelection from "./RoleSelection"
+import TypeSelection from "./TypeSelection"
 import ProteinSelection from './ProteinSelection'
 import SplitPanel from "./SplitPanel"
 import TargetOrganismsSelection from './TargetOrganismsSelection'
@@ -559,8 +560,8 @@ export default function CurationForm({ }) {
                                                   </ReactMarkdown>
                                               </Text>
                                               <Space h={20} />
-                                              <Title order={3}>Roles</Title>    
                                               <RoleSelection />
+                                              <TypeSelection />
                                               <Space h={40} />
                                               <TargetOrganismsSelection />
                                               <Space h={40} />

apps/web/src/components/TypeSelection.jsx

@@ -0,0 +1,100 @@
+import { Group, Select, Text, Space, Button, CloseButton } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
+import { forwardRef, useEffect, useState } from 'react'
+import { useSequenceOntology } from '../modules/ontologies/so'
+import { mutateDocument, useStore } from '../modules/store'
+import shallow from 'zustand/shallow'
+import { decodeRoleURI } from '../modules/roles'
+import { ScooterElectric } from 'tabler-icons-react'
+
+
+export default function TypeSelection() {
+    const type = useStore(s => s.types);
+    const isFileEdited = useStore((s) => s.isFileEdited);
+
+    let selectedTopology = type.filter(item => item.startsWith('http://identifiers.org/so/SO:'));
+
+    const labels = ['Linear', 'Circular', 'Double-stranded', 'Single-stranded', 'Linear double-stranded', 'Linear single-stranded', 'Circular double-stranded', 'Circular single-stranded']
+
+    const types = [
+        // use an array for values, then append to types in document
+        { value: ['http://identifiers.org/so/SO:0000987'], label: 'Linear' },
+        { value: ['http://identifiers.org/so/SO:0000988'], label: 'Circular' },
+        { value: ['http://identifiers.org/so/SO:0000985'], label: 'Double-stranded'}, 
+        { value: ['http://identifiers.org/so/SO:0000984'], label: 'Single-stranded'},
+        { value: ['http://identifiers.org/so/SO:0000987', 'http://identifiers.org/so/SO:0000985'], label: 'Linear double-stranded'},
+        { value: ['http://identifiers.org/so/SO:0000988', 'http://identifiers.org/so/SO:0000985'], label: 'Circular double-stranded'}, 
+        { value: ['http://identifiers.org/so/SO:0000987', 'http://identifiers.org/so/SO:0000984'], label: 'Linear single-stranded'}, 
+        { value: ['http://identifiers.org/so/SO:0000988', 'http://identifiers.org/so/SO:0000984'], label: 'Circular single-stranded'},
+    ]
+
+    const getLabelFromValue = (value) => {
+        for (const type of types) {
+            if (String(type.value) === String(value)) {
+                return type.label;
+            }
+        }
+        return
+    }
+
+    const getValueFromLabel = (label) => {
+        for (const type of types) {
+            if (String(type.label) === String(label)) {
+                return type.value;
+            }
+        }
+        return
+    }
+
+    const setType = val => {
+        const selectedTypes = getValueFromLabel(val)
+        selectedTopology = selectedTypes    
+
+        mutateDocument(useStore.setState, state => {
+            state.types = state.types.filter(x => !x.startsWith('http://identifiers.org/so/SO:'))
+            state.document.root.type = state.types[0] //reset and only include dna region type
+
+            // state.types.push(String(val))
+            for (const x in selectedTypes) {
+                state.types.push(String(selectedTypes[x]))
+                state.document.root.addType(String(selectedTypes[x]));
+            }
+        });
+    };
+
+    return (
+        <div>
+            <Group spacing={40}>  
+                <Text size="lg" weight={600} mt={20}>DNA Topology</Text>            
+                <Select
+                    data={labels}
+                    value={getLabelFromValue(selectedTopology)}
+                    onChange={setType}
+                    label={<Text color="dimmed" size="xs" ml={10}>{formatTopologies(selectedTopology)}</Text>}
+                    sx={{ flexGrow: 1, }}
+                    styles={selectStyles}
+                    searchable
+                    allowDeselect={true}
+                />
+            </Group>
+            <Space h="lg" />
+        </div>
+    );
+}
+
+const formatTopologies = (topologies) => {
+    let formattedString = ''
+    for (let x in topologies) {
+        topologies[x] = decodeRoleURI(topologies[x])
+        if (x == 0) formattedString += topologies[x] 
+        else formattedString += ', ' + topologies[x]
+    }
+
+    return formattedString
+}
+
+const selectStyles = theme => ({
+    itemsWrapper: {
+        width: "calc(100% - 20px)",
+    }
+})

apps/web/src/modules/roles.js

@@ -1,6 +1,6 @@
 
 
-export function decodeRoleURI(uri) {    
+export function decodeRoleURI(uri) { 
     return uri.match(/SO[:_]\d+$/)?.[0].replace("_", ":")
 }
 

apps/web/src/modules/store.js

@@ -26,6 +26,7 @@ export const useStore = create((set, get) => ({
      * roles used in SBOL document for curation form
      * @type {string[]} */
     roles: [],
+    types: [],
 
     /** 
      * Parsed SBOL document
@@ -63,7 +64,8 @@ export const useStore = create((set, get) => ({
 
             // set roles to be the same as from document
             if(document.root.roles.length < 1) document.root.roles = ["http://identifiers.org/so/SO:0000804"] //default to engineered region
-            const roles = document.root.roles;   
+            const roles = document.root.roles;
+            const types = document.root.types;   
 
 
             const fromSynBioHub = isfromSynBioHub(document.root); 
@@ -81,6 +83,7 @@ export const useStore = create((set, get) => ({
                 sbolContent,
                 document,
                 roles,
+                types,
                 uri: sbolUrl?.href,
                 richDescriptionBuffer,
                 textAnnotations,