Code Organization, New Features, Bug Fixing (#14)

* Add link and layout

* Update Hotbar.tsx

src/components/Graph/Hotbar/Hotbar.tsx

@@ -0,0 +1,48 @@
+import { FC, useContext } from "react";
+import { RectangleGroupIcon, ShareIcon } from "@heroicons/react/24/solid";
+
+import { GraphContext } from "../Graph";
+
+interface HotbarButton {
+  onClick?: () => void;
+  Icon: any;
+  name: string;
+}
+
+const Hotbar: FC = () => {
+  const { doLayout, copyLink } = useContext(GraphContext);
+
+  const Buttons: HotbarButton[] = [
+    {
+      Icon: RectangleGroupIcon,
+      name: "Organize Layout",
+      onClick: doLayout,
+    },
+    {
+      Icon: ShareIcon,
+      name: "Copy Link",
+      onClick: copyLink,
+    },
+  ];
+
+  return (
+    <div className="mb-16 flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
+      {Buttons.map((button) => {
+        return (
+          <button
+            className="group flex flex-row items-center"
+            key={button.name}
+            onClick={button.onClick}
+          >
+            <button.Icon className="h-10 w-10 rounded-lg p-1 text-blue-100 transition-all duration-200 hover:bg-gray-700 hover:text-blue-300" />
+            <h1 className="absolute ml-[3.25rem] mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-blue-300 opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
+              {button.name}
+            </h1>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Hotbar;

src/components/Graph/Hotbar/index.tsx

@@ -0,0 +1,3 @@
+import Hotbar from "./Hotbar";
+
+export default Hotbar;

src/components/Graph/LandingPage/LandingPage.tsx

@@ -4,16 +4,27 @@ import { FC } from "react";
 import logo from "../../../assets/ward-logo-blue-full.svg";
 import Searchbar from "./SearchBar";
 
+// TODO - Fill this with real juicy addressess
+const PossibleAddresses: string[] = [];
+
 interface LandingPageProps {
   setSearchedAddress: (address: string) => void;
 }
 
 const LandingPage: FC<LandingPageProps> = ({ setSearchedAddress }) => {
+  function selectRandomAddress() {
+    const randomIndex = Math.floor(Math.random() * PossibleAddresses.length);
+    setSearchedAddress(PossibleAddresses[randomIndex]);
+  }
+
   return (
     <div className="flex max-w-screen-sm flex-col items-center gap-y-10">
       <img src={logo} alt="Ward Logo" className="w-2/3" />
       <Searchbar className="w-full" onSearchAddress={setSearchedAddress} />
-      <h3 className="flex flex-row items-center gap-x-2 text-sm text-blue-500">
+      <h3
+        className="flex cursor-pointer flex-row items-center gap-x-2 text-sm text-blue-500"
+        onClick={selectRandomAddress}
+      >
         <SparklesIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
         I'm feeling lucky
       </h3>

src/components/Graph/TransactionTooltip.tsx

@@ -31,7 +31,7 @@ const TransactionTooltip: FC<TransactionTooltipProps> = ({
       </div>
 
       <h1 className="flex w-full flex-row justify-center gap-x-1 pt-1 text-center text-xs font-medium text-gray-400">
-        Click edge to <h1 className="font-bold text-gray-500">toggle</h1>
+        Click edge to <a className="font-bold text-gray-500">toggle</a>
         <EyeSlashIcon className="mt-0.5 inline-block h-4 w-4 text-gray-500" />
       </h1>
     </div>

src/components/Graph/custom_elements/nodes/AddressNode/AddressNode/AddressNode.tsx

@@ -120,25 +120,29 @@ const AddressNode: FC<AddressNodeProps> = ({ data: { address } }) => {
         position={Position.Left}
         className="mb-2 opacity-0"
         id="a"
+        isConnectable={false}
       />
       <Handle
         type="source"
         position={Position.Right}
         className="mb-2 opacity-0"
         id="a"
+        isConnectable={false}
       />
       {/* Handle B - The edge flows from the right of a node to the left of another */}
       <Handle
         type="target"
         position={Position.Right}
         className="mt-2 opacity-0"
         id="b"
+        isConnectable={false}
       />
       <Handle
         type="source"
         position={Position.Left}
         className="mt-2 opacity-0"
         id="b"
+        isConnectable={false}
       />
 
       <span

src/components/Graph/graph_calculations.tsx

@@ -1,10 +1,14 @@
 import { Edge, Node, XYPosition } from "reactflow";
-import { TransfershipEdgeStates, createTransfershipEdge } from "./custom_elements/edges/TransfershipEdge";
+import {
+  TransfershipEdgeStates,
+  createTransfershipEdge,
+} from "./custom_elements/edges/TransfershipEdge";
 import {
   AddressNodeState,
   createAddressNode,
 } from "./custom_elements/nodes/AddressNode";
 
+import Dagre from "@dagrejs/dagre";
 
 // How much distance there should be between two nodes when calculating new address nodes positions
 const INTERSECTING_NODE_X_OFFSET = 300;
@@ -263,27 +267,47 @@ export function calculateNewAddressPath(
   return { nodes: nodesList, edges: edgesList, finalNode };
 }
 
-/** Calculates the new address to focus on and de-focus the rest.
- * @param nodes the list of nodes
- * @param address the address to focus on
- * @returns the new list of nodes
+/** Calculates the layout of the graph using dagre.
+ * @param dagreGraph The dagre graph object to use. Already setup by default
+ * @param nodes Nodes to take into account
+ * @param edges Edges to take into account
+ * @param direction The direction of the graph
+ * @returns The new lists of nodes and edges
  */
 
-export function calculatedNewFocusedAddress(
+export function calculateLayoutedElements(
   nodes: Node[],
-  address: string,
+  edges: Edge[],
+  direction = "LR",
 ): Node[] {
-  // Iterate over all nodes and set them to MINIMIZED except the one we want to focus on
-  const newNodes = nodes.map((node) => {
-    if (node.id === address) {
-      return {
-        ...node,
-        data: { ...node.data, state: AddressNodeState.EXPANDED },
-      };
-    } else {
-      return {
-        ...node,
-        data: { ...node.data, state: AddressNodeState.MINIMIZED },
+  const dagreGraph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({
+    rankdir: direction,
+    ranksep: 100,
+    nodesep: 100,
+  });
+
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, {
+      width: node.width ? node.width : 200,
+      height: node.height ? node.height : 50,
+    });
+  });
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  Dagre.layout(dagreGraph);
+
+  const newNodes: Node[] = [...nodes];
+
+  dagreGraph.nodes().forEach((nodeId) => {
+    const node = newNodes.find((n) => n.id === nodeId);
+    if (node) {
+      node.position = {
+        x: dagreGraph.node(nodeId).x,
+        y: dagreGraph.node(nodeId).y,
       };
     }
   });

src/templates/GraphTemplate.tsx

@@ -3,7 +3,7 @@ import Graph from "../components/Graph";
 
 const GraphTemplate: FC = () => {
   return (
-    <div className="flex h-screen flex-col">
+    <div className="h-screen w-screen">
       <Graph />
     </div>
   );