recompile gql, update docs, add minor build improvements

Signed-off-by: shafeeshafee <[email protected]>

Author: shafeeshafee

app/layout.tsx

@@ -1,7 +1,7 @@
 import "@/styles/globals.css";
 import Footer from "@/components/layout/footer";
 import Header from "@/components/layout/header";
-import { GuacVizThemeContextProvider } from "@/store/themeContext";
+import { GuacVizThemeContextProvider } from "@/app/themeContext";
 
 export const metadata = {
   title: "GUAC Visualizer",

store/themeContext.tsx renamed to app/themeContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import ForceGraph, {
   LinkObject,
   ForceGraphMethods,
@@ -77,23 +77,6 @@ const ForceGraph2D: React.FC<ForceGraph2DWrapperProps & ResponsiveProps> = ({
 
   const fgRef = useRef<ForceGraphMethods>();
 
-  const centerGraph = () => {
-    if (fgRef.current && width > 0 && height > 0) {
-      fgRef.current.centerAt(width / 20, height / 10, 400);
-    }
-  };
-
-  useEffect(() => {
-    centerGraph();
-  }, [graphData, width, height]);
-
-  const handleClick = useCallback(
-    (node: NodeObject) => {
-      dataFetcher(node.id);
-    },
-    [dataFetcher]
-  );
-
   if (selectedNode) {
     const sn = graphData.nodes.find((node) => node.id === selectedNode.value);
     if (sn && fgRef.current) {

components/graph/ForceGraph2D.tsx

@@ -3,7 +3,7 @@
 import { useContext, useState } from "react";
 import Image from "next/image";
 import { MoonIcon, SunIcon, Bars3Icon } from "@heroicons/react/24/solid";
-import GuacVizThemeContext from "@/store/themeContext";
+import GuacVizThemeContext from "@/app/themeContext";
 import Link from "next/link";
 import packageJson from "../../package.json";
 
@@ -13,7 +13,7 @@ export default function Header() {
 
   function NavigationLinks() {
     return (
-      <>
+      <div className="flex flex-col md:flex-row">
         <a
           className="block py-1 text-sm text-gray-800 dark:text-stone-300 hover:bg-white dark:hover:bg-black rounded-xl p-3 my-2"
           href="https://github.com/guacsec/guac-visualizer"
@@ -34,12 +34,12 @@ export default function Header() {
         >
           Community
         </a>
-      </>
+      </div>
     );
   }
 
   return (
-    <>
+    <div>
       <div className="flex justify-between bg-stone-200 dark:bg-stone-800 text-zinc-600 px-4 md:px-8 py-4 items-center backdrop-blur-sm w-full font-mono transition-colors duration-500">
         <div className="flex items-center">
           <Link href="/">
@@ -94,6 +94,6 @@ export default function Header() {
           <NavigationLinks />
         </div>
       )}
-    </>
+    </div>
   );
 }

components/layout/header.tsx

@@ -47,7 +47,7 @@ const QueryCertifyVuln: React.FC = () => {
 
       setGraphData(firstResultId);
     }
-  }, [results]);
+  }, [setGraphData, results]);
 
   return (
     <div className="container mx-auto p-4">

components/queryvuln/queryVuln.tsx

@@ -7,8 +7,7 @@ the GUAC services. It acts as a way to visualize the software supply chain graph
 as well as a means to explore the supply chain, and prototype policies.
 
 Since the GUAC Visaulizer is still in an early experimental stage, it is likely
-that there may be some unexpected behavior or usage problems. For a more robust
-use of GUAC, we recommend using the [GraphQL interface directly](https://github.com/guacsec/guac/blob/main/demo/GraphQL.md).
+that there may be some unexpected behavior or usage problems. We recommend using the [GraphQL interface directly](https://github.com/guacsec/guac/blob/main/demo/GraphQL.md). Feedback is welcome as we continue to improve the visualizer!
 
 ## Requirements
 
@@ -22,83 +21,44 @@ use of GUAC, we recommend using the [GraphQL interface directly](https://github.
 To use the GUAC visualizer, you need to have the main GUAC server running. For more information on how to do this, click
 [here](https://docs.guac.sh/getting-started/).
 
-## Getting started
+## Step 1. Getting started
 
-If you already haven't, clone the GUAC visualizer repo. We highly suggest
-cloning it in the same path as you clone the main
-[GUAC repo](https://github.com/guacsec/guac).
+Get the
+[source code for guac-visualizer `v0.3.0` here:](https://github.com/guacsec/guac-visualizer/releases/tag/v0.3.0)
 
-```bash
-git clone [email protected]:guacsec/guac-visualizer.git
-```
-
-Change directories into the repo.
+`cd` into it:
 
 ```bash
 cd guac-visualizer
 ```
 
-All commands run throughout this guide should be in this working directory.
-
-## Running the visualizer from source
-
-Install the dependencies:
+## Step 2. Install dependencies
 
 ```bash
 yarn install
 ```
 
-The output should look like:
-
-````
-$ yarn install
-yarn install v1.22.19
-warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
-[1/4] 🔍  Resolving packages...
-[2/4] 🚚  Fetching packages...
-warning Pattern ["@apollo/client@latest"] is trying to unpack in the same destination "/Users/lumb/Library/Caches/Yarn/v6/npm-@apollo-client-3.7.12-9ddd355d0788374cdb900e5f40298b196176952b-integrity/node_modules/@apollo/client" as pattern ["@apollo/client@^3.7.10"]. This could result in non-deterministic behavior, skipping.
-[3/4] 🔗  Linking dependencies...
-warning "@graphql-codegen/cli > @graphql-tools/code-file-loader > @graphql-tools/graphql-tag-pluck > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
-warning " > @graphql-codegen/[email protected]" has unmet peer dependency "graphql-tag@^2.0.0".
-warning "cosmos-over-cytoscape > [email protected]" has unmet peer dependency "webpack@^5.20.0".
-warning " > [email protected]" has incorrect peer dependency "react@>=16.8.25 <=16.13.1".
-warning " > [email protected]" has incorrect peer dependency "react-dom@>=16.8.25 <= 16.13.1".
-warning " > react-paginated-list@```markdown
-1.1.6" has incorrect peer dependency "react-scripts@>=2.1.8 <=3.4.1".
-[4/4] 🔨  Building fresh packages...
-
-success Saved lockfile.
-✨  Done in 28.68s.
-````
-
-## Configuration
-
-By default, the GUAC Visualizer assumes that the GraphQL server is running on http://localhost:8080/query. However, you can optionally configure the visualizer to connect to a different GraphQL endpoint or to read from a `guac.yaml` config file from your curent working directory.
-
-## Running the visualizer locally:
+## Step 3. Run the visualizer locally:
 
 ```bash
 yarn dev
 ```
 
-The output should look like:
+You can then go to [localhost:3000](http://localhost:3000) in your browser to
+start using the visualizer.
 
 ```
-$ yarn dev
-yarn run v1.22.19
+...
+
 $ next dev
 ready - started server on 0.0.0.0:3000, url: http://localhost:3000
 info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
-```
 
-You can then go to [localhost:3000](http://localhost:3000) in your browser to
-see the graph visualization.
+...
+```
 
 <hr />
-<br />
-
-### Using the GUAC visualizer will look something like this:
 
-<br />
+**Using the GUAC visualizer will look something like this:**
 
-![image](https://github.com/guacsec/guac-visualizer/assets/68356865/0b5460e2-0252-4ba6-8052-bb3426956410)
+![image](https://github.com/guacsec/guac-visualizer/assets/68356865/420c523e-9774-4a4f-82c1-b7e1d29ba9ac)