diff --git a/d3-graph/src/App.js b/d3-graph/src/App.js
index b4b47b0..3e4d422 100644
--- a/d3-graph/src/App.js
+++ b/d3-graph/src/App.js
@@ -1,8 +1,7 @@
-import logo from './logo.svg';
-import './App.css';
+import { client, useConfig, useElementData } from '@sigmacomputing/plugin';
 import * as d3 from 'd3';
-import {client, useConfig, useElementData} from '@sigmacomputing/plugin';
 import { useEffect, useRef } from 'react';
+import './App.css';
 
 client.config.configureEditorPanel([
   { name: "vertices", type: "element" },
@@ -16,54 +15,54 @@ client.config.configureEditorPanel([
 const width = 600;
 const height = 600;
 function renderGraph(data, ref) {
-  if (!ref.current) return null;
+  if (!ref.current) return 'null';
   d3.selectAll('svg > *').remove();
   const links = data.links.map(d => Object.create(d));
   const nodes = data.nodes.map(d => Object.create(d));
 
   const simulation = d3.forceSimulation(nodes)
-      .force("link", d3.forceLink(links).id(d => d.id))
-      .force("charge", d3.forceManyBody())
-      .force("center", d3.forceCenter(width / 2, height / 2));
+    .force("link", d3.forceLink(links).id(d => d.id))
+    .force("charge", d3.forceManyBody())
+    .force("center", d3.forceCenter(width / 2, height / 2));
 
   const svg = d3.select(ref.current)
-      .attr("width", "100vw")
-      .attr("height", "100vh")
-      .attr("preserveAspectRatio", "xMidYMid meet")
-      .attr("viewBox", [0, 0, width, height]);
+    .attr("width", "100vw")
+    .attr("height", "100vh")
+    .attr("preserveAspectRatio", "xMidYMid meet")
+    .attr("viewBox", [0, 0, width, height]);
 
   const link = svg.append("g")
-      .attr("stroke", "#999")
-      .attr("stroke-opacity", 0.6)
+    .attr("stroke", "#999")
+    .attr("stroke-opacity", 0.6)
     .selectAll("line")
     .data(links)
     .join("line")
-      .attr("stroke-width", d => Math.sqrt(d.value));
+    .attr("stroke-width", d => Math.sqrt(d.value));
 
   const node = svg.append("g")
-      .attr("stroke", "#fff")
-      .attr("stroke-width", 1.5)
+    .attr("stroke", "#fff")
+    .attr("stroke-width", 1.5)
     .selectAll("circle")
     .data(nodes)
     .join("circle")
-      .attr("r", 5)
-      .attr("fill", color)
-      .call(drag(simulation));
+    .attr("r", 5)
+    .attr("fill", color)
+    .call(drag(simulation));
 
   node.append("title")
-      .text(d => d.id);
+    .text(d => d.id);
   node.append("text").text(d => d.id);
 
   simulation.on("tick", () => {
     link
-        .attr("x1", d => d.source.x)
-        .attr("y1", d => d.source.y)
-        .attr("x2", d => d.target.x)
-        .attr("y2", d => d.target.y);
+      .attr("x1", d => d.source.x)
+      .attr("y1", d => d.source.y)
+      .attr("x2", d => d.target.x)
+      .attr("y2", d => d.target.y);
 
     node
-        .attr("cx", d => d.x)
-        .attr("cy", d => d.y);
+      .attr("cx", d => d.x)
+      .attr("cy", d => d.y);
   });
 
   return simulation.stop;
@@ -75,32 +74,32 @@ const color = () => {
 }
 
 const drag = simulation => {
-  
+
   function dragstarted(event) {
     if (!event.active) simulation.alphaTarget(0.3).restart();
     event.subject.fx = event.subject.x;
     event.subject.fy = event.subject.y;
   }
-  
+
   function dragged(event) {
     event.subject.fx = event.x;
     event.subject.fy = event.y;
   }
-  
+
   function dragended(event) {
     if (!event.active) simulation.alphaTarget(0);
     event.subject.fx = null;
     event.subject.fy = null;
   }
-  
+
   return d3.drag()
-      .on("start", dragstarted)
-      .on("drag", dragged)
-      .on("end", dragended);
+    .on("start", dragstarted)
+    .on("drag", dragged)
+    .on("end", dragended);
 }
 
 function transform(config, vertices, edges) {
-  const {id, to, from, value} = config;
+  const { id, to, from, value } = config;
   console.log(arguments);
   if (!id || !to || !from || !value || !vertices?.[id]?.length || !edges?.[to]?.length || !edges[value]?.length) return { nodes: [], links: [] };
   const transformed = {