Spanner graph UX flow V2

.gitignore

@@ -3,6 +3,7 @@ keys/
 
 # local virtual env
 .venv/
+viz/
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

README.md

@@ -163,3 +163,52 @@ npm install
 npm run test:unit
 npm run test:visual
 ```
+
+
+
+
+# Project setup
+
+```Clone the Project Repository``
+Run the following command to clone the repository:
+
+# git clone <repository-url>
+
+```Then navigate into the project directory```
+
+# cd spanner-graph-notebook
+
+```Create and Activate a Virtual Environment```
+
+# python -m venv venv
+
+```Activate the virtual environment```
+
+# source venv/bin/activate
+
+
+```Install Backend Python Packages```
+From the root project directory (spanner-graph-notebook), install the required Python packages:
+
+# pip install -e .
+
+```Install Frontend Dependencies```
+
+```avigate to the frontend directory```
+
+cd frontend
+
+```Install the Node.js dependencies```
+
+npm install
+
+```Start the Backend Server```
+Go to the backend development utility directory:
+
+cd ../spanner_graphs/dev_util
+
+```Start the development server```
+
+# python serve_dev.py
+
+

frontend/src/app.js

@@ -21,6 +21,7 @@ import { Sidebar } from './visualization/spanner-sidebar.js';
 import SpannerMenu from './visualization/spanner-menu.js';
 import SpannerTable from './visualization/spanner-table.js';
 import GraphVisualization from './visualization/spanner-forcegraph.js';
+import Helpers from './helper.js'
 
 class SpannerApp {
     /**
@@ -101,6 +102,9 @@ class SpannerApp {
                 }
 
                 const {error, response} = data;
+                if (error){
+                   Helpers.showToast(error);
+                }
 
                 this.loaderElement.classList.add('hidden');
 

frontend/src/authLoader.js

@@ -0,0 +1,141 @@
+class LoaderManager {
+  constructor() {
+    this.templateCache = null;
+  }
+
+  createLoaderElement(message) {
+    const loaderContainer = document.createElement('div');
+
+    Object.assign(loaderContainer.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      width: '100%',
+      height: '100%',
+      background: 'rgba(255, 255, 255, 0.9)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: '99999',
+      pointerEvents: 'all',
+      borderRadius: '8px'
+    });
+
+    const wrapper = document.createElement('div');
+    Object.assign(wrapper.style, {
+      textAlign: 'center',
+      padding: '20px'
+    });
+
+    const spinner = document.createElement('div');
+    Object.assign(spinner.style, {
+      border: '6px solid #f3f3f3',
+      borderTop: '6px solid #4285F4',
+      borderRadius: '50%',
+      width: '40px',
+      height: '40px',
+      margin: 'auto',
+      animation: 'spin 1s linear infinite'
+    });
+
+    const messageEl = document.createElement('div');
+    Object.assign(messageEl.style, {
+      marginTop: '10px',
+      fontSize: '16px',
+      color: '#333',
+      fontFamily: 'Arial, sans-serif'
+    });
+    messageEl.textContent = message;
+
+    if (!document.getElementById('loader-keyframes')) {
+      const style = document.createElement('style');
+      style.id = 'loader-keyframes';
+      style.textContent = `
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    // Assemble elements
+    wrapper.appendChild(spinner);
+    wrapper.appendChild(messageEl);
+    loaderContainer.appendChild(wrapper);
+
+    return loaderContainer;
+  }
+
+  async showLoader(message = "Loading...", container = null) {    
+    const loaderId = container ? `auth-loader-${container.dataset.id || 'default'}` : 'auth-loader';
+
+    // Remove existing loader first
+    const existingLoader = document.getElementById(loaderId);
+    if (existingLoader) {
+      existingLoader.remove();
+    }
+
+    const loaderContainer = this.createLoaderElement(message);
+    loaderContainer.id = loaderId;
+
+    if (container) {
+      const originalPosition = window.getComputedStyle(container).position;
+
+      if (originalPosition === 'static' || originalPosition === '') {
+        container.style.position = 'relative';
+        loaderContainer.dataset.originalPosition = '';
+      } else {
+        loaderContainer.dataset.originalPosition = container.style.position;
+      }
+
+      if (container.offsetHeight === 0) {
+        container.style.minHeight = '200px';
+      }
+
+      container.appendChild(loaderContainer);
+    } else {
+      Object.assign(loaderContainer.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '100vw',
+        height: '100vh'
+      });
+      document.body.appendChild(loaderContainer);
+    }
+    loaderContainer.offsetHeight;
+
+    setTimeout(() => {
+      const computedStyle = window.getComputedStyle(loaderContainer);
+    }, 100);
+
+    return loaderContainer;
+  }
+
+  removeLoader(container = null) {    
+    const loaderId = container ? `auth-loader-${container.dataset.id || 'default'}` : 'auth-loader';
+    const loader = document.getElementById(loaderId);
+
+    if (loader) {      
+      if (container) {
+        const originalPosition = loader.dataset.originalPosition;
+        if (originalPosition !== undefined) {
+          if (originalPosition === '') {
+            container.style.position = 'static';
+          } else {
+            container.style.position = originalPosition;
+          }
+        }
+      }
+
+      loader.remove();
+    }
+  }
+}
+
+const loader = new LoaderManager();
+window.showLoader = loader.showLoader.bind(loader);
+window.removeLoader = loader.removeLoader.bind(loader);

frontend/src/graph-server.js

@@ -30,6 +30,12 @@ class GraphServer {
         getPing: '/get_ping',
         postQuery: '/post_query',
         postNodeExpansion: '/post_node_expansion',
+        gcpProjects:'/gcp_projects',
+        getInstances: '/get_instances',
+        getDatabases: '/get_databases',
+        saveConfig: '/save_config',
+        getSavedConfig: '/get_saved_config'
+
     };
 
     /**

frontend/src/helper.js

@@ -0,0 +1,15 @@
+class Helpers {
+    showToast(message, duration = 3000) {
+        const toast = document.getElementById("toast");
+        toast.textContent = message;
+        toast.classList.remove("hidden");
+        toast.classList.add("show");
+
+        setTimeout(() => {
+            toast.classList.remove("show");
+            toast.classList.add("hidden");
+        }, duration);
+    }
+}
+
+export default new Helpers(); 

frontend/src/loader.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2025 Google LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function removeLoader() {
+  const loader = document.getElementById('auth-loader-container');
+  if (loader) loader.remove();
+}