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

anywidget_graph/ui/properties.js

@@ -0,0 +1,137 @@
+/**
+ * Properties panel component for displaying selected node/edge details.
+ */
+import { ICONS } from "./icons.js";
+
+/**
+ * Create the properties panel.
+ */
+export 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) {
+      renderNodeProperties(content, selectedNode);
+    }
+
+    if (selectedEdge) {
+      renderEdgeProperties(content, selectedEdge);
+    }
+  }
+
+  model.on("change:selected_node", renderProperties);
+  model.on("change:selected_edge", renderProperties);
+  renderProperties();
+
+  panel.appendChild(content);
+  return panel;
+}
+
+/**
+ * Render node properties.
+ */
+function renderNodeProperties(content, node) {
+  // 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">${node.id || "N/A"}</span>`;
+  content.appendChild(idItem);
+
+  // Labels
+  if (node.labels && node.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">${node.labels.map((l) => `<span class="awg-label-tag">${l}</span>`).join("")}</span>`;
+    content.appendChild(labelsItem);
+  }
+
+  // Other properties
+  Object.entries(node).forEach(([key, value]) => {
+    if (["id", "labels", "label", "x", "y", "size", "color"].includes(key)) 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);
+  });
+}
+
+/**
+ * Render edge properties.
+ */
+function renderEdgeProperties(content, edge) {
+  // 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 (edge.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">${edge.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">${edge.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">${edge.target}</span>`;
+  content.appendChild(targetItem);
+
+  // Other properties
+  Object.entries(edge).forEach(([key, value]) => {
+    if (["source", "target", "label", "size", "color"].includes(key)) 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);
+  });
+}
+
+/**
+ * Toggle properties panel visibility.
+ */
+export function togglePropertiesPanel(wrapper) {
+  const panel = wrapper.querySelector(".awg-properties-panel");
+  if (panel) {
+    panel.classList.toggle("awg-panel-open");
+  }
+}

anywidget_graph/ui/schema.js

@@ -0,0 +1,178 @@
+/**
+ * Schema browser sidebar component.
+ */
+import { ICONS } from "./icons.js";
+import { fetchSchema } from "./neo4j.js";
+
+/**
+ * Create the schema sidebar panel.
+ */
+export function createSchemaPanel(model, onExecuteQuery) {
+  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, onExecuteQuery);
+        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, onExecuteQuery);
+        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;
+}
+
+/**
+ * Create a schema item (node label or relationship type).
+ */
+function createSchemaItem(name, properties, type, model, onExecuteQuery) {
+  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();
+    onExecuteQuery();
+  });
+
+  // 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();
+        onExecuteQuery();
+      });
+
+      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;
+}
+
+/**
+ * Toggle schema panel visibility.
+ */
+export function toggleSchemaPanel(wrapper) {
+  const panel = wrapper.querySelector(".awg-schema-panel");
+  if (panel) {
+    panel.classList.toggle("awg-panel-open");
+  }
+}

anywidget_graph/ui/settings.js

@@ -0,0 +1,299 @@
+/**
+ * Settings panel component.
+ */
+import { ICONS } from "./icons.js";
+import * as neo4jBackend from "./neo4j.js";
+
+// Configuration constants
+const BACKENDS = [
+  { id: "neo4j", name: "Neo4j" },
+  { id: "grafeo", name: "Grafeo" },
+];
+
+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 },
+];
+
+/**
+ * Create the settings panel.
+ */
+export 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 neo4jBackend.disconnect(model);
+    } else {
+      await neo4jBackend.connect(
+        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;
+}
+
+/**
+ * Create a form group with label and input.
+ */
+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;
+}
+
+/**
+ * Toggle settings panel visibility.
+ */
+export function toggleSettingsPanel(wrapper) {
+  const panel = wrapper.querySelector(".awg-settings-panel");
+  if (panel) {
+    panel.classList.toggle("awg-panel-open");
+  }
+}
+
+/**
+ * Update the status dot appearance.
+ */
+export function updateStatusDot(dot, status) {
+  dot.className = "awg-status-dot awg-status-" + status;
+}