New hotbar and bug fixing (#22)

* Initial deployment graph app (#8) * removed unnused imports * fixed spell errors on README * searchbar with logo and footer v1.0 * aligned logo with search buttons and minor styling fixes * changed analyze text, added icons to the buttons and text to footer * fixed footer margins * removed unused imports and comments unused variables * Feature/landing page (#5) * a * removed unused imports and comments unused variables * Fix everything * removed unused imports and comments unused variables * Initial deploy of graph app (#2) * removed unnused imports * fixed spell errors on README * searchbar with logo and footer v1.0 * aligned logo with search buttons and minor styling fixes * changed analyze text, added icons to the buttons and text to footer * fixed footer margins * removed unused imports and comments unused variables * removed unused imports and comments unused variables * add github action to deploy on pull request * fixed github actions to deploy app to firebase * ignore -.firebase directory --------- Co-authored-by: Pedro Ribeiro <[email protected]> * Initial deployment graph app (#7) * a * removed unused imports and comments unused variables * Fix everything * removed unused imports and comments unused variables * Initial deploy of graph app (#2) * removed unnused imports * fixed spell errors on README * searchbar with logo and footer v1.0 * aligned logo with search buttons and minor styling fixes * changed analyze text, added icons to the buttons and text to footer * fixed footer margins * removed unused imports and comments unused variables * removed unused imports and comments unused variables * add github action to deploy on pull request * fixed github actions to deploy app to firebase * ignore -.firebase directory * Revert "Initial deploy of graph app" (#6) --------- Co-authored-by: Pedro Ribeiro <[email protected]> --------- Co-authored-by: Pedro Ribeiro <[email protected]> * added google analytics to firebase configuration * new google analytics event on search address * ignores .env.development and .env.production * ignores .env.developement and .env.prod * configured github action to deploy when PR merged into main and to deploy to temporary URL when PR is created * add comments to github actions files * set an expiration period for temporary url and fixed projectId * new github action to deploy on merge to development environment * rename github action file * fixed pre build command issue * added new comment to github actions files * add firebase.json file * added env variables to github actions script * add echo command to debug * removed echo command from github action * Code Organization, New Features, Bug Fixing (#14) * Add link and layout * Update Hotbar.tsx --------- Co-authored-by: Pedro Ribeiro <[email protected]>
WardAnalytics · Jan 15, 2024 · 6a89337 · 6a89337
1 parent 920dc76
commit 6a89337
Show file tree

Hide file tree

Showing 8 changed files with 345 additions and 110 deletions.
diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
diff --git a/src/components/Graph/Hotbar/Hotbar.tsx b/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;
diff --git a/src/components/Graph/Hotbar/index.tsx b/src/components/Graph/Hotbar/index.tsx
@@ -0,0 +1,3 @@
+import Hotbar from "./Hotbar";
+
+export default Hotbar;
diff --git a/src/components/Graph/LandingPage/LandingPage.tsx b/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>

diff --git a/src/components/Graph/TransactionTooltip.tsx b/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>

diff --git a/src/components/Graph/custom_elements/nodes/AddressNode/AddressNode/AddressNode.tsx b/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

diff --git a/src/components/Graph/graph_calculations.tsx b/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,
       };
     }
   });

diff --git a/src/templates/GraphTemplate.tsx b/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>
   );