[ML] Data Frame Analytics map: remove cytoscape dependency (#263606)

## Summary

This PR removes the cytoscape dependency for the map view and uses React
Flow instead. This is consistent with the other plugins.



https://github.com/user-attachments/assets/7ffe661c-3380-4124-b3f1-7de3d61da482

Fixes #260527


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: alvarezmelissa87

package.json

@@ -1364,8 +1364,6 @@
     "css-box-model": "1.2.1",
     "css.escape": "1.5.1",
     "cypress-data-session": "2.8.7",
-    "cytoscape": "3.31.2",
-    "cytoscape-dagre": "2.5.0",
     "d3": "3.5.17",
     "d3-array": "2.12.1",
     "d3-brush": "3.0.0",

renovate.json

@@ -2119,14 +2119,6 @@
       "minimumReleaseAge": "14 days",
       "enabled": true
     },
-    {
-      "groupName": "Cytoscape",
-      "matchDepNames": ["cytoscape", "cytoscape-dagre"],
-      "reviewers": ["team:ml-ui"],
-      "matchBaseBranches": ["main"],
-      "minimumReleaseAge": "14 days",
-      "enabled": true
-    },
     {
       "groupName": "hdr-histogram-js",
       "matchDepNames": ["hdr-histogram-js"],

typings/cytoscape_dagre.d.ts

@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/**
+ * Assigns (x, y) positions to React Flow nodes using the Dagre layered-graph
+ * algorithm. React Flow requires explicit positions; without them every node
+ * renders at (0, 0). Dagre places nodes in ranked columns (left-to-right by
+ * default) so the job-map reads as a data-lineage pipeline. A square-grid
+ * fallback is used if Dagre throws (e.g. the graph contains a cycle).
+ */
+
+import Dagre from '@dagrejs/dagre';
+import type { Edge, Node } from '@xyflow/react';
+import {
+  JOB_MAP_GRAPH_MARGIN,
+  JOB_MAP_NODE_HEIGHT,
+  JOB_MAP_NODE_SEPARATION,
+  JOB_MAP_NODE_WIDTH,
+  JOB_MAP_RANK_SEPARATION,
+} from './job_map_flow_constants';
+
+export interface JobMapLayoutOptions {
+  rankdir?: 'TB' | 'LR';
+  ranksep?: number;
+  nodesep?: number;
+  marginx?: number;
+  marginy?: number;
+  nodeWidth?: number;
+  nodeHeight?: number;
+}
+
+const defaultOptions: Required<JobMapLayoutOptions> = {
+  rankdir: 'LR',
+  ranksep: JOB_MAP_RANK_SEPARATION,
+  nodesep: JOB_MAP_NODE_SEPARATION,
+  marginx: JOB_MAP_GRAPH_MARGIN,
+  marginy: JOB_MAP_GRAPH_MARGIN,
+  nodeWidth: JOB_MAP_NODE_WIDTH,
+  nodeHeight: JOB_MAP_NODE_HEIGHT,
+};
+
+function applyGridFallbackLayout<T extends Record<string, unknown>>(
+  nodes: Node<T>[],
+  opts: Required<JobMapLayoutOptions>
+): Node<T>[] {
+  const cols = Math.ceil(Math.sqrt(nodes.length));
+  return nodes.map((node, index) => {
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+    return {
+      ...node,
+      position: {
+        x: Math.round(opts.marginx + col * (opts.nodeWidth + opts.nodesep)),
+        y: Math.round(opts.marginy + row * (opts.nodeHeight + opts.ranksep)),
+      },
+    };
+  });
+}
+
+export function applyJobMapDagreLayout<T extends Record<string, unknown>>(
+  nodes: Node<T>[],
+  edges: Edge[],
+  options: JobMapLayoutOptions = {}
+): Node<T>[] {
+  if (nodes.length === 0) {
+    return nodes;
+  }
+
+  const opts = { ...defaultOptions, ...options };
+
+  const g = new Dagre.graphlib.Graph({ directed: true, compound: false })
+    .setGraph({
+      rankdir: opts.rankdir,
+      ranksep: opts.ranksep,
+      nodesep: opts.nodesep,
+      marginx: opts.marginx,
+      marginy: opts.marginy,
+    })
+    .setDefaultEdgeLabel(() => ({}));
+
+  nodes.forEach((node) => {
+    g.setNode(node.id, {
+      width: opts.nodeWidth,
+      height: opts.nodeHeight,
+    });
+  });
+
+  edges.forEach((edge) => {
+    if (g.hasNode(edge.source) && g.hasNode(edge.target)) {
+      g.setEdge(edge.source, edge.target);
+    }
+  });
+
+  try {
+    Dagre.layout(g);
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('[JobMap] Dagre layout failed, falling back to grid layout:', err);
+    return applyGridFallbackLayout(nodes, opts);
+  }
+
+  return nodes.map((node) => {
+    const dagreNode = g.node(node.id);
+    if (!dagreNode) {
+      return node;
+    }
+    return {
+      ...node,
+      position: {
+        x: Math.round(dagreNode.x - opts.nodeWidth / 2),
+        y: Math.round(dagreNode.y - opts.nodeHeight / 2),
+      },
+    };
+  });
+}