adding in advanced config for the graph viz more graph layout config … (

#690)

* adding in advanced config for the graph viz more graph layout config options

* added doc about the new advanced setting

---------

Co-authored-by: aleksandarneo4j <aleksandar.simeunovic@neotechnology.com>

docs/modules/ROOT/pages/user-guide/reports/graph.adoc

@@ -97,10 +97,13 @@ If 0, no arrow will be drawn.
 |Background Color |Text |#fafafa |The background color of the
 visualization.
 
-|Layout (experimental) |List |force-directed |Use this to switch from
-the main (force-directed) layout to one of the two experimental layouts
-(tree/radial). For the experimental layouts, make sure your graph is a
-DAG (directed acyclic graph).
+|Layout (experimental) |List |force-directed |tree-top-down |tree-bottom-up |tree-left-right |tree-right-left |radial | Use this to switch from
+the main (force-directed) layout to one of the experimental layouts
+(tree, radial). For the experimental layouts, make sure
+your graph is a DAG (directed acyclic graph).
+
+| Graph Depth Separation | Number | 30 | Specify the level distance for the tree layout. 
+This setting controls the separation between different levels in the tree hierarchy. Adjusting this value impacts the overall spacing of the tree layout in your graph visualization.
 
 |Enable graph exploration |on/off |on |Enables basic exploration functionality for the graph. Exploration can be done by right clicking on a node, and choosing 'Expand' to choose a type to traverse. Data is retrieved real-time and not cached in the visualization.
 

src/chart/graph/GraphChart.tsx

@@ -162,6 +162,7 @@ const NeoGraphChart = (props: ChartProps) => {
     },
     engine: {
       layout: layouts[settings.layout],
+      graphDepthSep: settings.graphDepthSep,
       queryCallback: props.queryCallback,
       cooldownTicks: cooldownTicks,
       setCooldownTicks: setCooldownTicks,

src/chart/graph/GraphChartVisualization.ts

@@ -3,7 +3,10 @@
  */
 export const layouts = {
   'force-directed': undefined,
-  tree: 'td',
+  'tree-top-down': 'td',
+  'tree-bottom-up': 'bu',
+  'tree-left-right': 'lr',
+  'tree-right-left': 'rl',
   radial: 'radialout',
 };
 
@@ -90,6 +93,7 @@ export interface GraphChartVisualizationProps {
    */
   engine: {
     layout: Layout;
+    graphDepthSep: number;
     queryCallback: (query: string, parameters: Record<string, any>, setRecords: any) => void;
     cooldownTicks: number;
     setCooldownTicks: (ticks: number) => void;
@@ -134,6 +138,8 @@ export interface GraphChartVisualizationProps {
     setClickPosition: (pos) => void;
     setPageNumber: any;
     pageNames: [];
+    customTablePropertiesOfModal: any[];
+    pageIdAndParameterName: string;
   };
   /**
    * entries in 'extensions' let users plug in extra functionality into the visualization based on enabled plugins.

src/chart/graph/GraphChartVisualization2D.tsx

@@ -29,6 +29,7 @@ export const NeoGraphChartVisualization2D = (props: GraphChartVisualizationProps
       linkDirectionalArrowLength={props.style.linkDirectionalArrowLength}
       linkDirectionalArrowRelPos={1}
       dagMode={props.engine.layout}
+      dagLevelDistance={props.engine.graphDepthSep}
       linkWidth={(link: any) => link.width}
       linkLabel={(link: any) => (props.interactivity.showPropertiesOnHover ? `<div>${getTooltip(link)}</div>` : '')}
       nodeLabel={(node: any) => (props.interactivity.showPropertiesOnHover ? `<div>${getTooltip(node)}</div>` : '')}

src/config/ReportConfig.tsx

@@ -208,9 +208,14 @@ const _REPORT_TYPES = {
       layout: {
         label: 'Graph Layout (experimental)',
         type: SELECTION_TYPES.LIST,
-        values: ['force-directed', 'tree', 'radial'],
+        values: ['force-directed', 'tree-top-down', 'tree-bottom-up', 'tree-left-right', 'tree-right-left', 'radial'],
         default: 'force-directed',
       },
+      graphDepthSep: {
+        label: 'Tree layout level distance',
+        type: SELECTION_TYPES.NUMBER,
+        default: '30',
+      },
       enableExploration: {
         label: 'Enable graph exploration',
         type: SELECTION_TYPES.LIST,