spanner-graph-notebook 1.0.0__py3-none-any.whl

templates/spanner-graph/visualization/spanner-forcegraph.js

@@ -0,0 +1,1380 @@
+/**
+ * Copyright 2024 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.
+ */
+
+class GraphVisualization {
+    /**
+     * The graph store that this visualization is based on.
+     * @type {GraphStore}
+     */
+    store;
+
+    /**
+     * The DOM element that the graph will be rendered in.
+     * @type {HTMLElement}
+     */
+    mount;
+
+    /**
+     * The DOM element that the menu will be rendered in.
+     * @type {HTMLElement}
+     */
+    menuMount;
+
+    /**
+     * The ForceGraph object that renders the graph.
+     * @type {ForceGraph}
+     */
+    graph;
+
+    /**
+     * The Node that the user has clicked on. It will be visually highlighted.
+     * @type {?Node}
+     */
+    selectedNode = null;
+
+    /**
+     * The Edge that the user has clicked on. It will be visually highlighted.
+     * @type {?Edge}
+     */
+    selectedEdge = null;
+
+
+    /**
+     * The Nodes that are connected to the selected edge. It will be visually highlighted.
+     * @type {Node[]}
+     */
+    selectedEdgeNeighbors = [];
+
+    /**
+     * The Nodes that are connected to the focused edge. It will be visually highlighted.
+     * @type {Node[]}
+     */
+    focusedEdgeNeighbors = [];
+
+    /**
+     * All the edges connected to the selected node. They will be visually highlighted.
+     * @type {Array<Edge>}
+     */
+    selectedNodeEdges = [];
+
+    /**
+     * Neighboring Nodes to the selected Node. They will be visually highlighted, but not as prominently as the selected node.
+     * @type {Array<Node>}
+     */
+    selectedNodeNeighbors = [];
+
+    /**
+     * The Node that the user is hovering their mouse over. It will be visually highlighted.
+     * @type {?Node}
+     */
+    focusedNode = null;
+
+    /**
+     * All the edges connected to the focused node. They will be visually highlighted.
+     * @type {Array<Edge>}
+     */
+    focusedNodeEdges = [];
+
+    /**
+     * Neighboring Nodes to the focused Node. They will be visually highlighted, but not as prominently as the focused node.
+     * @type {Array<Node>}
+     */
+    focusedNodeNeighbors = [];
+
+    // The graph will only automatically center upon
+    // the initial layout has finished.
+    requestedRecenter = false;
+
+    /**
+     * @typedef {Object} ToolsConfig
+     * @property {number} zoomInSpeed - Speed of zooming in.
+     * @property {number} zoomInIncrement - Increment value for zooming in.
+     * @property {number} zoomOutIncrement - Increment value for zooming out.
+     * @property {number} zoomOutSpeed - Speed of zooming out.
+     * @property {number} recenterSpeed - Speed of recenter.
+     */
+    /**
+     * @typedef {Object} ToolsElements
+     * @property {HTMLElement|null} container - The container element.
+     * @property {HTMLElement|null} recenter - The recenter button element.
+     * @property {HTMLElement|null} zoomIn - The zoom in button element.
+     * @property {HTMLElement|null} zoomOut - The zoom out button element.
+     * @property {HTMLElement|null} viewMode - The toggle element to switch view modes
+     */
+    /**
+     * @typedef {Object} Tools
+     * @property {ToolsElements} elements - The HTML elements used by the tools.
+     * @property {ToolsConfig} config - Configuration for the tools.
+     */
+    /** @type {Tools} */
+    tools = {
+        elements: {
+            container: null,
+            recenter: null,
+            zoomIn: null,
+            zoomOut: null,
+            viewMode: null,
+            toggleFullscreen: null
+        },
+        config: {
+            zoomInSpeed: 100,
+            zoomInIncrement: 2,
+            zoomOutIncrement: 0.5,
+            zoomOutSpeed: 100,
+            recenterSpeed: 200
+        }
+    };
+
+    static ClusterMethod = Object.freeze({
+        NEIGHBORHOOD: Symbol('Force directed in community'),
+        LABEL: Symbol('Force directed')
+    });
+
+    /**
+     * @typedef {Object} MenuConfig
+     * @property {ClusterMethod} clusterBy - Speed of zooming in.
+     */
+    /**
+     * @typedef {Object} MenuElements
+     * @property {HTMLElement|null} cluster - The element that toggles cluster method
+     */
+
+    /**
+     *
+     * @type {
+     *  {
+     *  layout: {lastLayout: null,
+     *  currentLayout: null},
+     *  elements: {cluster: HTMLElement,
+     *  layoutDropdownToggle: HTMLElement,
+     *  layoutDropdownContent: HTMLElement},
+     *  config: {clusterBy: symbol}
+     *  }}
+     */
+    menu = {
+        elements: {
+            cluster: null,
+            layoutDropdownToggle: null,
+            layoutDropdownContent: null,
+        },
+        config: {
+            clusterBy: GraphVisualization.ClusterMethod.NEIGHBORHOOD
+        },
+        layout: {
+            lastLayout: null,
+            currentLayout: null
+        }
+    };
+
+    // key is the amount of nodes in the ground
+    static GraphSizes = Object.freeze({
+        SMALL: Symbol('Small'),
+        MEDIUM: Symbol('Medium'),
+        LARGE: Symbol('Large'),
+        UNDEFINED: Symbol('Large'),
+    });
+
+    getNodeRelativeSize() {
+        return this.NODE_REL_SIZE;
+    }
+
+    NODE_REL_SIZE = 4;
+
+    enterFullscreenSvg = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#3C4043"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>`;
+    exitFullscreenSvg = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#3C4043"><path d="M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z"/></svg>`;
+
+    /**
+     * Renders a graph visualization.
+     * @param {GraphStore} inStore - The store to derive configuration from.
+     * @param {HTMLElement} inMount - The DOM element that the graph will be rendered in.
+     * @param {HTMLElement} inMenuMount - The DOM element that the top menu will be rendered in.
+     */
+    constructor(inStore, inMount, inMenuMount) {
+        if (!(inStore instanceof GraphStore)) {
+            throw Error('Store must be an instance of GraphStore');
+        }
+
+        if (!(inMount instanceof HTMLElement)) {
+            throw Error('Mount must be an instance of HTMLElement');
+        }
+
+        if (!(inMenuMount instanceof HTMLElement)) {
+            throw Error('Menu Mount must be an instance of HTMLElement');
+        }
+
+        this.store = inStore;
+        this.mount = inMount;
+        this.menuMount = inMenuMount;
+
+        // tooltips are absolutely positioned
+        // relative to the mounting element
+        this.mount.style.display = 'relative';
+
+        this.initializeEvents(this.store);
+        this.graph = ForceGraph()(this.mount);
+        this._setupGraphTools(this.graph);
+        this._setupMenu(this.graph);
+        this._setupDrawLabelsOnEdges(this.graph);
+        this._setupLineLength(this.graph);
+        this._setupDrawNodes(this.graph);
+        this._setupDrawEdges(this.graph);
+
+        this.graph.dagMode('');
+
+        this.render();
+    }
+
+    sanitize(input) {
+        if (input === null || input === undefined) return '';
+        const str = String(input)
+        return str.replace(/[&<>"'`=\/]/g, function (s) {
+            return {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;',
+                '`': '&#96;',
+                '=': '&#61;',
+                '/': '&#47;'
+            }[s];
+        });
+    }
+
+    /**
+     * Registers callbacks for GraphStore events.
+     * @param {GraphStore} store
+     */
+    initializeEvents(store) {
+        if (!(store instanceof GraphStore)) {
+            throw Error('Store must be an instance of GraphStore');
+        }
+
+        store.addEventListener(GraphStore.EventTypes.VIEW_MODE_CHANGE,
+            (viewMode, config) => this.onViewModeChange(viewMode, config));
+
+        store.addEventListener(GraphStore.EventTypes.CONFIG_CHANGE,
+            (config) => this.onStoreConfigChange(config));
+
+        store.addEventListener(GraphStore.EventTypes.FOCUS_OBJECT,
+            (graphObject, config) => {
+                this.focusedNode = null;
+                this.focusedNodeEdges = [];
+                this.focusedNodeNeighbors = []
+                this.focusedEdge = null;
+                this.focusedEdgeNeighbors = [];
+
+                if (graphObject instanceof Node) {
+                    this.onFocusedNodeChanged(graphObject)
+                }
+
+                if (graphObject instanceof Edge) {
+                    this.onFocusedEdgeChanged(graphObject)
+                }
+            });
+
+        store.addEventListener(GraphStore.EventTypes.SELECT_OBJECT,
+            (graphObject, config) => {
+                this.selectedNode = null;
+                this.selectedEdge = null;
+                this.selectedNodeEdges = [];
+                this.selectedNodeNeighbors = [];
+                this.selectedEdgeNeighbors = [];
+
+                if (graphObject instanceof Node && graphObject) {
+                    this.onSelectedNodeChanged(graphObject);
+                }
+
+                if (graphObject instanceof Edge && graphObject) {
+                    this.onSelectedEdgeChanged(graphObject);
+                }
+            });
+
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.store.setSelectedObject(null); // Deselect any selected node/edge
+            }
+        });
+    }
+
+    /**
+     * @type ViewModeChangedCallback
+     */
+    onViewModeChange(viewMode, config) {
+        this.requestedRecenter = true;
+        this.graph.graphData({
+            nodes: this.store.getNodes(),
+            links: this._computeCurvature(this.store.getEdges())
+        });
+
+        this.menu.elements.layoutDropdownContent.classList.remove('disabled');
+        this.menu.elements.layoutDropdownToggle.classList.remove('disabled');
+        if (viewMode === GraphStore.ViewModes.SCHEMA) {
+            this.graph.dagMode('');
+            this.menu.elements.layoutDropdownContent.classList.add('disabled');
+            this.menu.elements.layoutDropdownToggle.classList.add('disabled');
+        } else {
+            this.graph.dagMode(this.menu.config.currentLayout);
+        }
+    }
+
+    _setupGraphTools(graphObject) {
+        const html = `
+            <button id="graph-zoom-in" title="Zoom In" fill="#3C4043">
+                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#3C4043">
+                    <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/>
+                </svg>
+            </button>
+            <button id="graph-zoom-out" title="Zoom Out" fill="#3C4043">
+                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#3C4043">
+                    <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"/>
+                </svg>
+            </button>
+            <button id="graph-recenter" title="Recenter Graph" class="recenter-button" fill="#3C4043">
+                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#3C4043">
+                    <path d="M480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm0-80ZM200-120q-33 0-56.5-23.5T120-200v-160h80v160h160v80H200Zm400 0v-80h160v-160h80v160q0 33-23.5 56.5T760-120H600ZM120-600v-160q0-33 23.5-56.5T200-840h160v80H200v160h-80Zm640 0v-160H600v-80h160q33 0 56.5 23.5T840-760v160h-80Z"/>
+                </svg>
+            </button>
+            <button id="graph-fullscreen" title="Toggle Fullscreen">
+                ${this.enterFullscreenSvg}
+            </button>`;
+
+        this.tools.elements.container = document.createElement('div');
+        this.tools.elements.container.id = 'graph-tools';
+        this.tools.elements.container.innerHTML = html;
+        this.mount.append(this.tools.elements.container);
+
+        this.tools.elements.recenter = this.tools.elements.container.querySelector('#graph-recenter');
+        this.tools.elements.recenter.addEventListener('click', () => {
+            graphObject.zoomToFit(this.tools.config.recenterSpeed);
+        });
+
+        this.tools.elements.zoomIn = this.tools.elements.container.querySelector('#graph-zoom-in');
+        this.tools.elements.zoomIn.addEventListener('click', () => {
+            graphObject.zoom(graphObject.zoom() * this.tools.config.zoomInIncrement, this.tools.config.zoomInSpeed);
+        });
+
+        this.tools.elements.zoomOut = this.tools.elements.container.querySelector('#graph-zoom-out');
+        this.tools.elements.zoomOut.addEventListener('click', () => {
+            graphObject.zoom(graphObject.zoom() * this.tools.config.zoomOutIncrement, this.tools.config.zoomOutSpeed);
+        });
+
+        this.tools.elements.toggleFullscreen = this.tools.elements.container.querySelector('#graph-fullscreen');
+        window.addEventListener('fullscreenchange', () => {
+                if (!document.fullscreenElement) {
+                    this.mount.style.width = window.innerWidth + 'px';
+                    this.mount.style.height = document.querySelector('body').innerHeight + 'px';
+                    this.graph.width(this.mount.offsetWidth);
+                    this.graph.height(this.mount.offsetHeight);
+                } else {
+                    this.mount.style.width = window.innerWidth + 'px';
+                    this.mount.style.height = document.querySelector('body').innerHeight + 'px';
+                    this.graph.width(this.mount.offsetWidth);
+                    this.graph.height(this.mount.offsetHeight);
+                }
+        });
+
+        this.tools.elements.toggleFullscreen.addEventListener('click', () => {
+            if (!document.fullscreenElement) {
+                this.tools.elements.toggleFullscreen.innerHTML = this.exitFullscreenSvg;
+                if (document.documentElement.requestFullscreen) {
+                    document.documentElement.requestFullscreen();
+                } else if (document.documentElement.mozRequestFullScreen) { // Firefox
+                    document.documentElement.mozRequestFullScreen();
+                } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
+                    document.documentElement.webkitRequestFullscreen();
+                } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
+                    document.documentElement.msRequestFullscreen();
+                }
+            } else {
+                this.tools.elements.toggleFullscreen.innerHTML = this.enterFullscreenSvg;
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            }
+        });
+    }
+
+    _setupMenu() {
+        this.menuMount.innerHTML = `
+            <style>
+                .menu-bar {
+                    align-items: center;
+                    border-bottom: 1px solid #DADCE0;
+                    box-sizing: border-box;
+                    color: #3C4043;
+                    display: flex;
+                    padding: 16px 24px 16px 16px;
+                    width: 100%;
+                    background: #fff;
+                }
+                .menu-item {
+                    display: flex;
+                    margin-right: 16px;
+                }
+                .toggle-container {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    margin-left: 10px;
+                }
+                .toggle-switch {
+                    position: relative;
+                    display: inline-block;
+                    width: 46px;
+                    height: 24px;
+                    flex-shrink: 0;
+                }
+                .toggle-switch input {
+                    opacity: 0;
+                    width: 0;
+                    height: 0;
+                    margin: 0;
+                    padding: 0;
+                }
+                .toggle-slider {
+                    position: absolute;
+                    cursor: pointer;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-color: #e9ecef;
+                    transition: .4s;
+                    border-radius: 24px;
+                }
+                .toggle-slider:before {
+                    position: absolute;
+                    content: "";
+                    height: 18px;
+                    width: 18px;
+                    left: 3px;
+                    bottom: 3px;
+                    background-color: white;
+                    transition: .3s;
+                    border-radius: 50%;
+                }
+                input:checked + .toggle-slider {
+                    background-color: #228be6;
+                }
+                input:checked + .toggle-slider:before {
+                    transform: translateX(22px);
+                }
+                .toggle-label {
+                    margin-left: 8px;
+                    color: #202124;
+                    line-height: 24px;
+                }
+                .graph-element-tooltip {
+                    font: 12px 'Google Sans', 'Roboto', sans-serif;
+                    position: absolute;
+                    padding: 4px 8px;
+                    box-sizing: border-box;
+                    pointer-events: none;
+                    transition: opacity 0.2s ease-in-out;
+                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+                    border-radius: 4px;
+                }
+                
+                /* Ensure .graph-tooltip built-in from force-graph does not interfere */
+                .graph-tooltip {
+                    background: none !important;
+                    border: none !important;
+                    padding: 0 !important;
+                }
+
+                .dropdown {
+                    margin-right: 16px;
+                    position: relative;
+                }
+
+                .dropdown-toggle {
+                    appearance: none;
+                    background: url("data:image/svg+xml;utf8,<svg fill='rgba(73, 80, 87, 1)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat;
+                    background-position: right 10px center;
+                    background-color: white;
+                    padding: 12px 40px 12px 16px;
+                    border: 1px solid #80868B;
+                    border-radius: 4px;
+                    color: #3C4043;
+                    cursor: pointer;
+                    font-size: 16px;
+                    text-align: left;
+                    width: 260px;
+                }
+                
+                .dropdown-toggle.disabled {
+                    background: url("data:image/svg+xml;utf8,<svg fill='rgba(73, 80, 87, .6)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat;
+                    background-position: right 10px center;
+                    background-color: #EBEBE4;
+                    border: 1px solid #EBEBE4;
+                    cursor: default;
+                }
+
+                .arrow-down {
+                    margin-left: 5px;
+                    font-size: 10px;
+                }
+
+                .dropdown-content {
+                    display: none;
+                    position: absolute;
+                    background-color: #fff;
+                    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+                    z-index: 1;
+                    top: 100%;
+                    left: 0;
+                    padding: 8px 0;
+                }
+
+                .dropdown:hover .dropdown-content:not(.disabled) {
+                    display: block;
+                }
+
+                .dropdown-item {
+                    color: #495057;
+                    padding: 8px 32px 8px 8px;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                }
+
+                .dropdown .dropdown-item.selected {
+                    background: url("data:image/svg+xml;utf8,<svg height='24' viewBox='0 0 24 24' width='24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M2 6L5 9L10 3' stroke='rgba(73, 80, 87, 1)' stroke-width='2' stroke-linecap='square'/></svg>") no-repeat;
+                    background-position: left 15px top 8px;
+                }
+
+                .dropdown-item:hover {
+                    background-color: #f8f9fa;
+                }
+
+                .checkmark {
+                    width: 20px;
+                    margin-right: 8px;
+                }
+
+                .element-count {
+                    color: #000;
+                    display: flex;
+                    flex: 1;
+                    font-weight: 500;
+                }
+
+                .item-text {
+                    flex: 1;
+                }
+            </style>
+            <div class="menu-bar">
+                <div class="dropdown">
+                    <button class="dropdown-toggle">
+                        Force layout
+                    </button>
+                    <div class="dropdown-content">
+                        <a href="#" class="dropdown-item selected" data-layout="">
+                            <span class="checkmark"></span>
+                            <span class="item-text">Force layout</span>
+                        </a>
+                        <a href="#" class="dropdown-item" data-layout="td">
+                            <span class="checkmark"></span>
+                            <span class="item-text">Hierarchical: Top down</span>
+                        </a>
+                        <a href="#" class="dropdown-item" data-layout="lr">
+                            <span class="checkmark"></span>
+                            <span class="item-text">Hierarchical: Left-to-right</span>
+                        </a>
+                        <a href="#" class="dropdown-item" data-layout="radialin">
+                            <span class="checkmark"></span>
+                            <span class="item-text">Radial: Inward</span>
+                        </a>
+                        <a href="#" class="dropdown-item" data-layout="radialout">
+                            <span class="checkmark"></span>
+                            <span class="item-text">Radial: Outward</span>
+                        </a>
+                    </div>
+                </div>
+                
+                <div class="element-count">
+                    ${this.store.config.nodes.length} nodes, ${this.store.config.edges.length} edges
+                </div>
+                <div class="toggle-container">
+                    <label class="toggle-switch">
+                        <input id="view-schema" type="checkbox">
+                        <span class="toggle-slider"></span>
+                    </label>
+                    <span class="toggle-label">View Schema</span>
+                </div>
+                <div class="toggle-container">
+                    <label class="toggle-switch">
+                        <input id="show-labels" type="checkbox">
+                        <span class="toggle-slider"></span>
+                    </label>
+                    <span class="toggle-label">Show labels</span>
+                </div>
+            </div>`
+
+        this.menu.elements.layoutButtons = this.menuMount.querySelectorAll('.dropdown-item');
+        this.menu.elements.layoutDropdownToggle = this.menuMount.querySelector('.dropdown-toggle');
+        this.menu.elements.layoutDropdownContent = this.menuMount.querySelector('.dropdown-content');
+        this.menu.elements.layoutDropdownContent.addEventListener('click', e => {
+            const title = this.menuMount.querySelector('.dropdown-toggle');
+            const layoutButton = e.target.closest('.dropdown-item');
+            if (!layoutButton) return;
+        
+            this.menu.elements.layoutButtons.forEach(button => {
+                button.className = button === layoutButton ? 'dropdown-item selected' : 'dropdown-item';
+            });
+            
+            if (title) {
+                title.textContent = layoutButton.textContent;
+            }
+            
+           try {
+                const newLayout = layoutButton.getAttribute('data-layout');
+                this.menu.config.lastLayout = this.graph.dagMode;
+                this.menu.config.currentLayout = newLayout;
+
+                let dagDistance;
+                let collisionRadius = 1; // Default collision radius
+
+                switch (newLayout) {
+                    case 'td': // Hierarchical: Top down
+                        dagDistance = Math.log10(this.store.config.nodes.length) * 50;
+                        collisionRadius = 12;
+                        this.menu.config.clusterBy = GraphVisualization.ClusterMethod.LABEL;
+                        break;
+                    case 'lr': // Hierarchical: Left-to-right
+                        dagDistance = Math.log10(this.store.config.nodes.length) * 100;
+                        collisionRadius = 12;
+                        break;
+                    case 'radialin': // Radial: Inward
+                        dagDistance = Math.log10(this.store.config.nodes.length) * 100;
+                        collisionRadius = 8;
+                        break;
+                    case 'radialout': // Radial: Outward
+                        dagDistance = Math.log10(this.store.config.nodes.length) * 100;
+                        collisionRadius = 8;
+                        break;
+                    default: // Force layout (default)
+                        dagDistance = 0; // Not applicable for force layout
+                        break;
+                }
+
+                this.graph.dagMode(newLayout);
+
+                // Set dagLevelDistance after setting dagMode
+                if (newLayout !== '') {
+                    this.graph.dagLevelDistance(dagDistance);
+                }
+
+                // Update d3Force collision
+                this.requestedRecenter = true;
+                this.graph.d3Force('collide', d3.forceCollide(collisionRadius));``
+            } catch (error) {
+                console.error('Error updating graph layout:', error);
+            }
+        });
+
+        this.menu.elements.viewSchema = this.menuMount.querySelector('#view-schema');
+        this.menu.elements.viewSchema.addEventListener('change', () => {
+            const viewMode = this.menu.elements.viewSchema.checked ?
+                GraphStore.ViewModes.SCHEMA : GraphStore.ViewModes.DEFAULT;
+            this.store.setViewMode(viewMode);
+        });
+
+        this.menu.elements.showLabels = this.menuMount.querySelector('#show-labels');
+        this.menu.elements.showLabels.addEventListener('change', () => {
+            this.menu.config.showLabels = this.menu.elements.showLabels.checked;
+        });
+    }
+
+    /**
+     * Callback for GraphStore.EventTypes.CONFIG_CHANGE events.
+     * @param {GraphConfig} config - The new configuration.
+    */
+    onStoreConfigChange(config) {
+        this.render();
+    }
+
+    onSelectedEdgeChanged(edge) {
+        this.selectedEdge = edge;
+        this.selectedEdgeNeighbors = [];
+
+        if (!this.selectedEdge) {
+            this.selectedEdge = null;
+            return;
+        }
+
+        this.selectedEdgeNeighbors = [
+            edge.source, edge.target
+        ];
+    }
+
+    onSelectedNodeChanged(node) {
+        this.selectedNode = node;
+
+        // We could center the graph on the node
+
+        // This is duplicated between onSelectedNodeChange and onFocusedNodeChange.
+        // This could be extracted to a separate function.
+        const { nodes, links } = this.graph.graphData();
+
+        this.selectedNodeEdges = links.filter(
+            link => link.source.id === node.id || link.target.id === node.id);
+
+        this.selectedNodeNeighbors = nodes.filter(n => {
+            const selectedEdges = this.selectedNodeEdges.filter(link => link.source.id === n.id || link.target.id === n.id);
+            const containsEdges = selectedEdges.length > 0;
+            if (containsEdges) {
+                this.selectedNodeEdges.push(...selectedEdges);
+            }
+
+            return containsEdges;
+        });
+
+        this.graph.centerAt(node.x, node.y, 1000);
+        this.graph.zoom(4, 1000);
+
+    }
+
+    onFocusedEdgeChanged(edge) {
+        this.focusedEdge = edge;
+        this.focusedEdgeNeighbors = [];
+
+        if (!edge) {
+            // There are multiple conditions that will trigger a false here,
+            // and we want to enforce null type.
+            this.focusedEdge = null;
+            return;
+        }
+
+        this.focusedEdgeNeighbors = [
+            edge.source,
+            edge.target
+        ];
+    }
+
+    /**
+     * Highlights the focused node as well as its edges and neighbors
+     * @param {Node|null} node - The node to highlight. If null, the highlight is removed.
+     */
+    onFocusedNodeChanged(node) {
+        this.focusedNode = node;
+        this.focusedNodeEdges = [];
+        this.focusedNodeNeighbors = [];
+
+        if (!this.focusedNode) {
+            return;
+        }
+
+        const { nodes, links } = this.graph.graphData();
+        const focusedNodeEdges = links.filter(link => link.source.id === node.id || link.target.id === node.id);
+        this.focusedNodeEdges.push(...focusedNodeEdges);
+        this.focusedNodeNeighbors = nodes.filter(n => {
+            if (n.id === node.id) {
+                return false;
+            }
+
+            const focusedEdges = this.focusedNodeEdges.filter(link => link.source.id === n.id || link.target.id === n.id);
+            return focusedEdges.length > 0;
+        });
+    }
+
+    _setupLineLength(graph) {
+        this.graph.calculateLineLengthByCluster = () => {
+            this.graph
+                .d3Force('link').distance(link => {
+                    let distance = Math.log10(this.store.config.nodes.length) * 40;
+
+                    // Only apply neighborhood clustering logic if using force layout
+                    if (this.store.config.nodes.length !== 0 && (this.store.viewMode === GraphStore.ViewModes.SCHEMA || this.graph.dagMode() !== '')) {
+                        distance = Math.log10(this.store.config.nodes.length) * 50;
+                    } else if (this.graph.dagMode() === '') {
+                        distance = link.source.neighborhood === link.target.neighborhood ? distance * 0.5 : distance * 0.8;
+                    }
+                    return distance;
+                });
+             return graph;
+        }
+    }
+
+    _computeCurvature(links) {
+        let selfLoopLinks = {};
+        let sameNodesLinks = {};
+        const curvatureMinMax = 0.35;
+
+        // 1. assign each link a nodePairId that combines their source and target independent of the links direction
+        // 2. group links together that share the same two nodes or are self-loops
+        for (let i = 0; i < links.length; i++) {
+            const link = links[i];
+            const sourceId = link.from;
+            const targetId = link.to;
+            link.curvature = 0;
+            link.nodePairId = sourceId <= targetId ? (sourceId + "_" + targetId) : (targetId + "_" + sourceId);
+            let map = sourceId === targetId ? selfLoopLinks : sameNodesLinks;
+            if (!map[link.nodePairId]) {
+                map[link.nodePairId] = [];
+            }
+            map[link.nodePairId].push(link);
+        }
+
+        // Compute the curvature for self-loop links to avoid overlaps
+        Object.keys(selfLoopLinks).forEach(id => {
+            let links = selfLoopLinks[id];
+            let lastIndex = links.length - 1;
+            links[lastIndex].curvature = 1;
+            let delta = (1 - curvatureMinMax) / lastIndex;
+            for (let i = 0; i < lastIndex; i++) {
+                links[i].curvature = curvatureMinMax + i * delta;
+            }
+        });
+
+        // Compute the curvature for links sharing the same two nodes to avoid overlaps
+        Object.keys(sameNodesLinks).filter(nodePairId => sameNodesLinks[nodePairId].length > 1).forEach(nodePairId => {
+            let links = sameNodesLinks[nodePairId];
+            let lastIndex = links.length - 1;
+            let lastLink = links[lastIndex];
+            lastLink.curvature = curvatureMinMax;
+            let delta = 2 * curvatureMinMax / lastIndex;
+            for (let i = 0; i < lastIndex; i++) {
+                const link = links[i];
+                links[i].curvature = - curvatureMinMax + i * delta;
+                if (lastLink.from !== links[i].from) {
+                    links[i].curvature *= -1; // flip it around, otherwise they overlap
+                }
+            }
+        });
+
+        return links;
+    }
+
+    _setupDrawEdges(graph) {
+        graph.drawEdges = (node, ctx, globalScale) => {
+            this.graph
+                // this will be extracted to a wrapper function for
+                // -> hiding labels upon zooming out past a threshold
+                // -> hide when large amount of edges shown
+                //    -> show edges for node that the user highlights
+                // -> settings menu
+                // -> or some other heuristic
+                .linkDirectionalArrowLength(4)
+                .calculateLineLengthByCluster()
+                .linkDirectionalArrowRelPos(0.9875)
+                .linkCurvature('curvature')
+                .linkWidth(link => {
+                    let edgeDesign = this.store.getEdgeDesign(link);
+                    return edgeDesign.width;
+                })
+                .linkColor(link => {
+                    let edgeDesign = this.store.getEdgeDesign(link);
+                
+                    // Check if ANY node OR edge is focused or selected
+                    const isAnyElementFocusedOrSelected =
+                        this.store.config.focusedGraphObject instanceof Node ||
+                        this.store.config.selectedGraphObject instanceof Node ||
+                        this.store.config.focusedGraphObject instanceof Edge ||
+                        this.store.config.selectedGraphObject instanceof Edge;
+                
+                    // Lighten the edge color if an element is focused or selected
+                    // and the edge is NOT connected to it
+                    if (isAnyElementFocusedOrSelected && 
+                        !this.store.edgeIsConnectedToFocusedNode(link) &&
+                        !this.store.edgeIsConnectedToSelectedNode(link) &&
+                        link !== this.store.config.focusedGraphObject && // Check for focused edge
+                        link !== this.store.config.selectedGraphObject) { // Check for selected edge
+                
+                        const lightenAmount = 0.48;
+                        const originalColor = edgeDesign.color;
+                        return this.lightenColor(originalColor, lightenAmount);
+                    } else {
+                        return edgeDesign.color; // Return original color
+                    }
+                })
+                .labelsOnEdges(2);
+
+            return graph;
+        }
+    }
+
+    // Helper function to lighten a color
+    lightenColor(color, amount) {
+        const usePound = color[0] === '#';
+        let R = parseInt(color.substring(usePound ? 1 : 0, usePound ? 3 : 2), 16);
+        let G = parseInt(color.substring(usePound ? 3 : 2, usePound ? 5 : 4), 16);
+        let B = parseInt(color.substring(usePound ? 5 : 4, usePound ? 7 : 6), 16);
+
+        R = Math.floor((R * (1 - amount)) + (255 * amount));
+        G = Math.floor((G * (1 - amount)) + (255 * amount));
+        B = Math.floor((B * (1 - amount)) + (255 * amount));
+
+        const RR = ((R.toString(16).length === 1) ? "0" + R.toString(16) : R.toString(16));
+        const GG = ((G.toString(16).length === 1) ? "0" + G.toString(16) : G.toString(16));
+        const BB = ((B.toString(16).length === 1) ? "0" + B.toString(16) : B.toString(16));
+
+        return "#" + RR + GG + BB;
+    }
+
+    _setupDrawNodes(graph) {
+        graph.drawNodes = () => {
+            this.graph
+                .nodeCanvasObject(
+                    /**
+                     * Callback function to draw nodes based off of the current config state.
+                     * @param {Node} node - The node object
+                     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context
+                     * @param {number} globalScale - The global scale of the graph
+                     */
+                    (node, ctx, globalScale) => {
+                        let lightenAmount = 0;
+                        const defaultLightenAmount = 0.64;
+
+                        // If a node is selected or focused...
+                        if (this.store.config.selectedGraphObject instanceof Node ||
+                            this.store.config.focusedGraphObject instanceof Node) {
+
+                            // Lighten all nodes...
+                            lightenAmount = defaultLightenAmount;
+
+                            // ...unless it's the selected or hovered node itself...
+                            if (node === this.store.config.selectedGraphObject ||
+                                node === this.store.config.focusedGraphObject) {
+                                lightenAmount = 0;
+                            }
+                            // ...or if it's connected to the selected or hovered node.
+                            else if (this.selectedNodeNeighbors.includes(node) ||
+                                     this.focusedNodeNeighbors.includes(node)) {
+                                lightenAmount = 0;
+                            }
+                        }
+
+                        // If an edge is selected or focused...
+                        if (this.store.config.selectedGraphObject instanceof Edge ||
+                            this.store.config.focusedGraphObject instanceof Edge) {
+                            lightenAmount = defaultLightenAmount;
+
+                            // If the node is a neighbor of a focused or selected edge
+                            if (this.focusedEdgeNeighbors.includes(node) ||
+                                this.selectedEdgeNeighbors.includes(node)) {
+                                lightenAmount = 0;
+                            }
+                        }
+
+                        const isFocusedOrHovered = node === this.store.config.selectedGraphObject || node === this.store.config.focusedGraphObject;
+                        if (isFocusedOrHovered) {
+                            // draw stroke
+                            let strokeSize = 0;
+                            let strokeSeparationSize = this.getNodeRelativeSize() * 0.125;
+                            if (node === this.store.config.selectedGraphObject) {
+                                strokeSize = this.getNodeRelativeSize() * .75;
+                            } else {
+                                strokeSize = this.getNodeRelativeSize() * 0.5;
+                            }
+
+                            ctx.beginPath();
+                            ctx.strokeStyle = `rgba(26, 115, 232, .24)`;
+                            ctx.lineWidth = strokeSize;
+                            ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+                            ctx.arc(node.x, node.y,
+                                this.getNodeRelativeSize() + strokeSeparationSize + strokeSize / 2,
+                                0, 2 * Math.PI, false);
+                            ctx.stroke();
+                        }
+
+                        // This draws the circle for the node
+                        ctx.beginPath();
+                        ctx.arc(node.x, node.y, this.getNodeRelativeSize(), 0, 2 * Math.PI, false);
+                        ctx.fillStyle = this.store.getColorForNode(node);
+                        ctx.fill();
+
+                        // lighten the node color
+                        if (lightenAmount > 0) {
+                            ctx.beginPath();
+                            ctx.arc(node.x, node.y, this.getNodeRelativeSize(), 0, 2 * Math.PI, false);
+                            ctx.fillStyle = `rgba(255, 255, 255, ${lightenAmount})`;
+                            ctx.fill();
+                        }
+
+                        const showLabel = this.menu.config.showLabels ||
+                            node === this.store.config.selectedGraphObject ||
+                            node === this.store.config.focusedGraphObject ||
+                            this.selectedNodeNeighbors.includes(node) ||
+                            this.focusedNodeNeighbors.includes(node) ||
+                            this.focusedEdgeNeighbors.includes(node) ||
+                            this.selectedEdgeNeighbors.includes(node) ||
+                            isFocusedOrHovered ||
+                            this.store.viewMode === GraphStore.ViewModes.SCHEMA;
+                        if (!showLabel) {
+                            return;
+                        }
+
+                        // Init label
+                        ctx.save();
+                        ctx.translate(node.x, node.y);
+                        const fontSize = 2;
+                        ctx.font = `${fontSize}px Sans-Serif`;
+
+                        // Draw the label's background
+                        const padding = 1;
+                        const textRect = ctx.measureText(node.label);
+                        const rectX = this.getNodeRelativeSize() + padding * 0.5;
+                        const rectWidth = textRect.width + padding;
+                        const rectHeight = fontSize + padding;
+                        const rectY = -rectHeight * 0.5;
+                        const borderRadius = padding * 0.5;
+
+                        ctx.fillStyle = this.store.getColorForNode(node); // Teal color similar to the image
+                        ctx.beginPath();
+                        ctx.roundRect(
+                            rectX,
+                            rectY,
+                            rectWidth,
+                            rectHeight, borderRadius);
+                        ctx.fill();
+
+                        // lighten the background
+                        if (lightenAmount > 0) {
+                            ctx.fillStyle = `rgba(255, 255, 255, ${lightenAmount})`;
+                            ctx.beginPath();
+                            ctx.roundRect(
+                                rectX,
+                                rectY,
+                                rectWidth,
+                                rectHeight, borderRadius);
+                            ctx.fill();
+                        }
+
+                        // Draw the label text
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'middle';
+                        ctx.fillStyle = '#fff';
+                        ctx.fillText(
+                            node.label,
+                            rectX + rectWidth * 0.5,
+                            -Math.abs(textRect.actualBoundingBoxAscent - textRect.actualBoundingBoxDescent) * 0.25);
+
+                        ctx.restore();
+                    });
+
+            return graph;
+        }
+    }
+
+    _generateGraphElementTooltip(element) {
+        let color = "#a9a9a9";
+        if (element instanceof Node) {
+            color = this.store.getColorForNode(element);
+        }
+        let content = `
+            <div class="graph-element-tooltip" style="background-color: ${color}">
+                <div><strong>${this.sanitize(element.label)}</strong></div>`;
+
+        if (element.properties) {
+            if (element.key_property_names.length === 1) {
+                for (const key of element.key_property_names) {
+                    if (element.properties.hasOwnProperty(key)) {
+                        content += `<div>${this.sanitize(element.properties[key])}</div>`
+                    }
+                }
+            } else {
+                for (const key of element.key_property_names) {
+                    if (element.properties.hasOwnProperty(key)) {
+                        content += `<div>${key}: ${this.sanitize(element.properties[key])}</div>`
+                    }
+                }
+            }
+        }
+
+        content += '</div>'
+        return content;
+    }
+
+    _setupDrawLabelsOnEdges(graph) {
+        /**
+         * Draw labels on edges
+         * @param {number} maxGlobalScale - Labels will disappear after the global scale
+         * has exceeded this number (aka the user has zoomed out past a threshold)
+         */
+        graph.labelsOnEdges = (maxGlobalScale) => {
+            graph
+                .linkCanvasObjectMode(() => 'after')
+                .linkLabel(() => {
+                    if (this.store.config.selectedGraphObject) {
+                        return '';
+                    }
+                    return ''
+                })
+                .linkCanvasObject(
+                    /**
+                     * Draw labels on edges
+                     * @param {Edge} link - The link object
+                     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context
+                     * @param {number} globalScale - The global scale of the graph
+                     */
+                    (link, ctx, globalScale) => {
+
+                        const isSelected = this.selectedEdge && link === this.selectedEdge;
+                        const isFocused = this.focusedEdge && link === this.focusedEdge;
+
+                        const showLabel = () => {
+                            // 1. Prioritize focused edge
+                            if (this.focusedEdge && link === this.focusedEdge) {
+                              return true; // Always show label for focused edge
+                            }
+                          
+                            // 2. Show label if a node is connected to a focused or selected node
+                            if (this.selectedNode && this.store.edgeIsConnectedToSelectedNode(link) ||
+                                this.focusedNode && this.store.edgeIsConnectedToFocusedNode(link)) {
+                              return true;
+                            }
+                          
+                            // 3. Show label if the edge is selected
+                            if (this.selectedEdge && link === this.selectedEdge) {
+                              return true; // Always show label for selected edge
+                            }
+                          
+                            // 4. Show labels if within zoom tolerance and no node or edge is focused/selected
+                            const focusedOrSelectedObjectExists = this.focusedEdge || this.selectedEdge || this.focusedNode || this.selectedNode;
+                            const withinZoomTolerance = globalScale > maxGlobalScale;
+                            if (withinZoomTolerance && !focusedOrSelectedObjectExists) {
+                              return true;
+                            }
+
+                            // 5. Always show the label if "Show Labels" is selected
+                            if (this.menu.config.showLabels) {
+                                return true;
+                            }
+
+                            // Otherwise, hide the label
+                            return false;
+                        };
+
+                        if (!showLabel()) {
+                            return;
+                        }
+
+                        const start = link.source;
+                        const end = link.target;
+                        if (typeof start !== 'object' || typeof end !== 'object') return;
+
+                        // Initialize text position
+                        let textPos = {
+                            x: (start.x + end.x) * 0.5,
+                            y: (start.y + end.y) * 0.5
+                        };
+
+                        // Get control points
+                        const controlPoints = link.__controlPoints;
+
+                        const getQuadraticXYFourWays = (
+                            t,
+                            sx,
+                            sy,
+                            cp1x,
+                            cp1y,
+                            cp2x,
+                            cp2y,
+                            ex,
+                            ey,
+                          ) => {
+                            return {
+                              x:
+                                (1 - t) * (1 - t) * (1 - t) * sx +
+                                3 * (1 - t) * (1 - t) * t * cp1x +
+                                3 * (1 - t) * t * t * cp2x +
+                                t * t * t * ex,
+                              y:
+                                (1 - t) * (1 - t) * (1 - t) * sy +
+                                3 * (1 - t) * (1 - t) * t * cp1y +
+                                3 * (1 - t) * t * t * cp2y +
+                                t * t * t * ey,
+                            };
+                          };
+
+                        const selfLoop = link.source === link.target;
+
+                        if (link.curvature !== 0 && controlPoints) {
+                            const time = 0.5;
+                            if (selfLoop) {
+                                // Self-loop
+                                textPos = getQuadraticXYFourWays(
+                                    time, link.source.x, link.source.y,
+                                    controlPoints[0],
+                                    controlPoints[1],
+                                    controlPoints[2],
+                                    controlPoints[3],
+                                    link.target.x, link.target.y,
+                                );
+                            } else {
+                                // Use midpoint of quadratic Bezier curve
+                                textPos = {
+                                    x: Math.pow(1 - time, 2) * start.x + 2 * (1 - time) * time * controlPoints[0] + Math.pow(time, 2) * end.x,
+                                    y: Math.pow(1 - time, 2) * start.y + 2 * (1 - time) * time * controlPoints[1] + Math.pow(time, 2) * end.y
+                                };
+                            }
+                        }
+
+                        // Calculate text angle
+                        let textAngle = Math.atan2(end.y - start.y, end.x - start.x);
+                        if (textAngle > Math.PI / 2) textAngle = -(Math.PI - textAngle);
+                        if (textAngle < -Math.PI / 2) textAngle = -(-Math.PI - textAngle);
+
+                        // Calculate font size based on link length
+                        let label = link.label;
+                        let labelTail = '';
+
+                        let maxTextLength = 50;
+                        if (!selfLoop) {
+                            const relLink = { x: end.x - start.x, y: end.y - start.y };
+                            const linkLength = Math.sqrt(relLink.x * relLink.x + relLink.y * relLink.y);
+                            maxTextLength = linkLength - 5;
+                        }
+
+                        const fontSize = 2;
+                        // Set text style based on focus OR selection
+                        const defaultTextStyle = 'normal'; // Default text style
+                        const highlightedTextStyle = 'bold'; // Style when focused or selected
+
+                        ctx.font = `${isFocused || isSelected ? highlightedTextStyle : defaultTextStyle} ${fontSize}px Sans-Serif`;
+
+                        const textWidth = () => (ctx.measureText(label).width + ctx.measureText(labelTail).width) * 2;
+                        while (textWidth() > maxTextLength) {
+                            if (label.length <= 1) {
+                                break;
+                            }
+
+                            label = label.substring(0, label.length - 1);
+                            labelTail = '...';
+                        }
+                        label = label + labelTail;
+                        const textRect = ctx.measureText(label);
+
+                        ctx.save();
+                        ctx.translate(textPos.x, textPos.y);
+                        ctx.rotate(textAngle);
+
+                        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+                        ctx.fillRect(
+                            (-textRect.width / 2) - 1,
+                            (-fontSize / 2) - 1,
+                            textRect.width + 2,
+                            fontSize + 2, 1);
+
+                        // Set text color based on focus OR selection
+                        const defaultTextColor = '#9AA0A6'; // Default color
+                        const focusedTextColor = '#3C4043'; // Color when focused
+                        const selectedTextColor = '#1A73E8'; // Color when selected
+
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'middle';
+                        const textVerticalOffset = -Math.abs(textRect.actualBoundingBoxAscent - textRect.actualBoundingBoxDescent) * 0.25;
+                        ctx.fillStyle = isSelected
+                        ? selectedTextColor
+                        : isFocused
+                            ? focusedTextColor
+                            : defaultTextColor;
+                        ctx.fillText(label, 0, textVerticalOffset);
+
+                        ctx.strokeStyle = isSelected
+                        ? selectedTextColor
+                        : defaultTextColor;
+                        ctx.lineWidth = .5;
+                        ctx.strokeRect((-textRect.width / 2)-1 , (-fontSize / 2)-1, textRect.width + 2, fontSize + 2);
+
+                        ctx.restore();
+                    });
+            return graph;
+        };
+    }
+
+    /**
+     * Renders the graph visualization.
+     */
+    render() {
+        this.requestedRecenter = true;
+
+        const graphData = {
+            nodes: this.store.getNodes(),
+            links: this._computeCurvature(this.store.getEdges())
+        };
+
+        const offscreenCanvas = document.createElement('canvas');
+        offscreenCanvas.width = this.mount.offsetWidth;
+        offscreenCanvas.height = this.mount.offsetHeight;
+
+        this.graph
+            // The canvas can sometimes exceed
+            // the dimensions of the HTMLElement
+            // it is mounted to. This fixes
+            // that issue.
+            .width(this.mount.offsetWidth)
+            .height(this.mount.clientHeight)
+            .nodeId('id')
+            .nodeVal('value')
+            .nodeColor('color')
+            .linkSource('source')
+            .linkTarget('target')
+            .linkLabel(link => '')
+            // .enablePointerInteraction(false)
+            // If paused, mouse events stop.
+            // Pausing improves performance,
+            // and is something to keep in mind
+            // when we run into performance bottlenecks.
+            .autoPauseRedraw(false)
+            // These handlers should be extracted to a
+            // wrapper function similar to .drawNodes()
+            .onNodeHover(node => {
+                if (!this.store.config.focusedGraphObject || !(this.store.config.focusedGraphObject instanceof Edge)) { 
+                    this.store.setFocusedObject(node);
+                }
+            })
+            .onNodeDragEnd(node => {
+                node.fx = node.x;
+                node.fy = node.y;
+            })
+            .onNodeClick(node => {
+                this.store.setSelectedObject(node);
+            })
+            .onLinkHover(link => {
+                this.store.setFocusedObject(link);
+            })
+            .onLinkClick(link => {
+                this.store.setSelectedObject(link);
+            })
+            .onBackgroundClick(event => {
+                this.store.setSelectedObject(null);
+            })
+            .calculateLineLengthByCluster()
+            .drawNodes()
+            .drawEdges()
+            .cooldownTime(1250);
+
+        // fit to canvas when engine stops
+        this.graph.onEngineStop(() => {
+            if (this.requestedRecenter) {
+                this.graph.zoomToFit(1000, 16);
+                this.requestedRecenter = false;
+            }
+        });
+
+        this.graph.graphData(graphData);
+    }
+}
+
+window[namespace].GraphVisualization = GraphVisualization;