Surface OWASP standards in explorer and analysis UI

Author: Bornunique911

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

@@ -56,15 +56,41 @@ export const Explorer = () => {
     return null;
   };
 
-  const [collapsedItems, setCollapsedItems] = useState<string[]>([]);
-  const isCollapsed = (id: string) => collapsedItems.includes(id);
-  const toggleItem = (id: string) => {
-    if (collapsedItems.includes(id)) {
-      setCollapsedItems(collapsedItems.filter((itemId) => itemId !== id));
+  const [collapsedItems, setCollapsedItems] = useState<string[]>([]);
+  const isCollapsed = (id: string) => collapsedItems.includes(id);
+  const toggleItem = (id: string) => {
+    if (collapsedItems.includes(id)) {
+      setCollapsedItems(collapsedItems.filter((itemId) => itemId !== id));
     } else {
       setCollapsedItems([...collapsedItems, id]);
-    }
-  };
+    }
+  };
+
+  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) {
@@ -144,14 +170,22 @@ export const Explorer = () => {
           .
         </p>
 
-        <div id="explorer-wrapper">
-          <div className="search-field">
-            <input id="filter" type="text" placeholder="Search Explorer..." onKeyUp={update} />
-            <div id="search-summary"></div>
-          </div>
-          <div id="graphs-menu">
-            <h4 className="menu-title">Explore visually:</h4>
-            <ul>
+        <div id="explorer-wrapper">
+          <div className="search-field">
+            <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>
               <li>
                 <a href="/explorer/force_graph">Dependency Graph</a>
               </li>

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) {