message: tree is vertical, nodes with atoms/selectors are different colors than other nodes in tree
diff: @@ -20,7 +20,7 @@ function AtomComponentVisual({currentSnapshot}) {
  const height = 1100;
  // this state allows the canvas to stay at the zoom level on multiple re-renders
  - const [{x, y, k}, setZoomState] = useState({});
  + const [{ x, y, k }, setZoomState] = useState({ x: 0, y: 0, k: 0 });
  useEffect(() => {
  setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
  @@ -66,14 +66,15 @@ function AtomComponentVisual({currentSnapshot}) {
  .attr(
  'd',
  d3
  - .linkHorizontal()
  - .x(d => d.y)
  - .y(d => d.x),
  + .linkVertical()
  + .x(d => d.x)
  + .y(d => d.y),
  );
  // returns a flat array of objects containing all the nodes and their information
  // renders nodes onto the canvas
  let nodes = hierarchyNodes.descendants();
  + console.log(nodes, 'nodes ++ HERE ME ++ __ 00')
  // const node is used to create all the nodes
  // this segment places all the nodes on the canvas
  @@ -84,11 +85,12 @@ function AtomComponentVisual({currentSnapshot}) {
  .selectAll('g')
  .data(nodes)
  .join('g')
  - .attr('transform', d => `translate(${d.y}, ${d.x})`)
  + .attr('transform', d => `translate(${d.x}, ${d.y})`)
  .attr('class', 'atomNodes');
  // for each node that got created, append a circle element
  - node.append('circle').attr('fill', '#c300ff').attr('r', 50);
  +
  + node.append('circle').attr('fill', colorComponents).attr('r', 50);
  // for each node that got created, append a text element that displays the name of the node
  node
  @@ -167,6 +169,14 @@ function AtomComponentVisual({currentSnapshot}) {
  function zoomed() {
  g.attr('transform', d3.event.transform);
  }
  +
  + function colorComponents(d) {
  + if (d.data.recoilNodes){
  + return '#F96332';
  + }
  + return 'gray';
  + }
  +
  });
  return (
  