Working generator

app/routes/home.tsx

@@ -31,22 +31,26 @@ export default function Home() {
       const Plotly = await import("plotly.js-dist-min");
       if (cancelled) return;
 
+      const xVals = rows.map((r) => Number(r[x]));
+      const yVals = rows.map((r) => Number(r[y]));
+      const zVals = rows.map((r) => Number(r[z]));
+
       const trace = {
-        type: "scatter3d",
+        type: "scatter3d" as const,
-        mode: "markers",
+        mode: "markers" as const,
-        x: rows.map(r => r[x]),
+        x: xVals,
-        y: rows.map(r => r[y]),
+        y: yVals,
-        z: rows.map(r => r[z]),
+        z: zVals,
         marker: {
           size: 4,
-          color: rows.map(r => r[z]),
+          color: zVals,
-          colorscale: "Viridis",
+          colorscale: "Viridis" as const,
         },
       };
 
       Plotly.newPlot(
         plotRef.current!,
-        [trace as any],
+        [trace],
         {
           paper_bgcolor: "#0b0d12",
           plot_bgcolor: "#0b0d12",
@@ -74,9 +78,29 @@ export default function Home() {
       dynamicTyping: true,
       skipEmptyLines: true,
       complete: (res) => {
-        const data = res.data as Row[];
+        const data = (res.data as Row[]).filter(
+          (row) => row && Object.keys(row).length > 0
+        );
+        if (!data.length) {
+          setRows([]);
+          setColumns([]);
+          setX("");
+          setY("");
+          setZ("");
+          return;
+        }
+        const cols = Object.keys(data[0]);
         setRows(data);
-        setColumns(Object.keys(data[0]));
+        setColumns(cols);
+        if (cols.length >= 3) {
+          setX(cols[0]);
+          setY(cols[1]);
+          setZ(cols[2]);
+        } else {
+          setX("");
+          setY("");
+          setZ("");
+        }
       },
     });
   }
@@ -126,8 +150,10 @@ export default function Home() {
             onChange={(e) => setX(e.target.value)}
           >
             <option value="">—</option>
-            {columns.map(c => (
+            {columns.map((c) => (
-              <option key={c}>{c}</option>
+              <option key={c} value={c}>
+                {c}
+              </option>
             ))}
           </select>
         </Control>
@@ -139,8 +165,10 @@ export default function Home() {
             onChange={(e) => setY(e.target.value)}
           >
             <option value="">—</option>
-            {columns.map(c => (
+            {columns.map((c) => (
-              <option key={c}>{c}</option>
+              <option key={c} value={c}>
+                {c}
+              </option>
             ))}
           </select>
         </Control>
@@ -152,8 +180,10 @@ export default function Home() {
             onChange={(e) => setZ(e.target.value)}
           >
             <option value="">—</option>
-            {columns.map(c => (
+            {columns.map((c) => (
-              <option key={c}>{c}</option>
+              <option key={c} value={c}>
+                {c}
+              </option>
             ))}
           </select>
         </Control>