19 add popover to taxonomy term list views (#44)

Add information dialogues to taxonomy terms
in Tree View, when definition, example, or scope note information
is available.

src/components/Children.tsx

@@ -14,6 +14,7 @@ import {ChildConceptTerm} from '../types'
 import {SchemeContext} from './TreeView'
 import {ChildConcepts} from './ChildConcepts'
 import {ConceptDetailLink} from './ConceptDetailLink'
+import {ConceptDetailDialogue} from './ConceptDetailDialogue'
 
 export const Children = ({concept}: {concept: ChildConceptTerm}) => {
   const document: any = useContext(SchemeContext) || {}
@@ -36,10 +37,13 @@ export const Children = ({concept}: {concept: ChildConceptTerm}) => {
   return (
     <StyledChildConcept>
       <Inline space={2}>
-        <Text size={2}>
-          {!concept?.prefLabel && <span className="untitled">[new concept]</span>}
-          <ConceptDetailLink concept={concept} />
-        </Text>
+        <Inline space={1}>
+          <Text size={2}>
+            {!concept?.prefLabel && <span className="untitled">[new concept]</span>}
+            <ConceptDetailLink concept={concept} />
+          </Text>
+          {!document.displayed?.controls && <ConceptDetailDialogue concept={concept} />}
+        </Inline>
         {document.displayed?.controls && concept?.level && concept.level < 5 && (
           <Inline space={1}>
             <AddCircleIcon className="normal" onClick={handleAddChild} />

src/components/ConceptDetailDialogue.tsx

@@ -0,0 +1,91 @@
+/**
+ * Information Icon and Dialogue with Concept Details
+ * Affords Tree View access to Definition, Examples, and Scope Notes
+ */
+
+import {useCallback, useState} from 'react'
+import {Dialog, Box, Text, Stack, Label} from '@sanity/ui'
+import {InfoOutlineIcon} from '@sanity/icons'
+import {InfoDialog} from '../styles'
+
+export const ConceptDetailDialogue = ({concept}: {concept: any}) => {
+  const [open, setOpen] = useState(false)
+  const onClose = useCallback(() => setOpen(false), [])
+  const onOpen = useCallback(() => setOpen(true), [])
+
+  if (!concept) return null
+  else if (!concept.definition && !concept.example && !concept.scopeNote) {
+    return null
+
+    // To Investigate: Showing disabled icons in the absence of explanatory notes.
+    // The goal is to encourage editors to provide descriptions, but the better
+    // practice is likely simply not to show the icon if there is no content there.
+    // For the moment, defaulting to showing no icon.
+
+    // return (
+    //   <InfoDialog>
+    //     <Tooltip
+    //       content={
+    //         <Box padding={2} sizing="border">
+    //           <Stack padding={1} space={2}>
+    //             <Text muted size={1}>
+    //               This concept has no explanatory notes.
+    //             </Text>
+    //           </Stack>
+    //         </Box>
+    //       }
+    //       fallbackPlacements={['right', 'left']}
+    //       placement="top"
+    //     >
+    //       <InfoOutlineIcon className="default" />
+    //     </Tooltip>
+    //   </InfoDialog>
+    // )
+  }
+
+  return (
+    <InfoDialog>
+      <InfoOutlineIcon className="brand" onClick={onOpen} />
+
+      {open && (
+        <Dialog
+          header={concept.prefLabel}
+          id="dialog-example"
+          onClose={onClose}
+          zOffset={1000}
+          width={1}
+        >
+          <Box padding={4} paddingBottom={5}>
+            <Stack space={4}>
+              {concept.definition && (
+                <Stack space={2}>
+                  <Label size={1}>Definition</Label>
+                  <Text size={2} muted style={{whiteSpace: 'pre-wrap'}}>
+                    {concept.definition}
+                  </Text>
+                </Stack>
+              )}
+              {concept.example && (
+                <Stack space={2}>
+                  <Label size={1}>Example</Label>
+                  <Text size={2} muted style={{whiteSpace: 'pre-wrap'}}>
+                    {concept.example}
+                  </Text>
+                </Stack>
+              )}
+              {concept.scopeNote && (
+                <Stack space={2}>
+                  <Label size={1}>Scope Note</Label>
+                  <Text size={2} muted style={{whiteSpace: 'pre-wrap'}}>
+                    {concept.scopeNote}
+                  </Text>
+                </Stack>
+              )}
+              {/* <pre>{JSON.stringify(concept, null, 2)}</pre> */}
+            </Stack>
+          </Box>
+        </Dialog>
+      )}
+    </InfoDialog>
+  )
+}

src/components/Orphans.tsx

@@ -12,6 +12,7 @@ import {ChildConceptTerm} from '../types'
 import {SchemeContext} from './TreeView'
 import {ChildConcepts} from './ChildConcepts'
 import {ConceptDetailLink} from './ConceptDetailLink'
+import {ConceptDetailDialogue} from './ConceptDetailDialogue'
 
 export const Orphans = ({concept}: {concept: ChildConceptTerm}) => {
   const document: any = useContext(SchemeContext) || {}
@@ -36,6 +37,7 @@ export const Orphans = ({concept}: {concept: ChildConceptTerm}) => {
             orphan
           </Text>
         )}
+        {!document.displayed?.controls && <ConceptDetailDialogue concept={concept} />}
         {document.displayed?.controls && (
           <>
             <Tooltip

src/components/TopConcepts.tsx

@@ -12,6 +12,7 @@ import {TopConceptTerm} from '../types'
 import {ChildConcepts} from './ChildConcepts'
 import {SchemeContext} from './TreeView'
 import {ConceptDetailLink} from './ConceptDetailLink'
+import {ConceptDetailDialogue} from './ConceptDetailDialogue'
 
 export const TopConcepts = ({concept}: {concept: TopConceptTerm}) => {
   const document: any = useContext(SchemeContext) || {}
@@ -34,6 +35,7 @@ export const TopConcepts = ({concept}: {concept: TopConceptTerm}) => {
         <Text size={1} muted>
           top concept
         </Text>
+        {!document.displayed?.controls && <ConceptDetailDialogue concept={concept} />}
         {document.displayed?.controls && (
           <>
             <Tooltip

src/queries.ts

@@ -17,6 +17,9 @@ const branchBuilder = (level = 1): string | void => {
       "id": _id,
       "level": ${level},
       prefLabel,
+      definition,
+      example,
+      scopeNote,
       ${branchBuilder(level + 1)}
     }`
 }
@@ -35,6 +38,9 @@ export const trunkBuilder = (): string => {
       "id": _id,
       "level": 0,
       prefLabel,
+      definition,
+      example,
+      scopeNote,
       ${branchBuilder()}
     },
     "orphans": *[
@@ -45,6 +51,9 @@ export const trunkBuilder = (): string => {
       "id": _id,
       "level": 0,
       prefLabel,
+      definition,
+      example,
+      scopeNote,
       ${branchBuilder()}
     }
   }`

src/styles.ts

@@ -8,6 +8,28 @@ export const DescriptionDetail = styled.p`
 export const InlineHelp = styled.div`
   margin-top: 2rem;
 `
+
+export const InfoDialog = styled.div`
+  svg {
+    height: 1.2rem;
+    width: 1.2rem;
+    color: ${hues.gray[800].hex};
+    border-radius: 3px;
+    transition: all 0.1s ease-in-out;
+    &.brand:hover {
+      color: ${hues.gray[100].hex};
+      background-color: ${hues.blue[400].hex};
+    }
+    &.default {
+      color: ${hues.gray[300].hex};
+      &:hover {
+        color: ${hues.gray[100].hex};
+        background-color: ${hues.gray[600].hex};
+      }
+    }
+  }
+`
+
 export const StyledTree = styled.ul`
   list-style: none;
   padding-left: 0;