Graph: options for depth colours and dot sizes

Frontend/src/App.jsx

@@ -384,6 +384,8 @@ export default function App() {
               DirectoryPath={CurrentDirectoryPath}
               ShowDirectories={Settings ? Settings.GraphShowDirectories : true}
               PanButton={Settings ? Settings.GraphPanButton : "Right"}
+              ColourByDepth={Settings ? Settings.GraphColourByDepth : true}
+              ShrinkByDepth={Settings ? Settings.GraphShrinkByDepth : false}
               OnOpenNode={HandleOpenGraphNode}
               OnClose={() => SetIsGraphOpen(false)}
             />

Frontend/src/Components/GraphPane.jsx

@@ -20,6 +20,8 @@ const LabelZoom = 0.7; // below this, only hovered labels are drawn
 const ClickSlop = 4; // pixels a click may wander and still count as a click
 // Directories by depth, like the headings: h1 Purple, h2 Blue, ...
 const DepthRoles = ["Purple", "Blue", "Green", "Yellow", "Orange", "Red"];
+const ShrinkPerDepth = 0.8; // with ShrinkByDepth, each level's directory dots are this much smaller
+const SmallestDirectory = 3; // ...but never smaller than a file's dot
 
 function ReadRole(Name) {
   return getComputedStyle(document.documentElement).getPropertyValue(`--${Name}`).trim();
@@ -132,7 +134,16 @@ function Tick(Nodes, Links, Alpha) {
   }
 }
 
-export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, PanButton, OnOpenNode, OnClose }) {
+export default function GraphPane({
+  RootName,
+  DirectoryPath,
+  ShowDirectories,
+  PanButton,
+  ColourByDepth,
+  ShrinkByDepth,
+  OnOpenNode,
+  OnClose,
+}) {
   const [Scope, SetScope] = useState("Root");
   const [Graph, SetGraph] = useState(null);
   const [Error, SetError] = useState(null);
@@ -189,7 +200,14 @@ export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, Pa
     const BaseDepth = Graph.Path ? Graph.Path.split("/").length : 0;
     for (const Node of Nodes) {
       const Depth = (Node.Id ? Node.Id.split("/").length : 0) - BaseDepth;
-      Node.Colour = Node.IsDirectory ? DepthColours[Depth % DepthColours.length] : Colours.File;
+      if (!Node.IsDirectory) {
+        Node.Colour = Colours.File;
+        continue;
+      }
+      Node.Colour = ColourByDepth ? DepthColours[Depth % DepthColours.length] : Colours.Directory;
+      if (ShrinkByDepth) {
+        Node.Radius = Math.max(SmallestDirectory, Node.Radius * Math.pow(ShrinkPerDepth, Depth));
+      }
     }
     // Anything but "Left" (including an old "Middle") pans with Right.
     const PanNumber = PanButton === "Left" ? 0 : 2;
@@ -394,7 +412,7 @@ export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, Pa
       Canvas.removeEventListener("contextmenu", OnContextMenu);
       Canvas.removeEventListener("wheel", OnWheel);
     };
-  }, [Graph, ShowDirectories, PanButton]);
+  }, [Graph, ShowDirectories, PanButton, ColourByDepth, ShrinkByDepth]);
 
   const FileCount = Graph ? Graph.Nodes.filter((Node) => !Node.IsDirectory).length : 0;
   const DirectoryCount = Graph ? Graph.Nodes.length - FileCount : 0;
@@ -410,7 +428,12 @@ export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, Pa
           </option>
         </select>
         <span className="GraphLegend">
-          {ShowDirectories && (
+          {ShowDirectories && !ColourByDepth && (
+            <>
+              <span className="GraphLegendDirectory">●</span> Directory
+            </>
+          )}
+          {ShowDirectories && ColourByDepth && (
             <>
               <span className="GraphLegendDirectory">●</span>
               <span className="GraphLegendDepth1">●</span>

Frontend/src/Components/SettingsPanel.jsx

@@ -410,6 +410,20 @@ export default function SettingsPanel({
                 OnChange={(Event) => UpdateField("GraphShowDirectories", Event.target.checked)}
               />
             </div>
+            <div className="SettingsRowInline">
+              <label className="SettingsLabel">Colour directories by depth (off: all purple)</label>
+              <Switch
+                Checked={Settings.GraphColourByDepth}
+                OnChange={(Event) => UpdateField("GraphColourByDepth", Event.target.checked)}
+              />
+            </div>
+            <div className="SettingsRowInline">
+              <label className="SettingsLabel">Smaller directory dots the deeper they are</label>
+              <Switch
+                Checked={Settings.GraphShrinkByDepth}
+                OnChange={(Event) => UpdateField("GraphShrinkByDepth", Event.target.checked)}
+              />
+            </div>
             <div className="SettingsRow">
               <label className="SettingsLabel">Pan with mouse button</label>
               <select