anywidget-graph 0.1.0__py3-none-any.whl → 0.2.0__py3-none-any.whl

anywidget_graph/widget.py

@@ -6,22 +6,909 @@ from typing import TYPE_CHECKING, Any
 
 import anywidget
 import traitlets
+from traitlets import observe
 
 if TYPE_CHECKING:
     from collections.abc import Callable
 
-_ESM = """
+_ESM = r"""
 import Graph from "https://esm.sh/graphology@0.25.4";
 import Sigma from "https://esm.sh/sigma@3.0.0";
+import neo4j from "https://cdn.jsdelivr.net/npm/neo4j-driver@5.28.0/lib/browser/neo4j-web.esm.min.js";
 
+// === CONSTANTS ===
+const QUERY_LANGUAGES = [
+  { id: "cypher", name: "Cypher", enabled: true },
+  { id: "gql", name: "GQL", enabled: false },
+  { id: "sparql", name: "SPARQL", enabled: false },
+  { id: "gremlin", name: "Gremlin", enabled: false },
+  { id: "graphql", name: "GraphQL", enabled: false },
+];
+
+const BACKENDS = [
+  { id: "neo4j", name: "Neo4j" },
+  { id: "grafeo", name: "Grafeo" },
+];
+
+// === SVG ICONS ===
+const ICONS = {
+  play: `<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`,
+  settings: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4m0 14v4m11-11h-4M5 12H1m17.36-5.64l-2.83 2.83M9.47 14.53l-2.83 2.83m0-10.72l2.83 2.83m5.06 5.06l2.83 2.83"/></svg>`,
+  close: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>`,
+  chevron: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>`,
+  chevronRight: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`,
+  node: `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="8"/></svg>`,
+  edge: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14m-4-4l4 4-4 4"/></svg>`,
+  property: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h10"/></svg>`,
+  sidebar: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>`,
+  refresh: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>`,
+};
+
+// === DATABASE CONNECTION ===
+let driver = null;
+
+async function connectNeo4j(uri, username, password, model) {
+  if (driver) {
+    await driver.close();
+    driver = null;
+  }
+
+  model.set("connection_status", "connecting");
+  model.save_changes();
+
+  try {
+    driver = neo4j.driver(uri, neo4j.auth.basic(username, password));
+    await driver.verifyConnectivity();
+    model.set("connection_status", "connected");
+    model.set("query_error", "");
+    model.save_changes();
+
+    // Fetch schema after successful connection
+    await fetchSchema(model);
+    return true;
+  } catch (error) {
+    model.set("connection_status", "error");
+    model.set("query_error", "Connection failed: " + error.message);
+    model.save_changes();
+    driver = null;
+    return false;
+  }
+}
+
+async function fetchSchema(model) {
+  if (!driver) return;
+
+  const database = model.get("connection_database") || "neo4j";
+  const session = driver.session({ database });
+
+  try {
+    // Fetch node labels and their properties
+    const labelsResult = await session.run("CALL db.labels()");
+    const nodeTypes = [];
+
+    for (const record of labelsResult.records) {
+      const label = record.get(0);
+      // Get properties for this label
+      const propsResult = await session.run(
+        `MATCH (n:\`${label}\`) UNWIND keys(n) AS key RETURN DISTINCT key LIMIT 20`
+      );
+      const properties = propsResult.records.map(r => r.get(0));
+      nodeTypes.push({ label, properties, count: null });
+    }
+
+    // Fetch relationship types and their properties
+    const relTypesResult = await session.run("CALL db.relationshipTypes()");
+    const edgeTypes = [];
+
+    for (const record of relTypesResult.records) {
+      const type = record.get(0);
+      // Get properties for this relationship type
+      const propsResult = await session.run(
+        `MATCH ()-[r:\`${type}\`]->() UNWIND keys(r) AS key RETURN DISTINCT key LIMIT 20`
+      );
+      const properties = propsResult.records.map(r => r.get(0));
+      edgeTypes.push({ type, properties, count: null });
+    }
+
+    model.set("schema_node_types", nodeTypes);
+    model.set("schema_edge_types", edgeTypes);
+    model.save_changes();
+  } catch (error) {
+    console.error("Failed to fetch schema:", error);
+  } finally {
+    await session.close();
+  }
+}
+
+async function disconnectNeo4j(model) {
+  if (driver) {
+    await driver.close();
+    driver = null;
+  }
+  model.set("connection_status", "disconnected");
+  model.save_changes();
+}
+
+async function executeNeo4jQuery(query, database, model) {
+  if (!driver) {
+    model.set("query_error", "Not connected to database");
+    model.save_changes();
+    return null;
+  }
+
+  model.set("query_running", true);
+  model.set("query_error", "");
+  model.save_changes();
+
+  const session = driver.session({ database: database || "neo4j" });
+
+  try {
+    const result = await session.run(query);
+    model.set("query_running", false);
+    model.save_changes();
+    return processNeo4jRecords(result.records);
+  } catch (error) {
+    model.set("query_running", false);
+    model.set("query_error", "Query error: " + error.message);
+    model.save_changes();
+    return null;
+  } finally {
+    await session.close();
+  }
+}
+
+function processNeo4jRecords(records) {
+  const nodes = new Map();
+  const edges = [];
+
+  for (const record of records) {
+    for (const key of record.keys) {
+      const value = record.get(key);
+      processNeo4jValue(value, nodes, edges);
+    }
+  }
+
+  return { nodes: Array.from(nodes.values()), edges };
+}
+
+function processNeo4jValue(value, nodes, edges) {
+  if (!value) return;
+
+  if (neo4j.isNode(value)) {
+    const nodeId = value.elementId || value.identity.toString();
+    if (!nodes.has(nodeId)) {
+      const props = {};
+      for (const [k, v] of Object.entries(value.properties)) {
+        props[k] = neo4j.isInt(v) ? v.toNumber() : v;
+      }
+      nodes.set(nodeId, {
+        id: nodeId,
+        label: props.name || props.title || value.labels[0] || nodeId,
+        labels: value.labels,
+        ...props,
+      });
+    }
+  } else if (neo4j.isRelationship(value)) {
+    const props = {};
+    for (const [k, v] of Object.entries(value.properties)) {
+      props[k] = neo4j.isInt(v) ? v.toNumber() : v;
+    }
+    edges.push({
+      source: value.startNodeElementId || value.start.toString(),
+      target: value.endNodeElementId || value.end.toString(),
+      label: value.type,
+      ...props,
+    });
+  } else if (neo4j.isPath(value)) {
+    for (const segment of value.segments) {
+      processNeo4jValue(segment.start, nodes, edges);
+      processNeo4jValue(segment.end, nodes, edges);
+      processNeo4jValue(segment.relationship, nodes, edges);
+    }
+  } else if (Array.isArray(value)) {
+    for (const item of value) {
+      processNeo4jValue(item, nodes, edges);
+    }
+  }
+}
+
+// === UI COMPONENTS ===
+function createToolbar(model, wrapper) {
+  const toolbar = document.createElement("div");
+  toolbar.className = "awg-toolbar";
+
+  // Schema sidebar toggle (left)
+  const schemaBtn = document.createElement("button");
+  schemaBtn.className = "awg-btn";
+  schemaBtn.innerHTML = ICONS.sidebar;
+  schemaBtn.title = "Toggle schema browser";
+  schemaBtn.addEventListener("click", () => toggleSchemaPanel(wrapper));
+  toolbar.appendChild(schemaBtn);
+
+  // Query container (collapsible input)
+  if (model.get("show_query_input")) {
+    const queryContainer = document.createElement("div");
+    queryContainer.className = "awg-query-container";
+
+    const queryInput = document.createElement("input");
+    queryInput.type = "text";
+    queryInput.className = "awg-query-input";
+    queryInput.placeholder = "Enter query (e.g., MATCH (n) RETURN n LIMIT 25)";
+    queryInput.value = model.get("query") || "";
+
+    queryInput.addEventListener("input", (e) => {
+      model.set("query", e.target.value);
+      model.save_changes();
+    });
+
+    queryInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        executeQuery(model);
+      }
+    });
+
+    model.on("change:query", () => {
+      if (queryInput.value !== model.get("query")) {
+        queryInput.value = model.get("query") || "";
+      }
+    });
+
+    queryContainer.appendChild(queryInput);
+
+    // Play button
+    const playBtn = document.createElement("button");
+    playBtn.className = "awg-btn awg-btn-primary";
+    playBtn.innerHTML = ICONS.play;
+    playBtn.title = "Run query";
+    playBtn.addEventListener("click", () => executeQuery(model));
+
+    model.on("change:query_running", () => {
+      playBtn.disabled = model.get("query_running");
+      playBtn.innerHTML = model.get("query_running")
+        ? '<span class="awg-spinner"></span>'
+        : ICONS.play;
+    });
+
+    queryContainer.appendChild(playBtn);
+    toolbar.appendChild(queryContainer);
+  }
+
+  // Settings button
+  if (model.get("show_settings")) {
+    const settingsBtn = document.createElement("button");
+    settingsBtn.className = "awg-btn";
+    settingsBtn.innerHTML = ICONS.settings;
+    settingsBtn.title = "Connection settings";
+
+    // Status dot
+    const statusDot = document.createElement("span");
+    statusDot.className = "awg-status-dot";
+    updateStatusDot(statusDot, model.get("connection_status"));
+    settingsBtn.appendChild(statusDot);
+
+    model.on("change:connection_status", () => {
+      updateStatusDot(statusDot, model.get("connection_status"));
+    });
+
+    settingsBtn.addEventListener("click", () => {
+      toggleSettingsPanel(wrapper);
+    });
+
+    toolbar.appendChild(settingsBtn);
+  }
+
+  // Properties panel toggle (right)
+  const propsBtn = document.createElement("button");
+  propsBtn.className = "awg-btn";
+  propsBtn.innerHTML = ICONS.property;
+  propsBtn.title = "Toggle properties panel";
+  propsBtn.addEventListener("click", () => togglePropertiesPanel(wrapper));
+  toolbar.appendChild(propsBtn);
+
+  return toolbar;
+}
+
+function updateStatusDot(dot, status) {
+  dot.className = "awg-status-dot awg-status-" + status;
+}
+
+function toggleSettingsPanel(wrapper) {
+  const panel = wrapper.querySelector(".awg-settings-panel");
+  if (panel) {
+    panel.classList.toggle("awg-panel-open");
+  }
+}
+
+function toggleSchemaPanel(wrapper) {
+  const panel = wrapper.querySelector(".awg-schema-panel");
+  if (panel) {
+    panel.classList.toggle("awg-panel-open");
+  }
+}
+
+function createSchemaSidebar(model) {
+  const panel = document.createElement("div");
+  panel.className = "awg-schema-panel";
+
+  // Header
+  const header = document.createElement("div");
+  header.className = "awg-panel-header";
+  header.innerHTML = `<span>Schema</span>`;
+
+  const refreshBtn = document.createElement("button");
+  refreshBtn.className = "awg-btn awg-btn-icon awg-btn-sm";
+  refreshBtn.innerHTML = ICONS.refresh;
+  refreshBtn.title = "Refresh schema";
+  refreshBtn.addEventListener("click", () => fetchSchema(model));
+  header.appendChild(refreshBtn);
+
+  panel.appendChild(header);
+
+  // Content
+  const content = document.createElement("div");
+  content.className = "awg-schema-content";
+
+  function renderSchema() {
+    content.innerHTML = "";
+
+    const nodeTypes = model.get("schema_node_types") || [];
+    const edgeTypes = model.get("schema_edge_types") || [];
+
+    if (nodeTypes.length === 0 && edgeTypes.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "awg-schema-empty";
+      empty.textContent = "Connect to load schema";
+      content.appendChild(empty);
+      return;
+    }
+
+    // Node types section
+    if (nodeTypes.length > 0) {
+      const nodeSection = document.createElement("div");
+      nodeSection.className = "awg-schema-section";
+
+      const nodeHeader = document.createElement("div");
+      nodeHeader.className = "awg-schema-section-header";
+      nodeHeader.innerHTML = `${ICONS.node} <span>Node Labels</span>`;
+      nodeSection.appendChild(nodeHeader);
+
+      nodeTypes.forEach(({ label, properties }) => {
+        const item = createSchemaItem(label, properties, "node", model);
+        nodeSection.appendChild(item);
+      });
+
+      content.appendChild(nodeSection);
+    }
+
+    // Edge types section
+    if (edgeTypes.length > 0) {
+      const edgeSection = document.createElement("div");
+      edgeSection.className = "awg-schema-section";
+
+      const edgeHeader = document.createElement("div");
+      edgeHeader.className = "awg-schema-section-header";
+      edgeHeader.innerHTML = `${ICONS.edge} <span>Relationships</span>`;
+      edgeSection.appendChild(edgeHeader);
+
+      edgeTypes.forEach(({ type, properties }) => {
+        const item = createSchemaItem(type, properties, "edge", model);
+        edgeSection.appendChild(item);
+      });
+
+      content.appendChild(edgeSection);
+    }
+  }
+
+  model.on("change:schema_node_types", renderSchema);
+  model.on("change:schema_edge_types", renderSchema);
+  renderSchema();
+
+  panel.appendChild(content);
+  return panel;
+}
+
+function createSchemaItem(name, properties, type, model) {
+  const item = document.createElement("div");
+  item.className = "awg-schema-item";
+
+  const itemHeader = document.createElement("div");
+  itemHeader.className = "awg-schema-item-header";
+
+  const expandBtn = document.createElement("span");
+  expandBtn.className = "awg-schema-expand";
+  expandBtn.innerHTML = ICONS.chevronRight;
+
+  const nameSpan = document.createElement("span");
+  nameSpan.className = "awg-schema-name";
+  nameSpan.textContent = name;
+
+  itemHeader.appendChild(expandBtn);
+  itemHeader.appendChild(nameSpan);
+
+  // Click on name to query
+  nameSpan.addEventListener("click", (e) => {
+    e.stopPropagation();
+    let query;
+    if (type === "node") {
+      query = `MATCH (n:\`${name}\`) RETURN n LIMIT 25`;
+    } else {
+      query = `MATCH (a)-[r:\`${name}\`]->(b) RETURN a, r, b LIMIT 25`;
+    }
+    model.set("query", query);
+    model.save_changes();
+    executeQuery(model);
+  });
+
+  // Properties list (collapsed by default)
+  const propsList = document.createElement("div");
+  propsList.className = "awg-schema-props";
+
+  if (properties && properties.length > 0) {
+    properties.forEach(prop => {
+      const propItem = document.createElement("div");
+      propItem.className = "awg-schema-prop";
+      propItem.innerHTML = `${ICONS.property} <span>${prop}</span>`;
+
+      // Click on property to query with that property
+      propItem.addEventListener("click", (e) => {
+        e.stopPropagation();
+        let query;
+        if (type === "node") {
+          query = `MATCH (n:\`${name}\`) RETURN n.\`${prop}\` AS ${prop}, n LIMIT 25`;
+        } else {
+          query = `MATCH (a)-[r:\`${name}\`]->(b) RETURN r.\`${prop}\` AS ${prop}, a, r, b LIMIT 25`;
+        }
+        model.set("query", query);
+        model.save_changes();
+        executeQuery(model);
+      });
+
+      propsList.appendChild(propItem);
+    });
+  } else {
+    const noProp = document.createElement("div");
+    noProp.className = "awg-schema-prop awg-schema-prop-empty";
+    noProp.textContent = "No properties";
+    propsList.appendChild(noProp);
+  }
+
+  item.appendChild(itemHeader);
+  item.appendChild(propsList);
+
+  // Toggle expand/collapse
+  itemHeader.addEventListener("click", () => {
+    item.classList.toggle("awg-schema-item-expanded");
+  });
+
+  return item;
+}
+
+function createSettingsPanel(model) {
+  const panel = document.createElement("div");
+  panel.className = "awg-settings-panel";
+
+  // Header
+  const header = document.createElement("div");
+  header.className = "awg-panel-header";
+  header.innerHTML = "<span>Settings</span>";
+  panel.appendChild(header);
+
+  // Form
+  const form = document.createElement("div");
+  form.className = "awg-panel-form";
+
+  // Dark mode toggle
+  form.appendChild(createFormGroup("Theme", () => {
+    const toggle = document.createElement("label");
+    toggle.className = "awg-toggle";
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = model.get("dark_mode");
+    checkbox.addEventListener("change", (e) => {
+      model.set("dark_mode", e.target.checked);
+      model.save_changes();
+    });
+    model.on("change:dark_mode", () => {
+      checkbox.checked = model.get("dark_mode");
+    });
+    const slider = document.createElement("span");
+    slider.className = "awg-toggle-slider";
+    const label = document.createElement("span");
+    label.className = "awg-toggle-label";
+    label.textContent = "Dark mode";
+    toggle.appendChild(checkbox);
+    toggle.appendChild(slider);
+    toggle.appendChild(label);
+    return toggle;
+  }));
+
+  // Backend selector
+  form.appendChild(createFormGroup("Backend", () => {
+    const select = document.createElement("select");
+    select.className = "awg-select";
+    BACKENDS.forEach(b => {
+      const opt = document.createElement("option");
+      opt.value = b.id;
+      opt.textContent = b.name;
+      opt.selected = model.get("database_backend") === b.id;
+      select.appendChild(opt);
+    });
+    select.addEventListener("change", (e) => {
+      model.set("database_backend", e.target.value);
+      model.save_changes();
+      updateFormVisibility();
+    });
+    return select;
+  }));
+
+  // Neo4j fields container
+  const neo4jFields = document.createElement("div");
+  neo4jFields.className = "awg-neo4j-fields";
+
+  // URI
+  neo4jFields.appendChild(createFormGroup("URI", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "awg-input";
+    input.placeholder = "neo4j+s://localhost:7687";
+    input.value = model.get("connection_uri") || "";
+    input.addEventListener("input", (e) => {
+      model.set("connection_uri", e.target.value);
+      model.save_changes();
+    });
+    return input;
+  }));
+
+  // Username
+  neo4jFields.appendChild(createFormGroup("Username", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "awg-input";
+    input.placeholder = "neo4j";
+    input.value = model.get("connection_username") || "";
+    input.addEventListener("input", (e) => {
+      model.set("connection_username", e.target.value);
+      model.save_changes();
+    });
+    return input;
+  }));
+
+  // Password
+  neo4jFields.appendChild(createFormGroup("Password", () => {
+    const input = document.createElement("input");
+    input.type = "password";
+    input.className = "awg-input";
+    input.value = model.get("connection_password") || "";
+    input.addEventListener("input", (e) => {
+      model.set("connection_password", e.target.value);
+      model.save_changes();
+    });
+    return input;
+  }));
+
+  form.appendChild(neo4jFields);
+
+  // Database name
+  form.appendChild(createFormGroup("Database", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "awg-input";
+    input.placeholder = "neo4j";
+    input.value = model.get("connection_database") || "neo4j";
+    input.addEventListener("input", (e) => {
+      model.set("connection_database", e.target.value);
+      model.save_changes();
+    });
+    return input;
+  }));
+
+  // Query language
+  form.appendChild(createFormGroup("Language", () => {
+    const select = document.createElement("select");
+    select.className = "awg-select";
+    QUERY_LANGUAGES.forEach(lang => {
+      const opt = document.createElement("option");
+      opt.value = lang.id;
+      opt.textContent = lang.name;
+      opt.disabled = !lang.enabled;
+      opt.selected = model.get("query_language") === lang.id;
+      select.appendChild(opt);
+    });
+    select.addEventListener("change", (e) => {
+      model.set("query_language", e.target.value);
+      model.save_changes();
+    });
+    return select;
+  }));
+
+  panel.appendChild(form);
+
+  // Connect button
+  const actions = document.createElement("div");
+  actions.className = "awg-panel-actions";
+
+  const connectBtn = document.createElement("button");
+  connectBtn.className = "awg-btn awg-btn-primary awg-btn-full";
+
+  const statusIndicator = document.createElement("div");
+  statusIndicator.className = "awg-connection-status";
+
+  function updateConnectButton() {
+    const status = model.get("connection_status");
+    const backend = model.get("database_backend");
+
+    if (backend === "grafeo") {
+      connectBtn.textContent = "Python Backend";
+      connectBtn.disabled = true;
+      statusIndicator.innerHTML = '<span class="awg-status-dot-inline awg-status-connected"></span> Grafeo';
+    } else if (status === "connected") {
+      connectBtn.textContent = "Disconnect";
+      connectBtn.disabled = false;
+      statusIndicator.innerHTML = '<span class="awg-status-dot-inline awg-status-connected"></span> Connected';
+    } else if (status === "connecting") {
+      connectBtn.textContent = "Connecting...";
+      connectBtn.disabled = true;
+      statusIndicator.innerHTML = '<span class="awg-status-dot-inline awg-status-connecting"></span> Connecting';
+    } else if (status === "error") {
+      connectBtn.textContent = "Retry";
+      connectBtn.disabled = false;
+      statusIndicator.innerHTML = '<span class="awg-status-dot-inline awg-status-error"></span> Error';
+    } else {
+      connectBtn.textContent = "Connect";
+      connectBtn.disabled = false;
+      statusIndicator.innerHTML = '<span class="awg-status-dot-inline awg-status-disconnected"></span> Disconnected';
+    }
+  }
+
+  function updateFormVisibility() {
+    const backend = model.get("database_backend");
+    neo4jFields.style.display = backend === "neo4j" ? "block" : "none";
+    updateConnectButton();
+  }
+
+  connectBtn.addEventListener("click", async () => {
+    const backend = model.get("database_backend");
+    if (backend !== "neo4j") return;
+
+    const status = model.get("connection_status");
+    if (status === "connected") {
+      await disconnectNeo4j(model);
+    } else {
+      await connectNeo4j(
+        model.get("connection_uri"),
+        model.get("connection_username"),
+        model.get("connection_password"),
+        model
+      );
+    }
+  });
+
+  model.on("change:connection_status", updateConnectButton);
+  model.on("change:database_backend", updateFormVisibility);
+
+  actions.appendChild(statusIndicator);
+  actions.appendChild(connectBtn);
+  panel.appendChild(actions);
+
+  // Error display
+  const errorDiv = document.createElement("div");
+  errorDiv.className = "awg-panel-error";
+  function updateError() {
+    const err = model.get("query_error");
+    errorDiv.textContent = err || "";
+    errorDiv.style.display = err ? "block" : "none";
+  }
+  model.on("change:query_error", updateError);
+  updateError();
+  panel.appendChild(errorDiv);
+
+  // Initialize
+  updateFormVisibility();
+
+  return panel;
+}
+
+function createFormGroup(label, inputFn) {
+  const group = document.createElement("div");
+  group.className = "awg-form-group";
+
+  const labelEl = document.createElement("label");
+  labelEl.className = "awg-label";
+  labelEl.textContent = label;
+  group.appendChild(labelEl);
+
+  group.appendChild(inputFn());
+  return group;
+}
+
+function createPropertiesPanel(model) {
+  const panel = document.createElement("div");
+  panel.className = "awg-properties-panel";
+
+  // Header
+  const header = document.createElement("div");
+  header.className = "awg-panel-header";
+  header.innerHTML = "<span>Properties</span>";
+  panel.appendChild(header);
+
+  // Content
+  const content = document.createElement("div");
+  content.className = "awg-properties-content";
+
+  function renderProperties() {
+    content.innerHTML = "";
+
+    const selectedNode = model.get("selected_node");
+    const selectedEdge = model.get("selected_edge");
+
+    if (!selectedNode && !selectedEdge) {
+      const empty = document.createElement("div");
+      empty.className = "awg-properties-empty";
+      empty.textContent = "Click a node or edge to view properties";
+      content.appendChild(empty);
+      return;
+    }
+
+    if (selectedNode) {
+      // Node header
+      const nodeHeader = document.createElement("div");
+      nodeHeader.className = "awg-properties-header";
+      nodeHeader.innerHTML = `${ICONS.node} <span class="awg-properties-type">Node</span>`;
+      content.appendChild(nodeHeader);
+
+      // Node ID
+      const idItem = document.createElement("div");
+      idItem.className = "awg-property-item";
+      idItem.innerHTML = `<span class="awg-property-key">id</span><span class="awg-property-value">${selectedNode.id || "N/A"}</span>`;
+      content.appendChild(idItem);
+
+      // Labels
+      if (selectedNode.labels && selectedNode.labels.length > 0) {
+        const labelsItem = document.createElement("div");
+        labelsItem.className = "awg-property-item";
+        labelsItem.innerHTML = `<span class="awg-property-key">labels</span><span class="awg-property-value awg-property-labels">${selectedNode.labels.map(l => `<span class="awg-label-tag">${l}</span>`).join("")}</span>`;
+        content.appendChild(labelsItem);
+      }
+
+      // Other properties
+      Object.entries(selectedNode).forEach(([key, value]) => {
+        if (key === "id" || key === "labels" || key === "label" || key === "x" || key === "y" || key === "size" || key === "color") return;
+        const item = document.createElement("div");
+        item.className = "awg-property-item";
+        const displayValue = typeof value === "object" ? JSON.stringify(value) : String(value);
+        item.innerHTML = `<span class="awg-property-key">${key}</span><span class="awg-property-value">${displayValue}</span>`;
+        content.appendChild(item);
+      });
+    }
+
+    if (selectedEdge) {
+      // Edge header
+      const edgeHeader = document.createElement("div");
+      edgeHeader.className = "awg-properties-header";
+      edgeHeader.innerHTML = `${ICONS.edge} <span class="awg-properties-type">Relationship</span>`;
+      content.appendChild(edgeHeader);
+
+      // Edge type/label
+      if (selectedEdge.label) {
+        const typeItem = document.createElement("div");
+        typeItem.className = "awg-property-item";
+        typeItem.innerHTML = `<span class="awg-property-key">type</span><span class="awg-property-value"><span class="awg-edge-tag">${selectedEdge.label}</span></span>`;
+        content.appendChild(typeItem);
+      }
+
+      // Source/Target
+      const sourceItem = document.createElement("div");
+      sourceItem.className = "awg-property-item";
+      sourceItem.innerHTML = `<span class="awg-property-key">source</span><span class="awg-property-value awg-property-truncate">${selectedEdge.source}</span>`;
+      content.appendChild(sourceItem);
+
+      const targetItem = document.createElement("div");
+      targetItem.className = "awg-property-item";
+      targetItem.innerHTML = `<span class="awg-property-key">target</span><span class="awg-property-value awg-property-truncate">${selectedEdge.target}</span>`;
+      content.appendChild(targetItem);
+
+      // Other properties
+      Object.entries(selectedEdge).forEach(([key, value]) => {
+        if (key === "source" || key === "target" || key === "label" || key === "size" || key === "color") return;
+        const item = document.createElement("div");
+        item.className = "awg-property-item";
+        const displayValue = typeof value === "object" ? JSON.stringify(value) : String(value);
+        item.innerHTML = `<span class="awg-property-key">${key}</span><span class="awg-property-value">${displayValue}</span>`;
+        content.appendChild(item);
+      });
+    }
+  }
+
+  model.on("change:selected_node", renderProperties);
+  model.on("change:selected_edge", renderProperties);
+  renderProperties();
+
+  panel.appendChild(content);
+  return panel;
+}
+
+function togglePropertiesPanel(wrapper) {
+  const panel = wrapper.querySelector(".awg-properties-panel");
+  if (panel) {
+    panel.classList.toggle("awg-panel-open");
+  }
+}
+
+async function executeQuery(model) {
+  const backend = model.get("database_backend");
+  const query = model.get("query");
+
+  if (!query.trim()) {
+    model.set("query_error", "Please enter a query");
+    model.save_changes();
+    return;
+  }
+
+  if (backend === "neo4j") {
+    const result = await executeNeo4jQuery(
+      query,
+      model.get("connection_database"),
+      model
+    );
+
+    if (result) {
+      model.set("nodes", result.nodes);
+      model.set("edges", result.edges);
+      model.save_changes();
+    }
+  } else if (backend === "grafeo") {
+    // Trigger Python-side execution
+    model.set("_execute_query", model.get("_execute_query") + 1);
+    model.save_changes();
+  }
+}
+
+// === MAIN RENDER FUNCTION ===
 function render({ model, el }) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "awg-wrapper";
+
+  // Apply dark mode
+  function updateTheme() {
+    wrapper.classList.toggle("awg-dark", model.get("dark_mode"));
+  }
+  updateTheme();
+  model.on("change:dark_mode", updateTheme);
+
+  // Create toolbar if enabled
+  if (model.get("show_toolbar")) {
+    const toolbar = createToolbar(model, wrapper);
+    wrapper.appendChild(toolbar);
+  }
+
+  // Main content area (schema + graph + properties)
+  const content = document.createElement("div");
+  content.className = "awg-content";
+
+  // Create schema sidebar (left) - collapsed by default
+  const schemaSidebar = createSchemaSidebar(model);
+  content.appendChild(schemaSidebar);
+
+  // Create graph container
   const container = document.createElement("div");
+  container.className = "awg-graph-container";
   container.style.width = model.get("width") + "px";
   container.style.height = model.get("height") + "px";
-  container.style.border = "1px solid #ddd";
-  container.style.borderRadius = "4px";
-  container.style.background = model.get("background") || "#fafafa";
-  el.appendChild(container);
+  content.appendChild(container);
+
+  // Create properties panel (right) - collapsed by default
+  const propertiesPanel = createPropertiesPanel(model);
+  content.appendChild(propertiesPanel);
+
+  // Create settings panel if enabled (inside properties panel area)
+  if (model.get("show_settings")) {
+    const settingsPanel = createSettingsPanel(model);
+    content.appendChild(settingsPanel);
+  }
+
+  wrapper.appendChild(content);
+  el.appendChild(wrapper);
 
   const graph = new Graph();
 
@@ -119,8 +1006,570 @@ export default { render };
 """
 
 _CSS = """
-.anywidget-graph {
+/* === CSS VARIABLES === */
+.awg-wrapper {
+  --awg-bg: #ffffff;
+  --awg-bg-secondary: #f8f9fa;
+  --awg-bg-tertiary: #f3f4f6;
+  --awg-border: #e5e7eb;
+  --awg-text: #111827;
+  --awg-text-secondary: #6b7280;
+  --awg-text-muted: #9ca3af;
+  --awg-accent: #6366f1;
+  --awg-accent-hover: #4f46e5;
+  --awg-graph-bg: #fafafa;
+  --awg-input-bg: #ffffff;
+  --awg-input-border: #d1d5db;
+}
+
+.awg-wrapper.awg-dark {
+  --awg-bg: #1a1a2e;
+  --awg-bg-secondary: #16213e;
+  --awg-bg-tertiary: #0f3460;
+  --awg-border: #2d3748;
+  --awg-text: #e2e8f0;
+  --awg-text-secondary: #a0aec0;
+  --awg-text-muted: #718096;
+  --awg-accent: #818cf8;
+  --awg-accent-hover: #6366f1;
+  --awg-graph-bg: #0f0f1a;
+  --awg-input-bg: #1e1e32;
+  --awg-input-border: #3d4a5c;
+}
+
+/* === BASE === */
+.awg-wrapper {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--awg-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--awg-bg);
+  color: var(--awg-text);
+}
+
+.awg-content {
+  display: flex;
+  position: relative;
+}
+
+/* === TOOLBAR === */
+.awg-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--awg-bg-secondary);
+  border-bottom: 1px solid var(--awg-border);
+  min-height: 44px;
+}
+
+.awg-query-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.awg-query-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--awg-input-border);
+  border-radius: 6px;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;
+  font-size: 13px;
+  background: var(--awg-input-bg);
+  color: var(--awg-text);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.awg-query-input:focus {
+  outline: none;
+  border-color: var(--awg-accent);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.awg-query-input::placeholder {
+  color: var(--awg-text-muted);
+}
+
+/* === BUTTONS === */
+.awg-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--awg-input-border);
+  border-radius: 6px;
+  background: var(--awg-input-bg);
+  color: var(--awg-text);
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+  font-size: 13px;
+}
+
+.awg-btn:hover {
+  background: var(--awg-bg-tertiary);
+  border-color: var(--awg-text-muted);
+}
+
+.awg-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.awg-btn-primary {
+  background: var(--awg-accent);
+  border-color: var(--awg-accent);
+  color: #fff;
+}
+
+.awg-btn-primary:hover {
+  background: var(--awg-accent-hover);
+  border-color: var(--awg-accent-hover);
+}
+
+.awg-btn-primary:disabled {
+  background: var(--awg-text-muted);
+  border-color: var(--awg-text-muted);
+}
+
+.awg-btn-full {
+  width: 100%;
+}
+
+/* === STATUS DOTS === */
+.awg-status-dot {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1.5px solid var(--awg-bg);
+}
+
+.awg-status-dot-inline {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.awg-status-disconnected { background: #6b7280; }
+.awg-status-connecting { background: #f59e0b; animation: awg-pulse 1s infinite; }
+.awg-status-connected { background: #22c55e; }
+.awg-status-error { background: #ef4444; }
+
+@keyframes awg-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* === SPINNER === */
+.awg-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: awg-spin 0.8s linear infinite;
+}
+
+@keyframes awg-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* === GRAPH CONTAINER === */
+.awg-graph-container {
+  flex: 1;
+  background: var(--awg-graph-bg);
+}
+
+/* === SETTINGS PANEL === */
+.awg-settings-panel {
+  width: 0;
+  overflow: hidden;
+  background: var(--awg-bg-secondary);
+  border-left: 1px solid var(--awg-border);
+  transition: width 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.awg-settings-panel.awg-panel-open {
+  width: 260px;
+}
+
+.awg-panel-header {
+  padding: 12px 16px;
+  font-weight: 600;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--awg-text-secondary);
+  border-bottom: 1px solid var(--awg-border);
+}
+
+.awg-panel-form {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.awg-panel-actions {
+  padding: 12px 16px;
+  border-top: 1px solid var(--awg-border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.awg-connection-status {
+  font-size: 12px;
+  color: var(--awg-text-secondary);
+  display: flex;
+  align-items: center;
+}
+
+.awg-panel-error {
+  padding: 10px 16px;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 12px;
+  border-top: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+/* === FORM ELEMENTS === */
+.awg-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.awg-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--awg-text-secondary);
+}
+
+.awg-input, .awg-select {
+  padding: 8px 10px;
+  border: 1px solid var(--awg-input-border);
+  border-radius: 5px;
+  font-size: 13px;
+  background: var(--awg-input-bg);
+  color: var(--awg-text);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.awg-input:focus, .awg-select:focus {
+  outline: none;
+  border-color: var(--awg-accent);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+
+.awg-select {
+  cursor: pointer;
+}
+
+.awg-select option:disabled {
+  color: var(--awg-text-muted);
+}
+
+/* === TOGGLE SWITCH === */
+.awg-toggle {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 10px;
+}
+
+.awg-toggle input {
+  display: none;
+}
+
+.awg-toggle-slider {
+  width: 36px;
+  height: 20px;
+  background: var(--awg-input-border);
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.2s;
+}
+
+.awg-toggle-slider::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.awg-toggle input:checked + .awg-toggle-slider {
+  background: var(--awg-accent);
+}
+
+.awg-toggle input:checked + .awg-toggle-slider::after {
+  transform: translateX(16px);
+}
+
+.awg-toggle-label {
+  font-size: 13px;
+  color: var(--awg-text);
+}
+
+/* === SCHEMA PANEL (LEFT) === */
+.awg-schema-panel {
+  width: 0;
+  overflow: hidden;
+  background: var(--awg-bg-secondary);
+  border-right: 1px solid var(--awg-border);
+  transition: width 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.awg-schema-panel.awg-panel-open {
+  width: 220px;
+}
+
+.awg-schema-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.awg-schema-empty {
+  padding: 20px 16px;
+  color: var(--awg-text-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.awg-schema-section {
+  margin-bottom: 8px;
+}
+
+.awg-schema-section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--awg-text-secondary);
+}
+
+.awg-schema-item {
+  border-bottom: 1px solid var(--awg-border);
+}
+
+.awg-schema-item:last-child {
+  border-bottom: none;
+}
+
+.awg-schema-item-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.awg-schema-item-header:hover {
+  background: var(--awg-bg-tertiary);
+}
+
+.awg-schema-expand {
+  color: var(--awg-text-muted);
+  transition: transform 0.15s;
+}
+
+.awg-schema-item-expanded .awg-schema-expand {
+  transform: rotate(90deg);
+}
+
+.awg-schema-name {
+  font-size: 13px;
+  color: var(--awg-accent);
+  cursor: pointer;
+  flex: 1;
+}
+
+.awg-schema-name:hover {
+  text-decoration: underline;
+}
+
+.awg-schema-props {
+  display: none;
+  padding: 4px 16px 8px 32px;
+}
+
+.awg-schema-item-expanded .awg-schema-props {
+  display: block;
+}
+
+.awg-schema-prop {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  font-size: 12px;
+  color: var(--awg-text-secondary);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.1s;
+}
+
+.awg-schema-prop:hover {
+  background: var(--awg-bg-tertiary);
+  color: var(--awg-text);
+}
+
+.awg-schema-prop-empty {
+  color: var(--awg-text-muted);
+  font-style: italic;
+  cursor: default;
+}
+
+.awg-schema-prop-empty:hover {
+  background: transparent;
+  color: var(--awg-text-muted);
+}
+
+/* === PROPERTIES PANEL (RIGHT) === */
+.awg-properties-panel {
+  width: 0;
+  overflow: hidden;
+  background: var(--awg-bg-secondary);
+  border-left: 1px solid var(--awg-border);
+  transition: width 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.awg-properties-panel.awg-panel-open {
+  width: 260px;
+}
+
+.awg-properties-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.awg-properties-empty {
+  padding: 20px 16px;
+  color: var(--awg-text-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.awg-properties-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--awg-text-secondary);
+  border-bottom: 1px solid var(--awg-border);
+  background: var(--awg-bg-tertiary);
+}
+
+.awg-properties-type {
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.awg-property-item {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--awg-border);
+}
+
+.awg-property-item:last-child {
+  border-bottom: none;
+}
+
+.awg-property-key {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--awg-text-muted);
+  margin-bottom: 2px;
+}
+
+.awg-property-value {
+  font-size: 13px;
+  color: var(--awg-text);
+  word-break: break-all;
+}
+
+.awg-property-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.awg-property-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.awg-label-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--awg-accent);
+  color: #fff;
+  border-radius: 10px;
+}
+
+.awg-edge-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--awg-bg-tertiary);
+  color: var(--awg-text);
+  border-radius: 4px;
+  border: 1px solid var(--awg-border);
+}
+
+/* === SMALL BUTTONS === */
+.awg-btn-sm {
+  min-width: 24px;
+  height: 24px;
+  padding: 0 4px;
+}
+
+.awg-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 """
 
@@ -131,27 +1580,159 @@ class Graph(anywidget.AnyWidget):
     _esm = _ESM
     _css = _CSS
 
+    # Graph data
     nodes = traitlets.List(trait=traitlets.Dict()).tag(sync=True)
     edges = traitlets.List(trait=traitlets.Dict()).tag(sync=True)
 
+    # Display settings
     width = traitlets.Int(default_value=800).tag(sync=True)
     height = traitlets.Int(default_value=600).tag(sync=True)
     background = traitlets.Unicode(default_value="#fafafa").tag(sync=True)
     show_labels = traitlets.Bool(default_value=True).tag(sync=True)
     show_edge_labels = traitlets.Bool(default_value=False).tag(sync=True)
 
+    # Selection state
     selected_node = traitlets.Dict(allow_none=True, default_value=None).tag(sync=True)
     selected_edge = traitlets.Dict(allow_none=True, default_value=None).tag(sync=True)
 
+    # Toolbar visibility
+    show_toolbar = traitlets.Bool(default_value=True).tag(sync=True)
+    show_settings = traitlets.Bool(default_value=True).tag(sync=True)
+    show_query_input = traitlets.Bool(default_value=True).tag(sync=True)
+
+    # Theme
+    dark_mode = traitlets.Bool(default_value=True).tag(sync=True)
+
+    # Database backend
+    database_backend = traitlets.Unicode(default_value="neo4j").tag(sync=True)
+
+    # Neo4j connection (browser-side)
+    connection_uri = traitlets.Unicode(default_value="").tag(sync=True)
+    connection_username = traitlets.Unicode(default_value="").tag(sync=True)
+    connection_password = traitlets.Unicode(default_value="").tag(sync=True)
+    connection_database = traitlets.Unicode(default_value="neo4j").tag(sync=True)
+
+    # Query state
+    query = traitlets.Unicode(default_value="").tag(sync=True)
+    query_language = traitlets.Unicode(default_value="cypher").tag(sync=True)
+    query_running = traitlets.Bool(default_value=False).tag(sync=True)
+    query_error = traitlets.Unicode(default_value="").tag(sync=True)
+
+    # Connection state
+    connection_status = traitlets.Unicode(default_value="disconnected").tag(sync=True)
+
+    # Schema data
+    schema_node_types = traitlets.List(trait=traitlets.Dict()).tag(sync=True)
+    schema_edge_types = traitlets.List(trait=traitlets.Dict()).tag(sync=True)
+
+    # Query execution trigger (for Python backends)
+    _execute_query = traitlets.Int(default_value=0).tag(sync=True)
+
     def __init__(
         self,
         nodes: list[dict[str, Any]] | None = None,
         edges: list[dict[str, Any]] | None = None,
+        *,
+        width: int = 800,
+        height: int = 600,
+        background: str = "#fafafa",
+        show_labels: bool = True,
+        show_edge_labels: bool = False,
+        show_toolbar: bool = True,
+        show_settings: bool = True,
+        show_query_input: bool = True,
+        dark_mode: bool = True,
+        database_backend: str = "neo4j",
+        connection_uri: str = "",
+        connection_username: str = "",
+        connection_password: str = "",
+        connection_database: str = "neo4j",
+        grafeo_db: Any = None,
         **kwargs: Any,
     ) -> None:
-        super().__init__(nodes=nodes or [], edges=edges or [], **kwargs)
+        super().__init__(
+            nodes=nodes or [],
+            edges=edges or [],
+            width=width,
+            height=height,
+            background=background,
+            show_labels=show_labels,
+            show_edge_labels=show_edge_labels,
+            show_toolbar=show_toolbar,
+            show_settings=show_settings,
+            show_query_input=show_query_input,
+            dark_mode=dark_mode,
+            database_backend=database_backend,
+            connection_uri=connection_uri,
+            connection_username=connection_username,
+            connection_password=connection_password,
+            connection_database=connection_database,
+            **kwargs,
+        )
         self._node_click_callbacks: list[Callable] = []
         self._edge_click_callbacks: list[Callable] = []
+        self._grafeo_db = grafeo_db
+
+    @property
+    def grafeo_db(self) -> Any:
+        """Get the Grafeo database instance."""
+        return self._grafeo_db
+
+    @grafeo_db.setter
+    def grafeo_db(self, value: Any) -> None:
+        """Set the Grafeo database instance."""
+        self._grafeo_db = value
+
+    @observe("_execute_query")
+    def _on_execute_query(self, change: dict) -> None:
+        """Handle query execution trigger from JavaScript."""
+        if change["new"] == 0:
+            return  # Skip initial value
+        if self.database_backend == "grafeo" and self._grafeo_db is not None:
+            self._execute_grafeo_query()
+
+    def _execute_grafeo_query(self) -> None:
+        """Execute query against Grafeo database."""
+        try:
+            self.query_running = True
+            self.query_error = ""
+            result = self._grafeo_db.execute(self.query)
+            nodes, edges = self._process_grafeo_result(result)
+            self.nodes = nodes
+            self.edges = edges
+        except Exception as e:
+            self.query_error = str(e)
+        finally:
+            self.query_running = False
+
+    def _process_grafeo_result(self, result: Any) -> tuple[list[dict], list[dict]]:
+        """Process Grafeo query results into nodes and edges."""
+        nodes: dict[str, dict] = {}
+        edges: list[dict] = []
+
+        # Handle result as iterable of records
+        records = list(result) if hasattr(result, "__iter__") else [result]
+
+        for record in records:
+            # Try to extract items from record
+            if hasattr(record, "items"):
+                items = record.items() if callable(record.items) else record.items
+            elif hasattr(record, "data"):
+                items = record.data().items()
+            elif isinstance(record, dict):
+                items = record.items()
+            else:
+                continue
+
+            for key, value in items:
+                if _is_node(value):
+                    node_id = _get_node_id(value)
+                    if node_id not in nodes:
+                        nodes[node_id] = _node_to_dict(value)
+                elif _is_relationship(value):
+                    edges.append(_relationship_to_dict(value))
+
+        return list(nodes.values()), edges
 
     @classmethod
     def from_dict(cls, data: dict[str, Any], **kwargs: Any) -> Graph: