Surface OWASP resource mappings in explorer and analysis UI for issue

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

@@ -21,19 +21,40 @@ main#explorer-content {
     color: #0056b3;
   }
 
-  .search-field {
-    input {
-      font-size: 16px;
-      height: 32px;
-      width: 320px;
+  .search-field {
+    input {
+      font-size: 16px;
+      height: 32px;
+      width: 320px;
       margin-bottom: 10px;
       border-radius: 3px;
       border: 1px solid #858585;
       padding: 0 5px;
       color: #333333;
-      background-color: #ffffff;
-    }
-  }
+      background-color: #ffffff;
+    }
+  }
+
+  .tree-actions {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 14px;
+
+    button {
+      height: 34px;
+      padding: 0 12px;
+      border: 1px solid #b1b0b0;
+      border-radius: 4px;
+      background: #ffffff;
+      color: #1a202c;
+      cursor: pointer;
+      font-size: 14px;
+
+      &:hover {
+        background: #f4f6f8;
+      }
+    }
+  }
 
   #graphs-menu {
     display: flex;
@@ -150,16 +171,20 @@ main#explorer-content {
     padding: 1rem;
     /* Reduce from 30px to prevent content touching edges */
 
-    .search-field {
-      input {
-        width: 100%;
-        /* Expand from fixed 320px - overflows on small screens */
-      }
-    }
-
-    .item {
-      margin: 4px 4px 4px 1rem;
-      /* Reduce from 40px left margin on mobile */
+    .search-field {
+      input {
+        width: 100%;
+        /* Expand from fixed 320px - overflows on small screens */
+      }
+    }
+
+    .tree-actions {
+      flex-wrap: wrap;
+    }
+
+    .item {
+      margin: 4px 4px 4px 1rem;
+      /* Reduce from 40px left margin on mobile */
     }
   }
-}
+}

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

@@ -65,6 +65,32 @@ export const Explorer = () => {
     }
   };
 
+  const collectExpandableIds = (nodes: TreeDocument[] = []): string[] => {
+    const ids: string[] = [];
+
+    const visit = (node: TreeDocument | null) => {
+      if (!node) {
+        return;
+      }
+      const contains = (node.links || []).filter((link) => link.ltype === TYPE_CONTAINS);
+      if (contains.length > 0) {
+        ids.push(node.id);
+        contains.forEach((child) => visit(child.document));
+      }
+    };
+
+    nodes.forEach((node) => visit(node));
+    return ids;
+  };
+
+  const collapseAll = () => {
+    setCollapsedItems(collectExpandableIds(filteredTree || []));
+  };
+
+  const expandAll = () => {
+    setCollapsedItems([]);
+  };
+
   useEffect(() => {
     if (dataTree.length) {
       const treeCopy = structuredClone(dataTree);
@@ -136,11 +162,7 @@ export const Explorer = () => {
         <h1>Open CRE Explorer</h1>
         <p>
           A visual explorer of Open Common Requirement Enumerations (CREs). Originally created by:{' '}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://zeljkoobrenovic.github.io/opencre-explorer/"
-          >
+          <a target="_blank" rel="noopener noreferrer" href="https://zeljkoobrenovic.github.io/opencre-explorer/">
             Zeljko Obrenovic
           </a>
           .
@@ -151,6 +173,14 @@ export const Explorer = () => {
             <input id="filter" type="text" placeholder="Search Explorer..." onKeyUp={update} />
             <div id="search-summary"></div>
           </div>
+          <div className="tree-actions">
+            <button type="button" onClick={expandAll}>
+              Expand all
+            </button>
+            <button type="button" onClick={collapseAll}>
+              Collapse all
+            </button>
+          </div>
           <div id="graphs-menu">
             <h4 className="menu-title">Explore visually:</h4>
             <ul>

application/frontend/src/pages/GapAnalysis/GapAnalysis.scss

@@ -5,6 +5,23 @@ main#gap-analysis {
   span.name {
     padding: 0 10px;
   }
+
+  .specialized-cheatsheets {
+    margin-top: 1.5rem;
+
+    h2 {
+      margin-bottom: 0.4rem;
+    }
+
+    p {
+      margin-bottom: 0.9rem;
+      color: #4a5568;
+    }
+
+    table {
+      border-top: 3px solid #2b6cb0;
+    }
+  }
 }
 
 @media (min-width: 0px) and (max-width: 500px) {