Live dashboard implemented using Dash and Cytoscape.js

add-random-dash.ipynb

@@ -0,0 +1,69 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "746026fa-e903-43e6-af4c-847f54cbe96c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import cubed\n",
+    "import cubed.array_api as xp\n",
+    "import cubed.random\n",
+    "from cubed.diagnostics.dash import Dashboard"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d43ee666-6c50-461c-8723-e2def4bc04fe",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "a = cubed.random.random((25000, 25000), chunks=(5000, 5000))\n",
+    "b = cubed.random.random((25000, 25000), chunks=(5000, 5000))\n",
+    "c = xp.add(a, b)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0d130e71-d4fa-454e-b508-ccc6f7179ecb",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "with Dashboard(debug=True):\n",
+    "    cubed.to_zarr(c, store=None, optimize_graph=False)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2d8de071-1d68-4a7f-9ea0-c0c748f5e274",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.11"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

cubed/diagnostics/assets/cubed-dashboard.css

@@ -0,0 +1,53 @@
+html {
+  font-family: "Helvetica", "Arial", sans-serif;
+  font-size: 12px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  table-layout: fixed;
+  width: 95%;
+  border-collapse: collapse;
+  white-space: nowrap;
+}
+
+th {
+  text-align: left;
+  border-bottom: 1px solid #999999;
+}
+
+td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+svg {
+  /* Limit height of array image */
+  max-height: 300px;
+}
+
+#info-container {
+  width: 300px;
+  height: 100vh;
+  float: left;
+  background-color: #f7fafd;
+}
+
+.info-panel {
+  margin-left: 5px;
+}
+
+#graph-container {
+  margin-left: 300px;
+}
+
+#cytoscape-controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}