Merge pull request #226 from alanconway/graph-layout

NO-JIRA: feat: improve graph layout and visuals

Author: openshift-merge-bot[bot]

web/locales/en/plugin__troubleshooting-panel-console-plugin.json

@@ -19,7 +19,6 @@
   "Focus the correlation on the current view.": "Focus the correlation on the current view.",
   "From": "From",
   "Goals": "Goals",
-  "Include data from this time range": "Include data from this time range",
   "Last": "Last",
   "Logging Plugin Disabled": "Logging Plugin Disabled",
   "Neighbours": "Neighbours",

web/src/components/Korrel8rPanel.tsx

@@ -148,6 +148,7 @@ export default function Korrel8rPanel() {
           spaceItems={{ default: 'spaceItemsXs' }}
         >
           <Tooltip
+            position="bottom-start"
             content={
               locationQuery
                 ? isFocused
@@ -175,19 +176,17 @@ export default function Korrel8rPanel() {
 
           {/* Time range drop-down */}
           <Flex align={{ default: 'alignRight' }} spaceItems={{ default: 'spaceItemsNone' }}>
-            <Tooltip content={t('Include data from this time range')}>
-              <TimeRangeDropdown
-                className="tp-plugin__compact-control"
-                period={search.period ?? defaultSearch.period}
-                onChange={(period: time.Period) => dispatchSearch({ ...search, period })}
-              />
-            </Tooltip>
+            <TimeRangeDropdown
+              className="tp-plugin__compact-control"
+              period={search.period ?? defaultSearch.period}
+              onChange={(period: time.Period) => dispatchSearch({ ...search, period })}
+            />
           </Flex>
 
           {/* Right aligned buttons */}
           <Flex align={{ default: 'alignRight' }} spaceItems={{ default: 'spaceItemsNone' }}>
             {/* Advanced search toggle */}
-            <Tooltip content={t('Advanced search parameters')}>
+            <Tooltip content={t('Advanced search parameters')} position="bottom-end">
               <ExpandableSectionToggle
                 contentId={advancedContentID}
                 toggleId={advancedToggleID}

web/src/components/topology/Korrel8rTopology.tsx

@@ -1,11 +1,10 @@
 import { Badge, Title } from '@patternfly/react-core';
 import {
   action,
-  BadgeLocation,
-  BreadthFirstLayout,
   ComponentFactory,
   ContextMenuItem,
   createTopologyControlButtons,
+  DagreLayout,
   defaultControlButtonsOptions,
   DefaultEdge,
   DefaultGroup,
@@ -20,13 +19,16 @@ import {
   Node,
   NodeShape,
   SELECTION_EVENT,
+  TOP_TO_BOTTOM,
   TopologyControlBar,
   TopologyView,
   Visualization,
   VisualizationProvider,
   VisualizationSurface,
   withContextMenu,
   WithContextMenuProps,
+  withDragNode,
+  WithDragNodeProps,
   withPanZoom,
   withSelection,
   WithSelectionProps,
@@ -38,6 +40,13 @@ import * as korrel8r from '../../korrel8r/types';
 import { getIcon } from '../icons';
 import './korrel8rtopology.css';
 
+// DagreLayout with straight edges (no angular bendpoints).
+class StraightEdgeDagreLayout extends DagreLayout {
+  protected updateEdgeBendpoints(): void {
+    // no-op: skip bendpoints for straight edges between nodes.
+  }
+}
+
 const capitalize = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : '');
 
 const nodeLabel = (node: korrel8r.Node): string => {
@@ -47,20 +56,13 @@ const nodeLabel = (node: korrel8r.Node): string => {
   return capitalize(c.name);
 };
 
-const nodeBadge = (node: korrel8r.Node): string => {
-  const queries = nodeQueries(node);
-  return `${queries.length > 1 ? `${queries[0]?.count}/` : ''}${node?.count ?? '?'} `;
-};
-
-const nodeQueries = (node: korrel8r.Node) => node?.queries ?? [];
-
 interface Korrel8rTopologyNodeProps {
   element: Node;
 }
 
 const Korrel8rTopologyNode: React.FC<
-  Korrel8rTopologyNodeProps & WithContextMenuProps & WithSelectionProps
-> = ({ element, onSelect, selected, onContextMenu, contextMenuOpen }) => {
+  Korrel8rTopologyNodeProps & WithContextMenuProps & WithSelectionProps & WithDragNodeProps
+> = ({ element, onSelect, selected, onContextMenu, contextMenuOpen, dragNodeRef }) => {
   const node = element.getData();
   const topologyNode = (
     <DefaultNode
@@ -69,10 +71,12 @@ const Korrel8rTopologyNode: React.FC<
       selected={selected}
       onContextMenu={onContextMenu}
       contextMenuOpen={contextMenuOpen}
+      dragNodeRef={dragNodeRef}
       hover={false}
       label={nodeLabel(node)}
-      badge={nodeBadge(node)}
-      badgeLocation={BadgeLocation.below}
+      badge={node?.count?.toString() ?? '?'}
+      badgeClassName="tp-plugin__topology_node_badge"
+      hideContextMenuKebab={node?.queries?.length === 1}
     >
       <g transform={`translate(25, 25)`}>{getIcon(node.class)}</g>
     </DefaultNode>
@@ -159,7 +163,7 @@ export const Korrel8rTopology: React.FC<{
           <Title headingLevel="h4">{node.class.toString()}</Title>
         </ContextMenuItem>,
       ];
-      nodeQueries(node).forEach((qc) =>
+      node?.queries?.forEach((qc) =>
         menu.push(
           <ContextMenuItem
             key={qc.query.toString()}
@@ -186,7 +190,7 @@ export const Korrel8rTopology: React.FC<{
         case ModelKind.graph:
           return withPanZoom()(GraphComponent);
         case ModelKind.node:
-          return withContextMenu(nodeMenu)(withSelection()(Korrel8rTopologyNode));
+          return withDragNode()(withContextMenu(nodeMenu)(withSelection()(Korrel8rTopologyNode)));
         case ModelKind.edge:
           return DefaultEdge;
         default:
@@ -203,12 +207,19 @@ export const Korrel8rTopology: React.FC<{
       graph: {
         id: 'korrel8r_graph',
         type: 'graph',
-        layout: 'BreadthFirst',
+        layout: 'Dagre',
       },
     };
 
     const controller = new Visualization();
-    controller.registerLayoutFactory((_, graph: Graph) => new BreadthFirstLayout(graph));
+    controller.registerLayoutFactory(
+      (_, graph: Graph) =>
+        new StraightEdgeDagreLayout(graph, {
+          rankdir: TOP_TO_BOTTOM,
+          ranksep: 10,
+          nodeDistance: 15,
+        }),
+    );
     controller.fromModel(model, false);
     return controller;
   }, [nodes, edges]);
@@ -252,7 +263,9 @@ export const Korrel8rTopology: React.FC<{
               zoomOutCallback: action(() => {
                 controller.getGraph().scaleBy(0.75);
               }),
-              fitToScreen: false, // Same thing as resetView
+              fitToScreenCallback: action(() => {
+                controller.getGraph().fit(PADDING);
+              }),
               resetViewCallback: action(() => {
                 controller.getGraph().reset();
                 controller.getGraph().layout();

web/src/components/topology/korrel8rtopology.css

@@ -1,3 +1,12 @@
 .tp-plugin__topology_invalid_node {
   cursor: not-allowed;
 }
+
+.tp-plugin__topology_node_badge rect {
+  fill: var(--pf-t--global--color--brand--default);
+  stroke: var(--pf-t--global--color--brand--default);
+}
+
+.tp-plugin__topology_node_badge text {
+  fill: var(--pf-t--global--text--color--on-brand--default);
+}