feat: add concept links to hierarchy view

src/components/ChildConcepts.tsx

@@ -3,6 +3,7 @@ import {Tooltip, Box, Stack, Text} from '@sanity/ui'
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {ChildConceptTerm} from '../types'
 import {hues} from '@sanity/color'
+import {ConceptDetailLink} from './ConceptDetailLink'
 
 const StyledChildConcept = styled.ul`
   list-style: none;
@@ -21,7 +22,7 @@ export const ChildConcepts = ({concepts}: {concepts: ChildConceptTerm[]}) => {
       {concepts.map((concept: any) => {
         return (
           <li key={concept.id}>
-            {concept.prefLabel}
+            <ConceptDetailLink concept={concept} />
             {concept.childConcepts?.length > 0 && concept.level == 5 && (
               <Tooltip
                 content={

src/components/ConceptDetailLink.tsx

@@ -0,0 +1,38 @@
+import {usePaneRouter} from 'sanity/desk'
+import {RouterContext} from 'sanity/router'
+import {useCallback, useContext} from 'react'
+import {ChildConceptTerm} from '../types'
+import styled from 'styled-components'
+
+const StyledConceptLink = styled.span`
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export function ConceptDetailLink({concept}: {concept: ChildConceptTerm}) {
+  const routerContext = useContext(RouterContext)
+  const {routerPanesState, groupIndex} = usePaneRouter()
+
+  const {id, prefLabel} = concept
+
+  const openInNewPane = useCallback(() => {
+    if (!routerContext || !id) {
+      return
+    }
+
+    const panes = [...routerPanesState]
+    panes.splice(groupIndex + 1, groupIndex + 1, [
+      {
+        id: id,
+        params: {type: 'skosConcept'},
+      },
+    ])
+
+    const href = routerContext.resolvePathFromState({panes})
+    routerContext.navigateUrl({path: href})
+  }, [id, routerContext, routerPanesState, groupIndex])
+
+  return <StyledConceptLink onClick={openInNewPane}>{prefLabel}</StyledConceptLink>
+}

src/components/Orphans.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import {Text, Inline} from '@sanity/ui'
 import {ChildConcepts} from './ChildConcepts'
+import {ConceptDetailLink} from './ConceptDetailLink'
 import {ChildConceptTerm, DocumentConcepts} from '../types'
 
 const StyledOrphan = styled.li`
@@ -19,7 +20,7 @@ export const Orphans = ({
   return (
     <StyledOrphan key={concept.id}>
       <Inline space={2}>
-        {concept?.prefLabel}
+        <ConceptDetailLink concept={concept} />
         {docConcepts.topConcepts?.length > 0 && (
           <Text size={1} muted>
             orphan

src/components/TopConcepts.tsx

@@ -1,6 +1,7 @@
 import {Text, Inline} from '@sanity/ui'
 import styled from 'styled-components'
 import {ChildConcepts} from './ChildConcepts'
+import {ConceptDetailLink} from './ConceptDetailLink'
 import {TopConceptTerm} from '../types'
 
 const StyledTopConcept = styled.li`
@@ -12,7 +13,7 @@ export const TopConcepts = ({concept}: {concept: TopConceptTerm}) => {
   return (
     <StyledTopConcept>
       <Inline space={2}>
-        {concept?.prefLabel}
+        <ConceptDetailLink concept={concept} />
         <Text size={1} muted>
           top concept
         </Text>

src/types.tsx

@@ -20,3 +20,12 @@ export interface PrefLabelValue {
   // eslint-disable-next-line
   renderDefault: (props: PrefLabelValue) => React.ReactElement
 }
+
+export interface ConceptDetailLinkProps {
+  concept: {
+    id: string
+    prefLabel: string
+    childConcepts?: ChildConceptTerm[]
+    level?: number
+  }
+}