Allow images in tables.

examples/Image table.lynxkite.json

@@ -0,0 +1,132 @@
+{
+  "edges": [
+    {
+      "id": "Example image table 1 View tables 1",
+      "source": "Example image table 1",
+      "sourceHandle": "output",
+      "target": "View tables 1",
+      "targetHandle": "bundle"
+    }
+  ],
+  "env": "LynxKite Graph Analytics",
+  "nodes": [
+    {
+      "data": {
+        "display": null,
+        "error": null,
+        "input_metadata": [],
+        "meta": {
+          "color": "orange",
+          "inputs": [],
+          "name": "Example image table",
+          "outputs": [
+            {
+              "name": "output",
+              "position": "right",
+              "type": {
+                "type": "None"
+              }
+            }
+          ],
+          "params": [],
+          "type": "basic"
+        },
+        "params": {},
+        "status": "done",
+        "title": "Example image table"
+      },
+      "dragHandle": ".bg-primary",
+      "height": 200.0,
+      "id": "Example image table 1",
+      "position": {
+        "x": 450.0,
+        "y": 165.0
+      },
+      "type": "basic",
+      "width": 200.0
+    },
+    {
+      "data": {
+        "display": {
+          "dataframes": {
+            "df": {
+              "columns": [
+                "names",
+                "images"
+              ],
+              "data": [
+                [
+                  "svg",
+                  "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" enable-background=\"new 0 0 64 64\"><path d=\"M56 2 18.8 42.909 8 34.729 2 34.729 18.8 62 62 2z\"/></svg>"
+                ],
+                [
+                  "data",
+                  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Ik01NiAyIDE4LjggNDIuOTA5IDggMzQuNzI5IDIgMzQuNzI5IDE4LjggNjIgNjIgMnoiLz48L3N2Zz4="
+                ],
+                [
+                  "http",
+                  "https://upload.wikimedia.org/wikipedia/commons/2/2e/Emojione_BW_2714.svg"
+                ]
+              ]
+            }
+          },
+          "other": {},
+          "relations": []
+        },
+        "error": null,
+        "input_metadata": [
+          {
+            "dataframes": {
+              "df": {
+                "columns": [
+                  "images",
+                  "names"
+                ]
+              }
+            },
+            "other": {},
+            "relations": []
+          }
+        ],
+        "meta": {
+          "color": "orange",
+          "inputs": [
+            {
+              "name": "bundle",
+              "position": "left",
+              "type": {
+                "type": "<class 'lynxkite_graph_analytics.core.Bundle'>"
+              }
+            }
+          ],
+          "name": "View tables",
+          "outputs": [],
+          "params": [
+            {
+              "default": 100,
+              "name": "limit",
+              "type": {
+                "type": "<class 'int'>"
+              }
+            }
+          ],
+          "type": "table_view"
+        },
+        "params": {
+          "limit": 100.0
+        },
+        "status": "done",
+        "title": "View tables"
+      },
+      "dragHandle": ".bg-primary",
+      "height": 200.0,
+      "id": "View tables 1",
+      "position": {
+        "x": 840.0,
+        "y": 135.0
+      },
+      "type": "table_view",
+      "width": 200.0
+    }
+  ]
+}

examples/make_image_table.py

@@ -0,0 +1,11 @@
+from lynxkite.core.ops import op
+import pandas as pd
+import base64
+
+
+@op("LynxKite Graph Analytics", "Example image table")
+def make_image_table():
+    svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="M56 2 18.8 42.909 8 34.729 2 34.729 18.8 62 62 2z"/></svg>'
+    data = "data:image/svg+xml;base64," + base64.b64encode(svg.encode("utf-8")).decode("utf-8")
+    http = "https://upload.wikimedia.org/wikipedia/commons/2/2e/Emojione_BW_2714.svg"
+    return pd.DataFrame({"names": ["svg", "data", "http"], "images": [svg, data, http]})

lynxkite-app/web/src/index.css

@@ -274,6 +274,16 @@ body {
     padding: 5px 10px;
     width: 100%;
   }
+
+  .table-viewer {
+    td {
+      padding: 5px 10px;
+    }
+
+    .image-in-table {
+      max-height: 50px;
+    }
+  }
 }
 
 .params-expander {

lynxkite-app/web/src/workspace/nodes/Table.tsx

@@ -1,6 +1,21 @@
+function Cell({ value }: { value: any }) {
+  if (typeof value === "string") {
+    if (value.startsWith("https://") || value.startsWith("data:")) {
+      return <img className="image-in-table" src={value} alt={value} />;
+    }
+    if (value.startsWith("<svg")) {
+      // A data URL is safer than just dropping it in the DOM.
+      const data = `data:image/svg+xml;base64,${btoa(value)}`;
+      return <img className="image-in-table" src={data} alt={value} />;
+    }
+    return <>{value}</>;
+  }
+  return <>{JSON.stringify(value)}</>;
+}
+
 export default function Table(props: any) {
   return (
-    <table id={props.name || "table"}>
+    <table className="table-viewer">
       <thead>
         <tr>
           {props.columns.map((column: string) => (
@@ -12,7 +27,9 @@ export default function Table(props: any) {
         {props.data.map((row: { [column: string]: any }, i: number) => (
           <tr key={`row-${i}`}>
             {props.columns.map((_column: string, j: number) => (
-              <td key={`cell ${i}, ${j}`}>{JSON.stringify(row[j])}</td>
+              <td key={`cell ${i}, ${j}`}>
+                <Cell value={row[j]} />
+              </td>
             ))}
           </tr>
         ))}