Concept map related concepts rendering added.

Author: Test User

explorer/design-system/product-patterns/thesaurus/ThesaurusExplorer.tsx

@@ -266,6 +266,10 @@ const shellBaseUX = css`
     height: 100%;
   }
 
+  .ux-thesaurus-scheme-map-canvas .react-flow__node {
+    transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
+  }
+
   .ux-thesaurus-scheme-map-canvas .react-flow__pane {
     cursor: grab;
   }
@@ -282,7 +286,16 @@ const shellBaseUX = css`
     position: relative;
   }
 
+  .ux-thesaurus-flow-node__header {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
   .ux-thesaurus-flow-node__label {
+    flex: 1 1 auto;
+    min-width: 0;
     overflow: hidden;
     font-size: var(--text-base);
     font-weight: var(--weight-bold);
@@ -291,6 +304,24 @@ const shellBaseUX = css`
     white-space: nowrap;
   }
 
+  .ux-thesaurus-flow-node__focus {
+    display: inline-flex;
+    width: var(--space-8);
+    height: var(--space-8);
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    border: var(--border-w) solid var(--border-subtle);
+    border-radius: var(--radius-pill);
+    padding: 0;
+    cursor: pointer;
+    font-size: var(--text-caption);
+    font-weight: var(--weight-bold);
+    font-family: inherit;
+    line-height: 0;
+  }
+
   .ux-thesaurus-flow-node__meta {
     color: var(--text-muted);
     font-size: var(--text-micro);
@@ -354,6 +385,11 @@ const shellBaseUX = css`
     background: var(--text-strong);
   }
 
+  .ux-thesaurus-flow-node.is-focus-center {
+    border-color: var(--concept);
+    background: var(--bg-selected);
+  }
+
   .ux-thesaurus-scheme-map-link {
     fill: none;
     stroke-width: 3;
@@ -439,6 +475,17 @@ const shellSkinX = css`
     color: var(--text-body);
   }
 
+  .ux-thesaurus-flow-node__focus {
+    background: var(--bg-surface);
+    color: var(--text-muted);
+  }
+
+  .ux-thesaurus-flow-node__focus:hover {
+    border-color: var(--concept);
+    background: var(--bg-hover);
+    color: var(--text-strong);
+  }
+
   .ux-thesaurus-link:hover,
   .ux-thesaurus-node:hover {
     background: var(--bg-hover);
@@ -632,9 +679,10 @@ function ThesaurusSchemeMap({
   onSelect: (id: string) => void;
   onOpenConcept?: (id: string) => void;
 }) {
+  const [focusId, setFocusId] = useState<string | null>(null);
   const layout = useMemo(
-    () => buildThesaurusFlowLayout(concepts, schemeLabel, selectedId),
-    [concepts, schemeLabel, selectedId],
+    () => buildThesaurusFlowLayout(concepts, schemeLabel, selectedId, focusId, setFocusId),
+    [concepts, schemeLabel, selectedId, focusId],
   );
   const layoutKey = useMemo(() => layout.nodes.map((node) => node.id).join("|"), [layout.nodes]);
   const [flowInstance, setFlowInstance] = useState<ReactFlowInstance<ThesaurusFlowNode, ThesaurusFlowEdge> | null>(
@@ -655,11 +703,13 @@ function ThesaurusSchemeMap({
   }, [flowInstance, layoutKey]);
 
   useEffect(() => {
-    if (!flowInstance || centeredSelectionRef.current === selectedId) return;
-    const selectedNode = flowInstance.getNode(selectedId) ?? layout.nodes.find((node) => node.id === selectedId);
+    const activeId = focusId ?? selectedId;
+    const activeCenterKey = `${focusId ? "focus" : "select"}:${activeId}`;
+    if (!flowInstance || centeredSelectionRef.current === activeCenterKey) return;
+    const selectedNode = flowInstance.getNode(activeId) ?? layout.nodes.find((node) => node.id === activeId);
     if (!selectedNode) return;
 
-    centeredSelectionRef.current = selectedId;
+    centeredSelectionRef.current = activeCenterKey;
     const viewport = flowInstance.getViewport();
     const width = selectedNode.measured?.width ?? selectedNode.width ?? THESAURUS_CONCEPT_NODE_CENTER_WIDTH;
     const height = selectedNode.measured?.height ?? selectedNode.height ?? THESAURUS_CONCEPT_NODE_CENTER_HEIGHT;
@@ -671,7 +721,7 @@ function ThesaurusSchemeMap({
         duration: THESAURUS_SELECTION_CENTER_DURATION,
       });
     });
-  }, [flowInstance, layout.nodes, selectedId]);
+  }, [flowInstance, focusId, layout.nodes, selectedId]);
 
   return (
     <main className="ux-thesaurus-scheme-map" aria-label="Concept scheme map">
@@ -686,6 +736,7 @@ function ThesaurusSchemeMap({
           elementsSelectable
           proOptions={{ hideAttribution: true }}
           onInit={setFlowInstance}
+          onPaneClick={() => setFocusId(null)}
           onNodeClick={(_event, node) => {
             const sourceElementId = readFlowNodeSourceElementId(node);
             if (sourceElementId) {
@@ -707,10 +758,15 @@ function ThesaurusSchemeMap({
 
 
 type ThesaurusFlowNodeData = Record<string, unknown> & {
+  conceptId: string | null;
   label: string;
   meta: string;
   selected: boolean;
+  focusCenter: boolean;
+  focusable: boolean;
+  focusRelatedCount: number;
   sourceElementId: string | null;
+  onFocus: ((id: string) => void) | null;
 };
 
 type ThesaurusFlowNode = Node<ThesaurusFlowNodeData>;
@@ -742,11 +798,28 @@ function ThesaurusFlowNodeComponent({ data, type }: NodeProps<ThesaurusFlowNode>
         "ux-thesaurus-flow-node",
         type === "scheme" ? "is-scheme" : "is-concept",
         data.selected && "is-selected",
+        data.focusCenter && "is-focus-center",
       )}
     >
       <Handle type="target" position={Position.Left} />
       <Handle type="target" position={Position.Right} />
-      <div className="ux-thesaurus-flow-node__label">{data.label}</div>
+      <div className="ux-thesaurus-flow-node__header">
+        <div className="ux-thesaurus-flow-node__label">{data.label}</div>
+        {data.focusable && data.conceptId ? (
+          <button
+            type="button"
+            className="ux-thesaurus-flow-node__focus"
+            aria-label={`Show concepts related to ${data.label}`}
+            title="related to"
+            onClick={(event) => {
+              event.stopPropagation();
+              data.onFocus?.(data.conceptId as string);
+            }}
+          >
+            +
+          </button>
+        ) : null}
+      </div>
       {data.meta ? <div className="ux-thesaurus-flow-node__meta">{data.meta}</div> : null}
       <Handle type="source" position={Position.Left} />
       <Handle type="source" position={Position.Right} />
@@ -770,6 +843,8 @@ function buildThesaurusFlowLayout(
   concepts: readonly ThesaurusConceptItem[],
   schemeLabel: string,
   selectedId: string,
+  focusId: string | null,
+  onFocus: (id: string | null) => void,
 ): ThesaurusFlowLayout {
   const conceptIds = new Set(concepts.map((concept) => concept.id));
   const conceptById = new Map(concepts.map((concept) => [concept.id, concept]));
@@ -780,16 +855,26 @@ function buildThesaurusFlowLayout(
   const branchDirectionByTopConcept = new Map(topConceptIds.map((id, index) => [id, index % 2 === 0 ? 1 : -1]));
   const schemeSourceElementId = concepts.find((concept) => concept.schemeSourceElementId)?.schemeSourceElementId ?? null;
   const positionById = mapMindMapPositions(concepts, topConceptIds, conceptIds, branchDirectionByTopConcept);
+  const focusNeighborhood = focusId && conceptIds.has(focusId) ? conceptNeighborhood(focusId, concepts, conceptIds) : null;
+  const focusPositionById = focusNeighborhood
+    ? mapFocusNeighborhoodPositions(focusId as string, focusNeighborhood.visibleIds)
+    : new Map<string, { x: number; y: number }>();
   const nodes: ThesaurusFlowNode[] = [
     {
       id: THESAURUS_SCHEME_NODE_ID,
       type: "scheme",
       position: { x: 0, y: 0 },
+      hidden: focusNeighborhood !== null,
       data: {
+        conceptId: null,
         label: schemeLabel,
         meta: "Concept scheme",
         selected: false,
+        focusCenter: false,
+        focusable: false,
+        focusRelatedCount: 0,
         sourceElementId: schemeSourceElementId,
+        onFocus: null,
       },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
@@ -801,34 +886,97 @@ function buildThesaurusFlowLayout(
     const isTopConcept = !concept.parentId || !conceptIds.has(concept.parentId);
     const topId = topConceptId(concept, conceptById, conceptIds);
     const branchClass = branchByTopConcept.get(topId) ?? "branch-0";
-    const position = positionById.get(concept.id) ?? { x: MINDMAP_X_STEP, y: 0 };
+    const isFocusVisible = focusNeighborhood?.visibleIds.has(concept.id) ?? false;
+    const isFocusCenter = focusId === concept.id;
+    const position = focusPositionById.get(concept.id) ?? positionById.get(concept.id) ?? { x: MINDMAP_X_STEP, y: 0 };
     const direction = position.x >= 0 ? 1 : -1;
+    const relatedCount = conceptNeighborhood(concept.id, concepts, conceptIds).relatedIds.length;
     nodes.push({
       id: concept.id,
       type: "concept",
       className: branchClass,
       position,
+      hidden: focusNeighborhood !== null && !isFocusVisible,
       data: {
+        conceptId: concept.id,
         label: concept.label,
-        meta: "",
+        meta: isFocusCenter ? "Selected concept" : "",
         selected: concept.id === selectedId,
+        focusCenter: isFocusCenter,
+        focusable: relatedCount > 0,
+        focusRelatedCount: relatedCount,
         sourceElementId: concept.sourceElementId ?? null,
+        onFocus,
       },
       sourcePosition: direction > 0 ? Position.Right : Position.Left,
       targetPosition: direction > 0 ? Position.Left : Position.Right,
     });
-    edges.push({
-      id: `${isTopConcept ? THESAURUS_SCHEME_NODE_ID : concept.parentId}-${concept.id}`,
-      source: isTopConcept ? THESAURUS_SCHEME_NODE_ID : concept.parentId as string,
-      target: concept.id,
-      type: "mindmap",
-      className: `taxonomy ${branchClass}`,
-    });
+    if (!focusNeighborhood) {
+      edges.push({
+        id: `${isTopConcept ? THESAURUS_SCHEME_NODE_ID : concept.parentId}-${concept.id}`,
+        source: isTopConcept ? THESAURUS_SCHEME_NODE_ID : concept.parentId as string,
+        target: concept.id,
+        type: "mindmap",
+        className: `taxonomy ${branchClass}`,
+      });
+    }
+  }
+
+  if (focusNeighborhood) {
+    for (const relatedId of focusNeighborhood.relatedIds) {
+      const related = conceptById.get(relatedId);
+      if (!related) continue;
+      const topId = topConceptId(related, conceptById, conceptIds);
+      const branchClass = branchByTopConcept.get(topId) ?? "branch-0";
+      edges.push({
+        id: `${focusId}-${relatedId}-focus`,
+        source: focusId as string,
+        target: relatedId,
+        type: "mindmap",
+        className: `focus ${branchClass}`,
+      });
+    }
   }
 
   return { nodes, edges };
 }
 
+function conceptNeighborhood(
+  focusId: string,
+  concepts: readonly ThesaurusConceptItem[],
+  conceptIds: ReadonlySet<string>,
+) {
+  const focusConcept = concepts.find((concept) => concept.id === focusId);
+  const relatedIds = new Set<string>();
+  for (const concept of concepts) {
+    if (concept.relatedIds.includes(focusId)) relatedIds.add(concept.id);
+  }
+  for (const relatedId of focusConcept?.relatedIds ?? []) {
+    if (conceptIds.has(relatedId)) relatedIds.add(relatedId);
+  }
+  relatedIds.delete(focusId);
+  return {
+    relatedIds: Array.from(relatedIds),
+    visibleIds: new Set([focusId, ...relatedIds]),
+  };
+}
+
+function mapFocusNeighborhoodPositions(focusId: string, visibleIds: ReadonlySet<string>) {
+  const positionById = new Map<string, { x: number; y: number }>();
+  positionById.set(focusId, { x: 0, y: 0 });
+  const relatedIds = Array.from(visibleIds).filter((id) => id !== focusId);
+  const radiusX = MINDMAP_X_STEP * 1.18;
+  const radiusY = MINDMAP_Y_STEP * 1.18;
+  relatedIds.forEach((id, index) => {
+    const angle = (-Math.PI / 2) + (index * 2 * Math.PI) / Math.max(relatedIds.length, 1);
+    positionById.set(id, {
+      x: Math.cos(angle) * radiusX,
+      y: Math.sin(angle) * radiusY,
+    });
+  });
+  return positionById;
+}
+
 function mapMindMapPositions(
   concepts: readonly ThesaurusConceptItem[],
   topConceptIds: readonly string[],

system-model/Interfaces/WebExplorer/Specifications.md

@@ -831,7 +831,7 @@ Thesaurus view generation behavior:
 - Presents selected concept details using generated SKOS fields from the normalized concept projection: the modal title carries the preferred label derived from the element name; the body promotes definition from main body content, alternative labels, scope notes, examples, broader/narrower hierarchy, related concepts, exact/close mapping relations, and ontology bridge mappings. These relation lists must exclude the selected concept itself and deduplicate reciprocal graph edges before rendering.
 - Shows ontology bridge context as usage evidence: ontology terms that author `reqvire:mapsToConcept` to the selected native concept appear as mapped ontology terms without making the concept an ontology child.
 - Provides a single scheme-scoped Map workspace for the selected concept's scheme; Thesaurus must not expose a Browse/Map segmented mode control.
-- Renders Thesaurus Map through the shared design-system product pattern using React Flow for node interaction and deterministic concept-scheme mind-map layout. The map canvas must be transparent, full-bleed, and full-height over the available workspace surface; concept-scheme nodes render as compact boxed anchors, concept nodes render as boxed label-first mind-map entries without role labels, and taxonomy edges render as colored curved branches.
+- Renders Thesaurus Map through the shared design-system product pattern using React Flow for node interaction and deterministic concept-scheme mind-map layout. The map canvas must be transparent, full-bleed, and full-height over the available workspace surface; concept-scheme nodes render as compact boxed anchors, concept nodes render as boxed label-first mind-map entries without role labels, and taxonomy edges render as colored curved branches. Concept nodes with `related` concept associations expose a compact focus affordance that isolates the selected concept and its related concepts around the focused node, hides unrelated map nodes and edges, centers the focus without changing zoom, and restores the full map when the user clicks the canvas background.
 - Selecting a concept from the left Thesaurus navigator must keep the active scheme Map view open and center the matching map node in the workspace without changing the user's current map zoom level.
 - Opens the shared element-detail modal using `thesaurus.schemes[].element_id` for concept-scheme map nodes and `thesaurus.concepts[].element_id` for concept map nodes. Activating a Thesaurus map node must never open an ontology graph node merely because ontology graph provenance or mapping data names the same SKOS IRI. Concept elements must use a SKOS-optimized modal body that keeps the standard element modal frame but promotes definition, scheme, alternative labels, scope note, examples, top concepts, broader/narrower/related concepts, exact/close matches, mapped ontology terms, and model usage before `Authored relations`, which contains remaining Reqvire Markdown relation evidence. The relation lists shown in this modal must not contain the selected concept itself or circular duplicate endpoints. The Thesaurus route must not create a separate concept-specific modal frame for this.
 - Keeps source navigation anchored to the Markdown `concept-scheme` or `concept` element.

system-model/Ontologies/RelationsAndImpact.md

@@ -222,7 +222,7 @@ reqvire:CapabilityRelationShape
   ] ;
   sh:property [
     sh:path reqvire:verifiedBy ;
-    sh:class reqvire:Verification ;
+    sh:class reqvire:ConcreteVerification ;
   ] ;
   sh:property [
     sh:path reqvire:satisfiedBy ;
@@ -282,10 +282,7 @@ reqvire:VerificationRelationShape
   sh:targetClass reqvire:Verification ;
   sh:property [
     sh:path reqvire:verify ;
-    sh:or (
-      [ sh:class reqvire:Capability ]
-      [ sh:class reqvire:Requirement ]
-    ) ;
+    sh:class reqvire:Requirement ;
   ] ;
   sh:property [
     sh:path reqvire:derivedFrom ;

system-model/Ontologies/Verification.md

@@ -360,10 +360,7 @@ reqvire:ConcreteVerificationShape
   sh:property [
     sh:path reqvire:verify ;
     sh:minCount 1 ;
-    sh:or (
-      [ sh:class reqvire:Capability ]
-      [ sh:class reqvire:Requirement ]
-    ) ;
+    sh:class reqvire:Requirement ;
   ] ;
   sh:property [
     sh:path reqvire:verifiedBy ;