From 7c2870b56f6a346d22ec26fce3ee8b9721f5b879 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@protonmail.com>
Date: Sat, 18 Jun 2022 14:56:37 -0400
Subject: [PATCH] tweak: graph bigger + better colors

---
 packages/webpage-refactor/components/graph/graph.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/webpage-refactor/components/graph/graph.js b/packages/webpage-refactor/components/graph/graph.js
index 9470876..fd9c564 100644
--- a/packages/webpage-refactor/components/graph/graph.js
+++ b/packages/webpage-refactor/components/graph/graph.js
@@ -92,6 +92,10 @@ export function Graph({
         data: {
           id: cutOffLongNames(element.name),
           color: colors[i] || "darkgreen",
+          labelColor:
+            isListOrdered && i >= listOfElementsForGraph.length - 2
+              ? "black"
+              : "white",
         },
       };
     });
@@ -112,7 +116,7 @@ export function Graph({
       {
         selector: "node",
         style: {
-          padding: "25px",
+          padding: "30px",
           shape: "round-rectangle",
           content: "data(id)",
           "background-color": "data(color)",
@@ -126,8 +130,8 @@ export function Graph({
         selector: "node[id]",
         style: {
           label: "data(id)",
-          "font-size": "11",
-          color: "white",
+          "font-size": "13",
+          color: "data(labelColor)",
           "text-halign": "center",
           "text-valign": "center",
           "z-index": 1,
@@ -196,7 +200,7 @@ export function Graph({
   useEffect(async () => {
     await callEffect({ listOfElements, links, isListOrdered, mergeSortOrder });
     // console.log(JSON.stringify(config, null, 10));
-  }, [listOfElements, links]);
+  }, [listOfElements, links, isListOrdered]);
 
   return (
     <div>