feat(explorer): direct detail navigation for related resources + parent breadcrumbs

Sam-Bolling · Sam-Bolling · commit ecce87448088 · 2026-02-20T08:29:26.000-05:00
- viewRelatedItem() now passes resourceId query param so clicking a
  related resource (e.g. datastream from system detail) opens its
  Detail tab directly instead of the generic list
- ResourceExplorerPage reads resourceId and forwards to ResourcePanel
- ResourcePanel watches initialResourceId prop and auto-selects the
  resource on mount
- Added parent navigation bar in ResourceDetail: extracts cross-reference
  fields (system@id, datastream@id, controlstream@id) and renders
  clickable breadcrumb buttons to navigate upward through the hierarchy
  (observation -&gt; datastream -&gt; system, command -&gt; control stream -&gt; system)
diff --git a/demo/src/components/ResourceDetail.vue b/demo/src/components/ResourceDetail.vue
@@ -111,7 +111,7 @@ function getItemName(item: any): string {
   return item?.properties?.name || item?.properties?.title || item?.name || item?.title || ''
 }
 
-/** Click a related item → load its detail (if same type) or navigate */
+/** Click a related item → navigate directly to its detail view */
 function viewRelatedItem(link: RelatedResourceLink, item: any) {
   const id = getItemId(item)
   if (id === '—') return
@@ -121,13 +121,14 @@ function viewRelatedItem(link: RelatedResourceLink, item: any) {
     manualId.value = ''
     fetchDetail(id)
   } else {
-    // Different type — navigate to that type's explorer with the item selected
+    // Different type — navigate directly to that item's detail view
     router.push({
       path: `/explore/${link.childType}`,
       query: {
         parentType: props.resourceType,
         parentId: String(detail.value?.id || props.resourceId),
         relation: link.relation,
+        resourceId: id,
       },
     })
   }
@@ -152,6 +153,62 @@ function toggleRelation(relation: string) {
   state.expanded = !state.expanded
 }
 
+// ========================================
+// Parent navigation (observation → datastream → system, etc.)
+// ========================================
+
+interface ParentLink {
+  label: string
+  resourceType: string
+  resourceId: string
+  icon: string
+}
+
+/** Extract navigable parent references from the raw detail JSON cross-reference fields */
+const parentLinks = computed<ParentLink[]>(() => {
+  if (!detail.value) return []
+  const links: ParentLink[] = []
+  const raw = detail.value
+
+  // system@id (present on datastreams, controlStreams)
+  if (typeof raw['system@id'] === 'string') {
+    links.push({ label: 'System', resourceType: 'systems', resourceId: raw['system@id'], icon: 'pi pi-server' })
+  } else if (raw['system@link']?.uid) {
+    // Some servers use system@link with href containing the ID
+    const match = raw['system@link']?.href?.match(/systems\/([^/?]+)/)
+    if (match) links.push({ label: 'System', resourceType: 'systems', resourceId: match[1], icon: 'pi pi-server' })
+  }
+
+  // datastream@id (present on observations)
+  if (typeof raw['datastream@id'] === 'string') {
+    links.push({ label: 'Datastream', resourceType: 'datastreams', resourceId: raw['datastream@id'], icon: 'pi pi-chart-line' })
+  }
+
+  // controlstream@id (present on commands)
+  if (typeof raw['controlstream@id'] === 'string') {
+    links.push({ label: 'Control Stream', resourceType: 'controlStreams', resourceId: raw['controlstream@id'], icon: 'pi pi-sliders-h' })
+  }
+
+  // command@id (present on commandStatuses — future-proofing)
+  if (typeof raw['command@id'] === 'string') {
+    links.push({ label: 'Command', resourceType: 'commands', resourceId: raw['command@id'], icon: 'pi pi-send' })
+  }
+
+  // deployment@id (present on deployed systems)
+  if (typeof raw['deployment@id'] === 'string') {
+    links.push({ label: 'Deployment', resourceType: 'deployments', resourceId: raw['deployment@id'], icon: 'pi pi-map' })
+  }
+
+  return links
+})
+
+function navigateToParent(parent: ParentLink) {
+  router.push({
+    path: `/explore/${parent.resourceType}`,
+    query: { resourceId: parent.resourceId },
+  })
+}
+
 async function fetchDetail(id?: string) {
   const useId = id || manualId.value || props.resourceId
   if (!useId) return
@@ -217,6 +274,23 @@ watch(
     </div>
 
     <template v-if="detail">
+      <!-- Parent navigation breadcrumbs -->
+      <div v-if="parentLinks.length > 0" class="parent-nav">
+        <i class="pi pi-arrow-up parent-nav-icon"></i>
+        <span class="parent-nav-label">Parent:</span>
+        <button
+          v-for="parent in parentLinks"
+          :key="parent.resourceType"
+          class="parent-link"
+          @click="navigateToParent(parent)"
+        >
+          <i :class="parent.icon"></i>
+          {{ parent.label }}
+          <code>{{ parent.resourceId }}</code>
+          <i class="pi pi-arrow-up-right parent-link-arrow"></i>
+        </button>
+      </div>
+
       <!-- Inline related resource panels in a grid -->
       <div v-if="allRelations.length > 0 && (detail?.id || props.resourceId)" class="relations-grid">
         <div
@@ -342,6 +416,15 @@ watch(
 .browse-all-link { display: block; width: 100%; padding: 0.3rem 0.65rem; border: none; background: transparent; color: #0369a1; font-size: 0.75rem; font-weight: 600; cursor: pointer; text-align: left; }
 .browse-all-link:hover { background: #e0f2fe; }
 
+/* Parent navigation bar */
+.parent-nav { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem; background: #fefce8; border: 1px solid #fde68a; border-radius: 6px; flex-wrap: wrap; }
+.parent-nav-icon { font-size: 0.8rem; color: #ca8a04; }
+.parent-nav-label { font-size: 0.78rem; font-weight: 600; color: #92400e; white-space: nowrap; }
+.parent-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; border: 1px solid #fde68a; border-radius: 4px; background: #fffbeb; color: #92400e; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
+.parent-link:hover { background: #fef3c7; border-color: #f59e0b; }
+.parent-link code { font-size: 0.72rem; background: rgba(0,0,0,0.05); padding: 0.05rem 0.25rem; border-radius: 2px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
+.parent-link-arrow { font-size: 0.6rem; color: #d97706; opacity: 0.6; }
+
 .diagram-details { margin-top: 0.25rem; }
 .diagram-summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: #0369a1; display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0; user-select: none; }
 .diagram-summary:hover { color: #0284c7; }
diff --git a/demo/src/components/ResourcePanel.vue b/demo/src/components/ResourcePanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { getResourceType } from '../state'
 import Tabs from 'primevue/tabs'
 import TabList from 'primevue/tablist'
@@ -17,13 +17,27 @@ const props = defineProps<{
   parentType?: string | null
   parentId?: string | null
   parentRelation?: string | null
+  initialResourceId?: string | null
 }>()
 
 const rtInfo = computed(() => getResourceType(props.resourceType))
 const activeTab = ref(0)
 const selectedResourceId = ref<string | null>(null)
 const selectedResource = ref<any>(null)
 
+// Auto-select a resource and show its Detail tab when navigated with a direct resourceId
+watch(
+  () => props.initialResourceId,
+  (id) => {
+    if (id) {
+      selectedResourceId.value = id
+      selectedResource.value = null // will be fetched by ResourceDetail
+      activeTab.value = 1
+    }
+  },
+  { immediate: true }
+)
+
 function viewDetail(resource: any) {
   // Extract ID from GeoJSON feature or flat object
   const id = resource?.id || resource?.properties?.id || resource?.['@id'] || ''
diff --git a/demo/src/pages/ResourceExplorerPage.vue b/demo/src/pages/ResourceExplorerPage.vue
@@ -19,6 +19,9 @@ const parentType = computed(() => (route.query.parentType as string) || null)
 const parentId = computed(() => (route.query.parentId as string) || null)
 const parentRelation = computed(() => (route.query.relation as string) || null)
 
+/** Direct-link to a specific resource's detail view (e.g., from clicking a related item) */
+const initialResourceId = computed(() => (route.query.resourceId as string) || null)
+
 /** True when viewing a nested/sub-resource list */
 const isNested = computed(() => !!(parentType.value && parentId.value && parentRelation.value))
 
@@ -98,7 +101,8 @@ function selectType(key: string) {
         :parent-type="parentType"
         :parent-id="parentId"
         :parent-relation="parentRelation"
-        :key="activeType + (parentId || '') + (parentRelation || '')"
+        :initial-resource-id="initialResourceId"
+        :key="activeType + (parentId || '') + (parentRelation || '') + (initialResourceId || '')"
       />
     </main>
   </div>
