Merge pull request #66 from andybywire/hierarchy-input-component-beta

Hierarchy input component beta

src/components/ChildConcepts.tsx

@@ -8,11 +8,24 @@ import {ChildConceptTerm} from '../types'
 import {StyledChildConcepts} from '../styles'
 import {Children} from './Children'
 
-export const ChildConcepts = ({concepts}: {concepts: ChildConceptTerm[]}) => {
+export const ChildConcepts = ({
+  concepts,
+  inputComponent = false,
+  selectConcept,
+}: {
+  concepts: ChildConceptTerm[]
+  selectConcept: any
+  inputComponent: Boolean
+}) => {
   return (
     <StyledChildConcepts>
       {concepts.map((concept: any) => (
-        <Children key={concept.id} concept={concept} />
+        <Children
+          key={concept.id}
+          concept={concept}
+          selectConcept={selectConcept}
+          inputComponent={inputComponent}
+        />
       ))}
     </StyledChildConcepts>
   )

src/components/Children.tsx

@@ -20,13 +20,21 @@ import {
 import {useCreateConcept, useRemoveConcept} from '../hooks'
 import {ChildConceptTerm} from '../types'
 import {StyledChildConcept, StyledTreeButton, StyledTreeToggle} from '../styles'
-import {SchemeContext} from './TreeView'
-import {TreeContext} from './Hierarchy'
+import {SchemeContext, TreeContext} from '../context'
 import {ChildConcepts} from './ChildConcepts'
 import {ConceptDetailLink} from './ConceptDetailLink'
+import {ConceptSelectLink} from './ConceptSelectLink'
 import {ConceptDetailDialogue} from './ConceptDetailDialogue'
 
-export const Children = ({concept}: {concept: ChildConceptTerm}) => {
+export const Children = ({
+  concept,
+  selectConcept,
+  inputComponent = false,
+}: {
+  concept: ChildConceptTerm
+  selectConcept: any
+  inputComponent: Boolean
+}) => {
   const document: any = useContext(SchemeContext) || {}
   //@ts-expect-error — This is part of the same complaint as in Hierarchy.tsx
   const {treeVisibility} = useContext(TreeContext) || {}
@@ -69,7 +77,11 @@ export const Children = ({concept}: {concept: ChildConceptTerm}) => {
               <SquareIcon className="spacer" />
             )}
             {!concept?.prefLabel && <span className="untitled">[new concept]</span>}
-            <ConceptDetailLink concept={concept} />
+            {inputComponent ? (
+              <ConceptSelectLink concept={concept} selectConcept={selectConcept} />
+            ) : (
+              <ConceptDetailLink concept={concept} />
+            )}
           </Inline>
           {!document.displayed?.controls && <ConceptDetailDialogue concept={concept} />}
         </Inline>
@@ -160,7 +172,13 @@ export const Children = ({concept}: {concept: ChildConceptTerm}) => {
       {concept?.childConcepts &&
         concept.childConcepts.length > 0 &&
         concept?.level &&
-        concept.level < 5 && <ChildConcepts concepts={concept.childConcepts} />}
+        concept.level < 5 && (
+          <ChildConcepts
+            concepts={concept.childConcepts}
+            selectConcept={selectConcept}
+            inputComponent={inputComponent}
+          />
+        )}
     </StyledChildConcept>
   )
 }

src/components/ConceptSelectLink.tsx

@@ -0,0 +1,31 @@
+import {useCallback} from 'react'
+import {ChildConceptTerm} from '../types'
+import {StyledConceptLink} from '../styles'
+
+/**
+ * Concept Select Link
+ * Writes a concept _ref from the hierarchy tree to the current document
+ */
+export function ConceptSelectLink({
+  concept,
+  selectConcept,
+}: {
+  concept: ChildConceptTerm
+  selectConcept: any
+}) {
+  const {prefLabel, id} = concept ?? {}
+
+  const handleClick = useCallback(() => {
+    const conceptRef = {
+      _ref: id,
+      _type: 'reference',
+    }
+    selectConcept(conceptRef)
+  }, [id, selectConcept])
+
+  return (
+    <StyledConceptLink href="#" onClick={handleClick}>
+      {prefLabel}
+    </StyledConceptLink>
+  )
+}

src/components/Hierarchy.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 /**
  *  Hierarchy Component
  * - Provides a frame for global controls and tree structure
@@ -6,27 +7,33 @@
  * @todo type document, likely via extended SanityDocument type.
  */
 
-import {createContext, useCallback, useContext, useState} from 'react'
+import {useCallback, useContext, useState} from 'react'
 import {Flex, Spinner, Stack, Box, Text, Inline} from '@sanity/ui'
 import {AddCircleIcon} from '@sanity/icons'
 import {randomKey} from '@sanity/util/content'
 import {useListeningQuery} from 'sanity-plugin-utils'
 import {useCreateConcept} from '../hooks'
-import {trunkBuilder} from '../queries'
+import {trunkBuilder, inputBuilder} from '../queries'
 import {DocumentConcepts} from '../types'
 import {HierarchyButton} from '../styles'
-import {SchemeContext} from './TreeView'
+import {SchemeContext, TreeContext} from '../context'
 import {TreeStructure} from './TreeStructure'
 import {NewScheme} from './guides'
 
-export const TreeContext = createContext(null)
-
 type GlobalVisibility = {
   treeId: string
   treeVisibility: string
 }
 
-export const Hierarchy = () => {
+export const Hierarchy = ({
+  branchId = '',
+  selectConcept,
+  inputComponent = false,
+}: {
+  branchId: string
+  selectConcept?: any
+  inputComponent?: Boolean
+}) => {
   const document: any = useContext(SchemeContext) || {}
   const documentId = document.displayed?._id
 
@@ -58,28 +65,30 @@ export const Hierarchy = () => {
 
   const {data, loading, error} = useListeningQuery<DocumentConcepts>(
     {
-      fetch: trunkBuilder(),
+      fetch: inputComponent ? inputBuilder() : trunkBuilder(),
       listen: `*[_type == "skosConcept" || _id == $id]`,
     },
     {
-      params: {id: documentId},
+      params: {id: documentId, branchId},
     }
   )
   if (loading) {
     return (
-      <Flex
-        align="center"
-        direction="column"
-        gap={5}
-        height="fill"
-        justify="center"
-        style={{paddingTop: '1rem'}}
-      >
-        <Spinner muted />
-        <Text muted size={1}>
-          Loading hierarchy…
-        </Text>
-      </Flex>
+      <Box padding={5}>
+        <Flex
+          align="center"
+          direction="column"
+          gap={5}
+          height="fill"
+          justify="center"
+          style={{paddingTop: '1rem'}}
+        >
+          <Spinner muted />
+          <Text muted size={1}>
+            Loading hierarchy…
+          </Text>
+        </Flex>
+      </Box>
     )
   } else if (error) {
     return <div>error: {error}</div>
@@ -91,53 +100,67 @@ export const Hierarchy = () => {
     // I suspect this is an error.
     <TreeContext.Provider value={globalVisibility}>
       <Box padding={4}>
-        <Stack space={4}>
-          <Stack space={2}>
-            <Text size={1} weight="semibold">
-              Hierarchy Tree
-            </Text>
-            <Text size={1} muted>
-              Hierarchy is determined by the 'Broader' relationships assigned to each concept.
-            </Text>
-          </Stack>
-          <Inline space={4}>
-            {(data.topConcepts?.filter((concept) => (concept?.childConcepts?.length ?? 0) > 0)
-              .length > 0 ||
-              data.orphans?.filter((concept) => (concept?.childConcepts?.length ?? 0) > 0).length >
-                0) && (
-              <Inline space={2}>
-                <HierarchyButton type="button" onClick={handleCollapse}>
-                  <Text weight="semibold" muted size={1}>
-                    Collapse
-                  </Text>
-                </HierarchyButton>
-                <Text weight="semibold" muted size={1}>
-                  |
+        {inputComponent ? (
+          <TreeStructure
+            concepts={data}
+            inputComponent={inputComponent}
+            selectConcept={selectConcept}
+          />
+        ) : (
+          <>
+            <Stack space={4}>
+              <Stack space={2}>
+                <Text size={1} weight="semibold">
+                  Hierarchy Tree
                 </Text>
-                <HierarchyButton type="button" onClick={handleExpand}>
-                  <Text weight="semibold" muted size={1}>
-                    Expand
-                  </Text>
-                </HierarchyButton>
-              </Inline>
-            )}
-            {document.displayed?.controls && (
+                <Text size={1} muted>
+                  Hierarchy is determined by the 'Broader' relationships assigned to each concept.
+                </Text>
+              </Stack>
               <Inline space={4}>
-                <HierarchyButton type="button" className="add" onClick={createTopConcept}>
-                  <Text weight="semibold" muted size={1}>
-                    <AddCircleIcon /> Add Top Concept
-                  </Text>
-                </HierarchyButton>
-                <HierarchyButton type="button" className="add" onClick={createEntryConcept}>
-                  <Text weight="semibold" muted size={1}>
-                    <AddCircleIcon /> Add Concept
-                  </Text>
-                </HierarchyButton>
+                {(data.topConcepts?.filter((concept) => (concept?.childConcepts?.length ?? 0) > 0)
+                  .length > 0 ||
+                  data.orphans?.filter((concept) => (concept?.childConcepts?.length ?? 0) > 0)
+                    .length > 0) && (
+                  <Inline space={2}>
+                    <HierarchyButton type="button" onClick={handleCollapse}>
+                      <Text weight="semibold" muted size={1}>
+                        Collapse
+                      </Text>
+                    </HierarchyButton>
+                    <Text weight="semibold" muted size={1}>
+                      |
+                    </Text>
+                    <HierarchyButton type="button" onClick={handleExpand}>
+                      <Text weight="semibold" muted size={1}>
+                        Expand
+                      </Text>
+                    </HierarchyButton>
+                  </Inline>
+                )}
+                {document.displayed?.controls && (
+                  <Inline space={4}>
+                    <HierarchyButton type="button" className="add" onClick={createTopConcept}>
+                      <Text weight="semibold" muted size={1}>
+                        <AddCircleIcon /> Add Top Concept
+                      </Text>
+                    </HierarchyButton>
+                    <HierarchyButton type="button" className="add" onClick={createEntryConcept}>
+                      <Text weight="semibold" muted size={1}>
+                        <AddCircleIcon /> Add Concept
+                      </Text>
+                    </HierarchyButton>
+                  </Inline>
+                )}
               </Inline>
-            )}
-          </Inline>
-        </Stack>
-        <TreeStructure concepts={data} />
+            </Stack>
+            <TreeStructure
+              concepts={data}
+              inputComponent={inputComponent}
+              selectConcept={selectConcept}
+            />
+          </>
+        )}
       </Box>
     </TreeContext.Provider>
   )

src/components/Orphans.tsx

@@ -10,17 +10,18 @@ import {AddCircleIcon, SquareIcon, ToggleArrowRightIcon, TrashIcon} from '@sanit
 import {useCreateConcept, useRemoveConcept} from '../hooks'
 import {ChildConceptTerm} from '../types'
 import {StyledOrphan, StyledTreeButton, StyledTreeToggle} from '../styles'
-import {SchemeContext} from './TreeView'
+import {SchemeContext} from '../context'
 import {ChildConcepts} from './ChildConcepts'
 import {ConceptDetailLink} from './ConceptDetailLink'
 import {ConceptDetailDialogue} from './ConceptDetailDialogue'
 
 type OrphanProps = {
   concept: ChildConceptTerm
   treeVisibility: string
+  inputComponent: Boolean
 }
 
-export const Orphans = ({concept, treeVisibility}: OrphanProps) => {
+export const Orphans = ({concept, treeVisibility, inputComponent}: OrphanProps) => {
   const document: any = useContext(SchemeContext) || {}
   const createConcept = useCreateConcept(document)
   const removeConcept = useRemoveConcept(document)
@@ -116,7 +117,11 @@ export const Orphans = ({concept, treeVisibility}: OrphanProps) => {
         )}
       </Inline>
       {concept?.childConcepts && concept.childConcepts.length > 0 && (
-        <ChildConcepts concepts={concept.childConcepts} />
+        <ChildConcepts
+          concepts={concept.childConcepts}
+          selectConcept={undefined}
+          inputComponent={inputComponent}
+        />
       )}
     </StyledOrphan>
   )