Merge branch 'main' into calm-cleanup

Author: rocketstack-matt

.github/workflows/semgrep-ci.yml

@@ -21,7 +21,7 @@ jobs:
         env:
             SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }}
         container:
-            image: semgrep/semgrep@sha256:4372a1de903521f9f10f877b6caf15d150d17e1ca592582682c8d02b77cbd4f6
+            image: semgrep/semgrep@sha256:e2a7ca874b5ef7dd47b3f613a429bc75050e6a1abfb2b42496d7ce2414d286cb
         if: (github.actor != 'dependabot[bot]')
         steps:
             - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

calm-plugins/vscode/media/preview.css

@@ -85,7 +85,7 @@ body {
 #docify-content, #validation-content {
     overflow: auto;
     flex: 1 1 auto;
-    padding: 6px;
+    padding: 6px;  /* Remove padding to allow diagram containers full width */
     background: transparent;
 }
 
@@ -277,4 +277,95 @@ body {
     overflow: hidden;
 }
 
+/* Diagram zoom and pan controls */
+.diagram-controls {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 1000;
+    display: flex;
+    gap: 4px;
+    background: var(--vscode-editor-background, #fff);
+    border: 1px solid var(--vscode-editorWidget-border, #ddd);
+    border-radius: 6px;
+    padding: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.diagram-control-btn {
+    appearance: none;
+    background-color: var(--vscode-button-background);
+    color: var(--vscode-button-foreground);
+    border: 1px solid var(--vscode-button-border, transparent);
+    border-radius: 4px;
+    padding: 6px 10px;
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+    min-width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.diagram-control-btn:hover {
+    background-color: var(--vscode-button-hoverBackground);
+}
+
+.diagram-control-btn:focus-visible {
+    outline: 1px solid var(--vscode-focusBorder);
+    outline-offset: 2px;
+}
+
+.diagram-control-btn:active {
+    transform: translateY(1px);
+}
+
+.diagram-control-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Mermaid diagram container styling */
+.mermaid-diagram-container {
+    position: relative;
+    width: 100%;
+    height: 600px;
+    margin: 16px 0;
+    border: 1px solid var(--vscode-editorWidget-border, #ddd);
+    border-radius: 6px;
+    background: var(--vscode-editor-background, #fff);
+    overflow: hidden;
+}
+
+.mermaid-diagram-container svg {
+    display: block;
+}
+
+/* Clickable nodes and edges in Mermaid diagrams */
+.clickable-node,
+.clickable-edge {
+    cursor: pointer !important;
+    transition: opacity 0.2s ease;
+}
+
+.clickable-node:hover {
+    opacity: 0.7;
+}
+
+.clickable-edge:hover {
+    opacity: 0.8;
+}
+
+/* Back button styles */
+#back-button:hover {
+    background: var(--vscode-button-secondaryHoverBackground);
+    opacity: 0.9;
+}
+
+#back-button:active {
+    transform: translateY(1px);
+}
+
 /* End of styles */

calm-plugins/vscode/media/preview.html

@@ -37,6 +37,9 @@
       <button class="tab-button" role="tab" data-target="model-panel">Model</button>
     </div>
     <div style="display:flex;align-items:center;gap:12px;">
+      <button id="back-button" style="padding:4px 12px;border:1px solid var(--vscode-button-border);background:var(--vscode-button-secondaryBackground);color:var(--vscode-button-secondaryForeground);border-radius:2px;font-size:12px;cursor:pointer;" title="Clear selection and show full architecture">
+        🏠 Home
+      </button>
       <div id="show-labels-control" style="display:none;align-items:center;gap:6px;font-size:12px;">
         <input type="checkbox" id="show-labels-checkbox" checked>
         <label for="show-labels-checkbox" style="color:var(--vscode-editor-foreground);user-select:none;cursor:pointer;">Show Labels</label>

calm-plugins/vscode/package.json

@@ -2,7 +2,7 @@
     "name": "calm-vscode-plugin",
     "displayName": "CALM Preview & Tools",
     "description": "Live-visualize CALM architecture models, validate, and generate docs.",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "publisher": "FINOS",
     "homepage": "https://calm.finos.org",
     "repository": {
@@ -141,9 +141,10 @@
         "vscode:prepublish": "npm run build"
     },
     "devDependencies": {
+        "@types/lodash": "^4.17.16",
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^22.0.0",
-        "@types/lodash": "^4.17.16",
+        "@types/svg-pan-zoom": "^3.3.0",
         "@types/vscode": "^1.88.0",
         "@typescript-eslint/eslint-plugin": "^8.29.1",
         "@typescript-eslint/parser": "^8.29.1",
@@ -162,6 +163,7 @@
         "lodash": "^4.17.21",
         "markdown-it": "^13.0.1",
         "mermaid": "^10.4.0",
+        "svg-pan-zoom": "^3.6.2",
         "yaml": "^2.5.1",
         "zustand": "^5.0.8"
     }

calm-plugins/vscode/src/features/preview/commands.ts

@@ -6,6 +6,7 @@ export type InMsg =
   | { type: 'runDocify'; templatePath?: string }
   | { type: 'requestModelData' }
   | { type: 'requestTemplateData' }
+  | { type: 'refreshAll' }
   | { type: 'toggleLabels'; showLabels: boolean }
   | { type: 'log'; message: string }
   | { type: 'error'; message: string; stack?: string }
@@ -22,6 +23,7 @@ export interface PreviewCommandTarget {
   handleRunDocify(): void
   handleRequestModelData(): void
   handleRequestTemplateData(): void
+  handleRefreshAll(): void
   handleToggleLabels(showLabels: boolean): void
   handleLog(message: string): void
   handleError(message: string, stack?: string): void
@@ -70,6 +72,11 @@ export class RequestTemplateDataCmd implements WebviewCommand<{ type: 'requestTe
   constructor(private p: PreviewCommandTarget) { }
   execute() { this.p.handleRequestTemplateData() }
 }
+export class RefreshAllCmd implements WebviewCommand<{ type: 'refreshAll' }> {
+  readonly type = 'refreshAll' as const
+  constructor(private p: PreviewCommandTarget) { }
+  execute() { this.p.handleRefreshAll() }
+}
 export class ToggleLabelsCmd implements WebviewCommand<{ type: 'toggleLabels'; showLabels: boolean }> {
   readonly type = 'toggleLabels' as const
   constructor(private p: PreviewCommandTarget) { }