Clean up topic page labels and link hierarchy

application/frontend/src/components/DocumentNode/DocumentNode.tsx

@@ -5,12 +5,19 @@ import React, { FunctionComponent, useContext, useEffect, useMemo, useState } fr
 import { Link, useHistory, useLocation } from 'react-router-dom';
 import { Icon } from 'semantic-ui-react';
 
-import { CRE, TYPE_AUTOLINKED_TO, TYPE_CONTAINS, TYPE_IS_PART_OF, TYPE_RELATED } from '../../const';
+import {
+  CRE,
+  TYPE_AUTOLINKED_TO,
+  TYPE_CONTAINS,
+  TYPE_IS_PART_OF,
+  TYPE_LINKED_TO,
+  TYPE_RELATED,
+} from '../../const';
 import { useEnvironment } from '../../hooks';
 import { applyFilters } from '../../hooks/applyFilters';
 import { Document } from '../../types';
-import { getDocumentDisplayName, groupLinksByType } from '../../utils';
-import { getApiEndpoint, getDocumentTypeText, getInternalUrl } from '../../utils/document';
+import { groupLinksByType } from '../../utils';
+import { getApiEndpoint, getDocumentTypeText, getInternalUrl, getTopicDisplayName } from '../../utils/document';
 import { FilterButton } from '../FilterButton/FilterButton';
 import { LoadingAndErrorIndicator } from '../LoadingAndErrorIndicator';
 
@@ -24,6 +31,7 @@ export interface DocumentNode {
 const linkTypesToNest = [TYPE_IS_PART_OF, TYPE_RELATED, TYPE_AUTOLINKED_TO];
 const linkTypesExcludedInNesting = [TYPE_CONTAINS];
 const linkTypesExcludedWhenNestingRelatedTo = [TYPE_RELATED, TYPE_IS_PART_OF, TYPE_CONTAINS];
+const linkDisplayOrder = [TYPE_LINKED_TO, TYPE_AUTOLINKED_TO, TYPE_CONTAINS, TYPE_IS_PART_OF, TYPE_RELATED];
 
 export const DocumentNode: FunctionComponent<DocumentNode> = ({
   node,
@@ -50,7 +58,9 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
   const isNestedInRelated = hasLinktypeRelatedParent || linkType === TYPE_RELATED;
 
   const getTopicsToDisplayOrderdByLinkType = () => {
-    return Object.entries(linksByType)
+    return linkDisplayOrder
+      .map((type) => [type, linksByType[type]] as [string, any])
+      .filter(([_, links]) => Array.isArray(links) && links.length > 0)
       .filter(([type, _]) => !linkTypesExcludedInNesting.includes(type))
       .filter(([type, _]) =>
         isNestedInRelated ? !linkTypesExcludedWhenNestingRelatedTo.includes(type) : true
@@ -63,8 +73,9 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
     const isAllowedToAutoExpandByLength =
       topicsToDisplay.map(([, links]) => links).reduce((prev, cur) => prev.concat(cur), []).length <=
       MAX_LENGTH_FOR_AUTO_EXPAND;
-    setExpanded(isCrePath ? isAllowedToAutoExpandByLength : false);
-  }, [topicsToDisplay, isCrePath]);
+    const shouldCollapseRelatedByDefault = linkType === TYPE_RELATED;
+    setExpanded(isCrePath && !shouldCollapseRelatedByDefault ? isAllowedToAutoExpandByLength : false);
+  }, [topicsToDisplay, isCrePath, linkType]);
 
   useEffect(() => {
     if (!isStandard && linkTypesToNest.includes(linkType)) {
@@ -74,15 +85,15 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
         .then(function (response) {
           setLoading(false);
           setNestedNode(response.data.data);
-          setExpanded(true);
+          setExpanded(linkType !== TYPE_RELATED);
           setError('');
         })
         .catch(function (axiosError) {
           setLoading(false);
           setError(axiosError);
         });
     }
-  }, [id]);
+  }, [id, linkType]);
 
   const fetchedNodeHasLinks = () => {
     return usedNode.links && usedNode.links.length > 0;
@@ -104,6 +115,9 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
           {' '}
           {hyperlink.hyperlink}
         </a>
+        <a href={hyperlink.hyperlink} target="_blank" rel="noopener noreferrer" aria-label="Open reference in new tab">
+          <Icon name="external" />
+        </a>
       </>
     );
   };
@@ -125,7 +139,7 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
         <div className={`title external-link document-node f2`}>
           <Link to={getInternalUrl(usedNode)}>
             <i aria-hidden="true" className="circle icon"></i>
-            {getDocumentDisplayName(usedNode)}
+            {getTopicDisplayName(usedNode)}
           </Link>
           <HyperlinkIcon hyperlink={usedNode.hyperlink} />
         </div>
@@ -140,14 +154,14 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
         <LoadingAndErrorIndicator loading={loading} error={error} />
         <div className={`title ${active} document-node`} onClick={() => setExpanded(!expanded)}>
           <i aria-hidden="true" className="dropdown icon"></i>
-          <Link to={getInternalUrl(usedNode)}>{getDocumentDisplayName(usedNode)}</Link>
+          <Link to={getInternalUrl(usedNode)}>{getTopicDisplayName(usedNode)}</Link>
         </div>
         <div className={`content${active} document-node`}>
           <Hyperlink hyperlink={usedNode.hyperlink} />
           {expanded &&
             topicsToDisplay.map(([type, links], idx) => {
               const sortedResults = [...links].sort((a, b) =>
-                getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document))
+                getTopicDisplayName(a.document).localeCompare(getTopicDisplayName(b.document))
               );
               return (
                 <div className="document-node__link-type-container" key={`${type}-${idx}`}>

application/frontend/src/components/DocumentNode/documentNode.scss

@@ -35,6 +35,12 @@
   &__link-type-container hr {
     margin: 15px 0;
   }
+
+  &__link-type-container {
+    border-left: 3px solid rgba(33, 133, 208, 0.2);
+    margin-left: 0.5rem;
+    padding-left: 0.75rem;
+  }
 }
 
 

application/frontend/src/const.ts

@@ -9,11 +9,11 @@ export const TYPE_AUTOLINKED_TO = 'Automatically linked to';
 
 export const DOCUMENT_TYPE_NAMES = {
   [TYPE_AUTOLINKED_TO]: ' has been automatically mapped to',
-  [TYPE_LINKED_TO]: ' is linked to sources',
-  [TYPE_IS_PART_OF]: ' is part of CREs',
-  [TYPE_LINKED_FROM]: 'is linked from CREs',
-  [TYPE_CONTAINS]: ' contains CREs',
-  [TYPE_RELATED]: ' is related to CREs',
+  [TYPE_LINKED_TO]: ' refers to sources',
+  [TYPE_IS_PART_OF]: ' is child of Requirements',
+  [TYPE_LINKED_FROM]: ' is referenced by Requirements',
+  [TYPE_CONTAINS]: ' contains Requirements',
+  [TYPE_RELATED]: ' is related to Requirements',
 };
 
 export const DOCUMENT_TYPES = {

application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx

@@ -3,6 +3,7 @@ import './commonRequirementEnumeration.scss';
 import axios from 'axios';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
+import { Icon } from 'semantic-ui-react';
 
 import { DocumentNode } from '../../components/DocumentNode';
 import { ClearFilterButton, FilterButton } from '../../components/FilterButton/FilterButton';
@@ -68,7 +69,7 @@ export const CommonRequirementEnumeration = () => {
       {!loading && !error && display && (
         <>
           <h4 className="cre-page__heading">{display.name}</h4>
-          <h5 className="cre-page__sub-heading">CRE: {display.id}</h5>
+          <h5 className="cre-page__sub-heading">ID: {display.id}</h5>
           <div className="cre-page__description">{display.description}</div>
           {display && display.hyperlink && (
             <>
@@ -77,6 +78,9 @@ export const CommonRequirementEnumeration = () => {
                 {' '}
                 {display.hyperlink}
               </a>
+              <a href={display?.hyperlink} target="_blank" rel="noopener noreferrer" aria-label="Open reference in new tab">
+                <Icon name="external" />
+              </a>
             </>
           )}
 

application/frontend/src/pages/Explorer/explorer.tsx

@@ -5,13 +5,12 @@ import { Link } from 'react-router-dom';
 import { Checkbox, List, Popup } from 'semantic-ui-react';
 
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
-import { TYPE_CONTAINS, TYPE_LINKED_TO } from '../../const';
-import { useDataStore } from '../../providers/DataProvider';
-import { LinkedTreeDocument, TreeDocument } from '../../types';
-import { getDocumentDisplayName } from '../../utils';
-import { getInternalUrl } from '../../utils/document';
-import { GraphDebugPanel } from './GraphDebugPanel';
-import { LinkedStandards } from './LinkedStandards';
+import { TYPE_CONTAINS, TYPE_LINKED_TO } from '../../const';
+import { useDataStore } from '../../providers/DataProvider';
+import { LinkedTreeDocument, TreeDocument } from '../../types';
+import { getInternalUrl, getTopicDisplayName } from '../../utils/document';
+import { GraphDebugPanel } from './GraphDebugPanel';
+import { LinkedStandards } from './LinkedStandards';
 
 export const Explorer = () => {
   const { dataLoading, dataTree, dataStore } = useDataStore();
@@ -89,14 +88,14 @@ export const Explorer = () => {
     if (!item) {
       return <></>;
     }
-    item.displayName = item.displayName ?? getDocumentDisplayName(item);
-    item.url = item.url ?? getInternalUrl(item);
-    item.links = item.links ?? [];
-
-    const contains = item.links.filter((x) => x.ltype === TYPE_CONTAINS);
-    const linkedTo = item.links.filter((x) => x.ltype === TYPE_LINKED_TO);
-    const creCode = item.id;
-    const creName = item.displayName.split(' : ').pop();
+    item.displayName = item.displayName ?? getTopicDisplayName(item);
+    item.url = item.url ?? getInternalUrl(item);
+    item.links = item.links ?? [];
+
+    const contains = item.links.filter((x) => x.ltype === TYPE_CONTAINS);
+    const linkedTo = item.links.filter((x) => x.ltype === TYPE_LINKED_TO);
+    const creCode = item.id;
+    const creName = getTopicDisplayName(item);
     return (
       <List.Item key={Math.random()}>
         <List.Content>
@@ -108,12 +107,11 @@ export const Explorer = () => {
               >
                 <i aria-hidden="true" className="dropdown icon"></i>
               </div>
-            )}
-            <Link to={item.url}>
-              <span className="cre-code">{applyHighlight(creCode, filter)}:</span>
-              <span className="cre-name">{applyHighlight(creName, filter)}</span>
-            </Link>
-          </List.Header>
+            )}
+            <Link to={item.url}>
+              <span className="cre-name">{applyHighlight(creName, filter)}</span>
+            </Link>
+          </List.Header>
           <LinkedStandards
             linkedTo={linkedTo}
             applyHighlight={applyHighlight}

application/frontend/src/providers/DataProvider.tsx

@@ -7,7 +7,7 @@ import { useEnvironment } from '../hooks/useEnvironment';
 import { Document, TreeDocument } from '../types';
 // Switched from localStorage utils to the new IndexedDB utils
 import { getDbObject, setDbObject } from '../utils'; // Assumes utils/index.tsx is the entry point
-import { getDocumentDisplayName, getInternalUrl } from '../utils/document';
+import { getInternalUrl, getTopicDisplayName } from '../utils/document';
 
 const DATA_STORE_KEY = 'data-store',
   DATA_TREE_KEY = 'record-tree';
@@ -118,7 +118,7 @@ export const DataProvider = ({ children }: { children: React.ReactNode }) => {
             data.forEach((x) => {
               store[getStoreKey(x)] = {
                 links: x.links,
-                displayName: getDocumentDisplayName(x),
+                displayName: getTopicDisplayName(x),
                 url: getInternalUrl(x),
                 ...x,
               };

application/frontend/src/utils/document.ts

@@ -32,7 +32,7 @@ export const groupLinksByType = (node: Document): LinksByType =>
   node.links ? groupBy(node.links, (link) => link.ltype) : {};
 
 export const orderLinksByType = (lbt: LinksByType): LinksByType => {
-  const order = ['Contains', 'Linked To', 'Automatically linked to', 'Is Part Of', 'Related'];
+  const order = ['Linked To', 'Automatically linked to', 'Contains', 'Is Part Of', 'Related'];
   const res: LinksByType = {};
   for (const itm of order) {
     if (lbt[itm]) {
@@ -90,6 +90,16 @@ export const getApiEndpoint = (doc: Document, apiUrl: string): string => {
   return `${apiUrl}/id/${doc.id}`;
 };
 
+export const getTopicDisplayName = (document: Document): string => {
+  if (!document) {
+    return '';
+  }
+  if (document.doctype === DOCUMENT_TYPES.TYPE_CRE) {
+    return document.name || '';
+  }
+  return getDocumentDisplayName(document);
+};
+
 export const getDocumentTypeText = (linkType, docType, parentDocType = ''): string => {
   let docText = DOCUMENT_TYPE_NAMES[linkType];
   if (linkType === TYPE_LINKED_TO && docType === DOCUMENT_TYPES.TYPE_CRE) {