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]>

.github/workflows/firebase-hosting-merge.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: yarn build
+      - run: yarn install && yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/firebase-hosting-pull-request.yml

@@ -2,16 +2,16 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on PR
-'on': pull_request
+"on": pull_request
 jobs:
   build_and_preview:
-    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    if: "${{ github.event.pull_request.head.repo.full_name == github.repository }}"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: yarn build
+      - run: yarn install && yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_GRAPHAPP_BCA04 }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_GRAPHAPP_BCA04 }}"
           projectId: graphapp-bca04

.gitignore

@@ -19,6 +19,7 @@ build
 .yarn/install-state.gz
 
 # Firebase
+.firebase/*
 firebase.json
 .firebaserc
 

package.json

@@ -25,8 +25,8 @@
     "orval": "^6.23.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
     "react-icons": "^5.0.1",
+    "react-draggable": "^4.4.6",
     "react-query": "^3.39.3",
     "reactflow": "^11.10.1",
     "tailwind-merge": "^2.2.0",
@@ -61,4 +61,4 @@
       "prettier-plugin-tailwindcss"
     ]
   }
-}
+}

src/components/Graph/AnalysisWindow/AnalysisWindow.tsx

@@ -1,6 +1,5 @@
 import { FC, createContext, useRef } from "react";
 
-
 import Draggable from "react-draggable";
 import Content from "./Content";
 import Header from "./Header";

src/components/Graph/AnalysisWindow/Content/tabs/DirectExposure.tsx

@@ -1,4 +1,4 @@
-import { useContext, FC } from "react";
+import { FC, useContext } from "react";
 
 import ExposureTab from "./ExposureTab";
 

src/components/Graph/AnalysisWindow/Content/tabs/ExposureTab/EntityView.tsx

@@ -1,4 +1,3 @@
-import { FC, useContext, useState, useMemo } from "react";
 import { Transition } from "@headlessui/react";
 import { HashtagIcon } from "@heroicons/react/20/solid";
 import { ShareIcon } from "@heroicons/react/24/solid";
@@ -13,6 +12,7 @@ import { GraphContext } from "../../../../Graph";
 import { ExposureTabContext } from "./ExposureTabGeneric";
 
 import Pagination from "../../../../../common/Pagination";
+import { FC, useContext, useMemo, useState } from "react";
 
 // Address Row _________________________________________________________________
 

src/components/Graph/Graph.tsx

@@ -5,7 +5,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 import ReactFlow, {
   Background,
@@ -19,6 +19,7 @@ import ReactFlow, {
   useNodesState,
   useOnSelectionChange
 } from "reactflow";
+import LandingPage from "./LandingPage/LandingPage";
 
 import {
   AddressNode,
@@ -39,6 +40,7 @@ import {
   convertNodeListToRecord,
 } from "./graph_calculations";
 
+import { Transition } from "@headlessui/react";
 import "reactflow/dist/style.css";
 import { AddressAnalysis } from "../../api/model";
 import DraggableWindow from "./AnalysisWindow/AnalysisWindow";
@@ -78,11 +80,11 @@ export const GraphContext = createContext<GraphContextProps>(
 
 /* The ReactFlowProvider must be above the GraphProvided component in the tree for ReactFlow's internal context to work
    Reference: https://reactflow.dev/api-reference/react-flow-provider#notes */
-interface GraphProps {
+interface GraphProviderProps {
   initialAddresses: string[];
 }
 
-const Graph: FC<GraphProps> = ({ initialAddresses }) => {
+const GraphProvider: FC<GraphProviderProps> = ({ initialAddresses }) => {
   // Grab all initial addresses and create nodes for them
   const initialNodes = useMemo(() => {
     const nodes: Node[] = [];
@@ -227,17 +229,6 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
 
   // Node & Edge Manipulation Functions ---
 
-  /** Adds a node to the graph. If the node already exists, it is not added.
-   * @param newNode the node to add
-   */
-  /* function addNewNode(newNode: Node) {
-    // If node with same id already exists, don't add it
-    if (nodes.find((node) => node.id === newNode.id)) {
-      return;
-    }
-    setNodes((nodes) => [...nodes, newNode]);
-  } */
-
   /** Deletes multiple nodes and all edges connected to them
    * @param ids the ids of the nodes to delete
    */
@@ -293,17 +284,14 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
     }
   }
 
-  function addAddressPaths(
-    paths: string[][],
-    incoming: boolean,
-    volume: number,
-  ) {
+  function addAddressPaths(paths: string[][], incoming: boolean) {
     // 1 - Calculate result of adding path to the graph
-    const {
-      nodes: newNodes,
-      edges: newEdges,
-      //finalNode,
-    } = calculateNewAddressPath(nodes, edges, paths, incoming, volume);
+    const { nodes: newNodes, edges: newEdges } = calculateNewAddressPath(
+      nodes,
+      edges,
+      paths,
+      incoming,
+    );
 
     // 2 - Calculate result of focusing on a node
     // const focusedNodes = calculatedNewFocusedAddress(newNodes, finalNode.id);
@@ -403,4 +391,34 @@ const GraphProvided: FC<GraphProvidedProps> = ({ initialNodes }) => {
   );
 };
 
+const Graph: FC = () => {
+  const [searchedAddress, setSearchedAddress] = useState<string | null>(null);
+
+  return (
+    <div className="overflow-hidden">
+      <Transition
+        show={searchedAddress === null}
+        appear={true}
+        leave="transition-all duration-500"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-50"
+        className="fixed flex h-full w-full flex-col items-center justify-center"
+      >
+        <LandingPage setSearchedAddress={setSearchedAddress} />
+      </Transition>
+      <Transition
+        show={searchedAddress !== null}
+        appear={true}
+        enter="transition-all duration-500 delay-500"
+        enterFrom="opacity-0 scale-150"
+        enterTo="opacity-100 scale-100"
+      >
+        {searchedAddress && (
+          <GraphProvider initialAddresses={[searchedAddress]} />
+        )}
+      </Transition>
+    </div>
+  );
+};
+
 export default Graph;

src/components/Graph/LandingPage/LandingPage.tsx

@@ -1,27 +1,24 @@
 import { SparklesIcon } from "@heroicons/react/20/solid";
 import { FC } from "react";
 
-import Searchbar from "./SearchBar";
 import logo from "../../../assets/ward-logo-blue-full.svg";
+import Searchbar from "./SearchBar";
 
 interface LandingPageProps {
   setSearchedAddress: (address: string) => void;
 }
 
 const LandingPage: FC<LandingPageProps> = ({ setSearchedAddress }) => {
   return (
-    <div className="flex h-screen flex-col justify-between overflow-hidden bg-main bg-cover bg-center bg-no-repeat">
-      <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">
-          <SparklesIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
-          I'm feeling lucky
-        </h3>
-      </div>
+    <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">
+        <SparklesIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
+        I'm feeling lucky
+      </h3>
     </div>
   );
 };
 
-
-export default LandingPage;
+export default LandingPage;

src/components/Graph/LandingPage/SearchBar.tsx

@@ -38,10 +38,6 @@ interface SearchbarProps {
 const Searchbar: FC<SearchbarProps> = ({ className, onSearchAddress }) => {
   const [query, setQuery] = useState<string>("");
 
-  /* const resetQuery = () => {
-    setQuery("");
-  }; */
-
   const isAddressValid = useMemo(() => isValidAddress(query), [query]);
 
   return (

src/components/Graph/custom_elements/edges/TransfershipEdge/TransfershipEdge.tsx

@@ -1,12 +1,9 @@
 import { FC, useContext } from "react";
-import {
-  EdgeProps,
-  getBezierPath
-} from "reactflow";
+import { EdgeProps, getBezierPath } from "reactflow";
 
+import CustomEdgePath from "../TransfershipEdge/CustomEdgePath";
+import TransfershipEdgeStates from "../TransfershipEdge/states";
 import { GraphContext } from "../../../Graph";
-import CustomEdgePath from "./CustomEdgePath";
-import TransfershipEdgeStates from "./states";
 
 const TransfershipEdge: FC<EdgeProps> = ({
   id,
@@ -19,12 +16,10 @@ const TransfershipEdge: FC<EdgeProps> = ({
   targetPosition,
   target,
   data,
-  //markerEnd,
 }: EdgeProps) => {
   // Whether the edge is hidden or revealded ------------------------------
 
   const {
-    //isAddressFocused,
     setEdgeState,
     getEdgeVolumeScale,
     getEdgeHandleID,
@@ -44,8 +39,6 @@ const TransfershipEdge: FC<EdgeProps> = ({
 
   // Pick a color and icon - Either it's infrared and can be revealed or it's gray and should be hidden
   const volume: number = data?.volume ?? 0;
-  /* const ColorInfo = ColorMap[isHidden ? Colors.RED : Colors.GRAY];
-  const Icon = isHidden ? PlusIcon : MinusIcon; */
 
   // Width starts at 1 and goes up to 9 based on the volume transfered
   const volumeScale: number = getEdgeVolumeScale(volume);

src/components/Graph/custom_elements/edges/TransfershipEdge/create.tsx

@@ -1,5 +1,5 @@
 import { Edge } from "reactflow";
-import TransfershipEdgeStates from "./states";
+import TransfershipEdgeStates from "../TransfershipEdge/states";
 
 export default function createTransfershipEdge(
   source: string,

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

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
 import { FC, useContext } from "react";
 
-import BlockExplorerAddressIcon from "../../../../../AnalysisWindow/Header/components/BlockExplorerAddressIcon"
+import BlockExplorerAddressIcon from "../../../../../AnalysisWindow/Header/components/BlockExplorerAddressIcon";
 import CopyToClipboardIcon from "../../../../../AnalysisWindow/Header/components/CopyToClipboardIcon";
 import LabelList from "../../../../../AnalysisWindow/Header/components/LabelList";
 import RiskIndicator from "../../../../../AnalysisWindow/Header/components/RiskIndicator";

src/components/Graph/graph_calculations.tsx

@@ -8,6 +8,7 @@ import {
   createAddressNode,
 } from "./custom_elements/nodes/AddressNode";
 
+
 // How much distance there should be between two nodes when calculating new address nodes positions
 const INTERSECTING_NODE_X_OFFSET = 300;
 const INTERSECTING_NODE_Y_OFFSET = 130;
@@ -165,9 +166,7 @@ export function calculateNewAddressPath(
   edges: Edge[],
   addresses: string[][],
   incoming: boolean,
-  volume: number,
 ): CalculateNewAddressPathsReturnType {
-  console.log(volume)
   /* Addresses are currently a list of parallel paths. We need to convert them to a list of 
   path positions, each having a list of addresses at that position. We also need to make 
   sure there are no duplicate addresses per path */

src/templates/GraphTemplate.tsx

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