Add cytoscape graph

packages/core-ui/package.json

@@ -23,13 +23,16 @@
     "@patternfly/react-tokens": "4.50.5",
     "axios": "0.21.4",
     "classnames": "2.3.2",
+    "cy-node-html-label": "2.0.0",
     "cytoscape": "3.15.5",
     "cytoscape-canvas": "3.0.1",
     "cytoscape-popper": "1.0.7",
+    "dagre": "0.8.5",
     "js-yaml": "3.13.1",
     "moment": "^2.29.4",
     "react-ace": "9.1.3",
     "regression": "^2.0.1",
+    "tippy.js": "3.4.1",
     "victory": "36.3.0"
   },
   "devDependencies": {
@@ -52,6 +55,7 @@
     "postcss": "8.4.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-resize-detector": "3.4.0",
     "react-router-dom": "5.2.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-postcss": "4.0.2",

packages/core-ui/src/components/CytoscapeGraph/ContextMenu/EdgeContextMenu.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { style } from 'typestyle';
+import { prettyProtocol } from '@kiali/types';
+import { EdgeContextMenuProps } from '../CytoscapeContextMenu';
+import { getTitle } from '../../Graph/SummaryPanelCommon';
+import { renderBadgedName } from '../../Graph/SummaryLink';
+import { decoratedNodeData } from '../CytoscapeGraphUtils';
+import { EdgeSingular } from 'cytoscape';
+
+const contextMenu = style({
+  fontSize: 'var(--graph-side-panel--font-size)',
+  textAlign: 'left'
+});
+
+export class EdgeContextMenu extends React.PureComponent<EdgeContextMenuProps> {
+  render() {
+    return (
+      <div className={contextMenu}>
+        {getTitle(`Edge (${prettyProtocol(this.props.protocol)})`)}
+        {renderBadgedName(
+          this.props.serverConfig,
+          decoratedNodeData((this.props.element as EdgeSingular).source()),
+          'From:  '
+        )}
+        {renderBadgedName(
+          this.props.serverConfig,
+          decoratedNodeData((this.props.element as EdgeSingular).target()),
+          'To:        '
+        )}
+      </div>
+    );
+  }
+}