@openchoreo/cell-diagram 1.2.4 → 1.3.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/Diagram.esm.js +1 -1
- package/dist/components/Project/ProjectNode/ProjectModel.esm.js +1 -1
- package/dist/components/Project/ProjectNode/ProjectWidget.esm.js +18 -6
- package/dist/components/Project/ProjectNode/ProjectWidget.esm.js.map +1 -1
- package/dist/diagrams/OrgDiagram.esm.js +1 -1
- package/dist/diagrams/ProjectDiagram.esm.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/types.esm.js +3 -0
- package/dist/types.esm.js.map +1 -1
- package/dist/utils/diagramUtils.esm.js +1 -1
- package/dist/utils/orgUtils.esm.js +1 -1
- package/dist/utils/projectUtils.esm.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @openchoreo/cell-diagram
|
|
2
2
|
|
|
3
|
+
## 1.3.0-next.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 497b480: Support namespace-level (organization) cell diagrams. Re-export `CellBounds`
|
|
8
|
+
from the public API so hosts can build `Organization`/`OrgConnection` models,
|
|
9
|
+
and add single-click activation on org-view project cells (fires
|
|
10
|
+
`onComponentDoubleClick` once with the project id, guarded so canvas pan/drag
|
|
11
|
+
does not open the preview).
|
|
12
|
+
|
|
13
|
+
Clicking a cell in the org (namespace) view opens an in-place preview of that
|
|
14
|
+
project's cell diagram — the same single-project view, reusing data already
|
|
15
|
+
fetched — with a "Go to Project" action that navigates to the project's
|
|
16
|
+
cell-diagram tab. This is driven entirely by the existing
|
|
17
|
+
`onComponentDoubleClick` callback. The org-view cell's hover affordance now uses
|
|
18
|
+
a zoom-in icon (with a "Preview Project" tooltip) instead of the open-in-new
|
|
19
|
+
icon, reflecting that the click opens an inline preview rather than navigating
|
|
20
|
+
away.
|
|
21
|
+
|
|
3
22
|
## 1.2.0
|
|
4
23
|
|
|
5
24
|
### Minor Changes
|
package/dist/Diagram.esm.js
CHANGED
|
@@ -14,7 +14,7 @@ import 'react';
|
|
|
14
14
|
import '@mui/material/Fade';
|
|
15
15
|
import '@mui/material/Box';
|
|
16
16
|
import '@mui/material/Tooltip';
|
|
17
|
-
import '@mui/icons-material/
|
|
17
|
+
import '@mui/icons-material/ZoomInRounded';
|
|
18
18
|
import './components/Project/ProjectNode/styles.esm.js';
|
|
19
19
|
import './components/Project/ProjectPort/styles.esm.js';
|
|
20
20
|
import './components/Cell/CellNode/styles.esm.js';
|
|
@@ -9,7 +9,7 @@ import 'react';
|
|
|
9
9
|
import '@mui/material/Fade';
|
|
10
10
|
import '@mui/material/Box';
|
|
11
11
|
import '@mui/material/Tooltip';
|
|
12
|
-
import '@mui/icons-material/
|
|
12
|
+
import '@mui/icons-material/ZoomInRounded';
|
|
13
13
|
import './styles.esm.js';
|
|
14
14
|
import '../ProjectPort/styles.esm.js';
|
|
15
15
|
import '../../Cell/CellNode/styles.esm.js';
|
|
@@ -3,7 +3,7 @@ import { useContext, useState, useRef, useEffect } from 'react';
|
|
|
3
3
|
import Fade from '@mui/material/Fade';
|
|
4
4
|
import Box from '@mui/material/Box';
|
|
5
5
|
import Tooltip from '@mui/material/Tooltip';
|
|
6
|
-
import
|
|
6
|
+
import ZoomInRoundedIcon from '@mui/icons-material/ZoomInRounded';
|
|
7
7
|
import { ProjectHeadWidget } from './ProjectHeadWidget/ProjectHeadWidget.esm.js';
|
|
8
8
|
import { ProjectNode, ProjectName } from './styles.esm.js';
|
|
9
9
|
import { DiagramContext } from '../../DiagramContext/DiagramContext.esm.js';
|
|
@@ -21,6 +21,7 @@ function ProjectWidget(props) {
|
|
|
21
21
|
} = useContext(DiagramContext);
|
|
22
22
|
const [isHovered, setIsHovered] = useState(false);
|
|
23
23
|
const headPorts = useRef([]);
|
|
24
|
+
const pointerDownAt = useRef(null);
|
|
24
25
|
const displayName = node.project.name;
|
|
25
26
|
useEffect(() => {
|
|
26
27
|
headPorts.current.push(node.getPortFromID(`right-${node.getID()}`));
|
|
@@ -34,6 +35,17 @@ function ProjectWidget(props) {
|
|
|
34
35
|
onComponentDoubleClick(node.project.id);
|
|
35
36
|
}
|
|
36
37
|
};
|
|
38
|
+
const handleMouseDown = (event) => {
|
|
39
|
+
pointerDownAt.current = { x: event.clientX, y: event.clientY };
|
|
40
|
+
};
|
|
41
|
+
const handleOnWidgetClick = (event) => {
|
|
42
|
+
const start = pointerDownAt.current;
|
|
43
|
+
pointerDownAt.current = null;
|
|
44
|
+
if (!start) return;
|
|
45
|
+
const moved = Math.abs(event.clientX - start.x) + Math.abs(event.clientY - start.y);
|
|
46
|
+
if (moved > 4) return;
|
|
47
|
+
handleOnWidgetDoubleClick();
|
|
48
|
+
};
|
|
37
49
|
const handleMouseEnter = () => {
|
|
38
50
|
setIsHovered(true);
|
|
39
51
|
handleOnHover("SELECT");
|
|
@@ -53,7 +65,8 @@ function ProjectWidget(props) {
|
|
|
53
65
|
isFocused: node.getID() === focusedNodeId,
|
|
54
66
|
onMouseOver: handleMouseEnter,
|
|
55
67
|
onMouseLeave: handleMouseLeave,
|
|
56
|
-
|
|
68
|
+
onMouseDown: handleMouseDown,
|
|
69
|
+
onClick: handleOnWidgetClick,
|
|
57
70
|
onContextMenu: handleOnContextMenu,
|
|
58
71
|
children: [
|
|
59
72
|
/* @__PURE__ */ jsx(
|
|
@@ -85,17 +98,16 @@ function ProjectWidget(props) {
|
|
|
85
98
|
padding: "8px",
|
|
86
99
|
cursor: "pointer"
|
|
87
100
|
},
|
|
88
|
-
onClick: handleOnWidgetDoubleClick,
|
|
89
101
|
children: /* @__PURE__ */ jsx(Fade, { in: isHovered, timeout: 350, children: /* @__PURE__ */ jsx(
|
|
90
102
|
Tooltip,
|
|
91
103
|
{
|
|
92
|
-
title: "
|
|
104
|
+
title: "Preview Project",
|
|
93
105
|
placement: "bottom",
|
|
94
106
|
enterNextDelay: 1e3,
|
|
95
107
|
children: /* @__PURE__ */ jsx(
|
|
96
|
-
|
|
108
|
+
ZoomInRoundedIcon,
|
|
97
109
|
{
|
|
98
|
-
sx: { color: colors.OUTLINE_VARIANT, fontSize:
|
|
110
|
+
sx: { color: colors.OUTLINE_VARIANT, fontSize: 26 }
|
|
99
111
|
}
|
|
100
112
|
)
|
|
101
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProjectWidget.esm.js","sources":["../../../../src/components/Project/ProjectNode/ProjectWidget.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport Fade from '@mui/material/Fade';\nimport Box from '@mui/material/Box';\nimport Tooltip from '@mui/material/Tooltip';\nimport
|
|
1
|
+
{"version":3,"file":"ProjectWidget.esm.js","sources":["../../../../src/components/Project/ProjectNode/ProjectWidget.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport Fade from '@mui/material/Fade';\nimport Box from '@mui/material/Box';\nimport Tooltip from '@mui/material/Tooltip';\nimport ZoomInRoundedIcon from '@mui/icons-material/ZoomInRounded';\nimport { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';\nimport { ProjectModel } from './ProjectModel';\nimport { ProjectHeadWidget } from './ProjectHeadWidget/ProjectHeadWidget';\nimport { ProjectName, ProjectNode } from './styles';\nimport { DiagramContext } from '../../DiagramContext/DiagramContext';\nimport { useColors } from '../../../theme';\n\ninterface ProjectWidgetProps {\n node: ProjectModel;\n engine: DiagramEngine;\n}\n\nexport function ProjectWidget(props: ProjectWidgetProps) {\n const { node, engine } = props;\n const colors = useColors();\n const {\n selectedNodeId,\n focusedNodeId,\n componentMenu,\n onComponentDoubleClick,\n } = useContext(DiagramContext);\n const [isHovered, setIsHovered] = useState<boolean>(false);\n const headPorts = useRef<PortModel[]>([]);\n // Records the pointer position at mousedown so a click that follows a canvas\n // pan/node drag can be told apart from a genuine click (see handleOnWidgetClick).\n const pointerDownAt = useRef<{ x: number; y: number } | null>(null);\n\n const displayName: string = node.project.name;\n\n useEffect(() => {\n headPorts.current.push(node.getPortFromID(`right-${node.getID()}`)!);\n }, [node]);\n\n const handleOnHover = (task: string) => {\n setIsHovered(task === 'SELECT' ? true : false);\n node.handleHover(headPorts.current, task);\n };\n\n const handleOnWidgetDoubleClick = () => {\n if (onComponentDoubleClick) {\n onComponentDoubleClick(node.project.id);\n }\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n pointerDownAt.current = { x: event.clientX, y: event.clientY };\n };\n\n // Single-click activation (the host decides what it does — e.g. open a\n // preview). Only fires when the pointer didn't travel far between mousedown\n // and click, so panning the canvas or dragging the node doesn't trigger it.\n const handleOnWidgetClick = (event: MouseEvent<HTMLDivElement>) => {\n const start = pointerDownAt.current;\n pointerDownAt.current = null;\n if (!start) return;\n const moved =\n Math.abs(event.clientX - start.x) + Math.abs(event.clientY - start.y);\n if (moved > 4) return;\n handleOnWidgetDoubleClick();\n };\n\n const handleMouseEnter = () => {\n setIsHovered(true);\n handleOnHover('SELECT');\n };\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n handleOnHover('UNSELECT');\n };\n\n const handleOnContextMenu = (event: MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n return (\n <>\n <ProjectNode\n isSelected={node.getID() === selectedNodeId}\n isFocused={node.getID() === focusedNodeId}\n onMouseOver={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={handleMouseDown}\n onClick={handleOnWidgetClick}\n onContextMenu={handleOnContextMenu}\n >\n <ProjectHeadWidget\n engine={engine}\n node={node}\n isSelected={node.getID() === selectedNodeId}\n isFocused={node.getID() === focusedNodeId || isHovered}\n menuItems={componentMenu}\n />\n <Tooltip\n title={displayName}\n placement=\"bottom\"\n enterNextDelay={500}\n arrow\n >\n <ProjectName>{displayName}</ProjectName>\n </Tooltip>\n\n {/* Visual affordance only — activation is handled by the cell's onClick\n (which also covers clicks landing on this icon), so onComponentDoubleClick\n fires exactly once per click. */}\n <Box\n sx={{\n position: 'absolute',\n top: '26px',\n padding: '8px',\n cursor: 'pointer',\n }}\n >\n <Fade in={isHovered} timeout={350}>\n <Tooltip\n title=\"Preview Project\"\n placement=\"bottom\"\n enterNextDelay={1000}\n >\n <ZoomInRoundedIcon\n sx={{ color: colors.OUTLINE_VARIANT, fontSize: 26 }}\n />\n </Tooltip>\n </Fade>\n </Box>\n </ProjectNode>\n </>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import { PROJECT_NODE, CONNECTION_NODE, Colors } from '../resources/constants.es
|
|
|
9
9
|
import '@mui/material/Fade';
|
|
10
10
|
import '@mui/material/Box';
|
|
11
11
|
import '@mui/material/Tooltip';
|
|
12
|
-
import '@mui/icons-material/
|
|
12
|
+
import '@mui/icons-material/ZoomInRounded';
|
|
13
13
|
import '../components/Project/ProjectNode/styles.esm.js';
|
|
14
14
|
import '../components/Project/ProjectPort/styles.esm.js';
|
|
15
15
|
import '../components/Cell/CellNode/styles.esm.js';
|
|
@@ -7,7 +7,7 @@ import { MAIN_CELL, DIAGRAM_END, MARGIN, NO_CELL_NODE, Colors } from '../resourc
|
|
|
7
7
|
import '@mui/material/Fade';
|
|
8
8
|
import '@mui/material/Box';
|
|
9
9
|
import '@mui/material/Tooltip';
|
|
10
|
-
import '@mui/icons-material/
|
|
10
|
+
import '@mui/icons-material/ZoomInRounded';
|
|
11
11
|
import '../components/Project/ProjectNode/styles.esm.js';
|
|
12
12
|
import '../components/Project/ProjectPort/styles.esm.js';
|
|
13
13
|
import { CellModel } from '../components/Cell/CellNode/CellModel.esm.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -403,5 +403,5 @@ declare function CellDiagram(props: CellDiagramProps): react_jsx_runtime.JSX.Ele
|
|
|
403
403
|
|
|
404
404
|
declare function renderDiagram(projectModel: string, target: HTMLDivElement): void;
|
|
405
405
|
|
|
406
|
-
export { CellDiagram, ComponentType, ConnectionType, DiagramLayer, renderDiagram };
|
|
406
|
+
export { CellBounds, CellDiagram, ComponentType, ConnectionType, DiagramLayer, renderDiagram };
|
|
407
407
|
export type { CommonModel, Component, ComponentMetadata, Connection, ConnectionMetadata, ConnectorMetadata, CustomTooltips, DeploymentMetadata, DiagramLayerTooltips, ExternalConsumerLinkSelectEvent, Gateways, Links, MoreVertMenuItem, Nodes, ObservationSummary, Observations, OrgConnection, OrgDiagramData, Organization, Project, ProjectDiagramData, ProjectGateway, Service, Services };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { CellDiagram } from './Diagram.esm.js';
|
|
2
2
|
export { ComponentType, ConnectionType, DiagramLayer } from './types.esm.js';
|
|
3
3
|
export { renderDiagram } from './renderDiagram.esm.js';
|
|
4
|
+
export { CellBounds } from './components/Cell/CellNode/CellModel.esm.js';
|
|
4
5
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/dist/types.esm.js
CHANGED
package/dist/types.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.esm.js","sources":["../src/types.ts"],"sourcesContent":["import {\n CellLinkModel,\n ComponentLinkModel,\n ComponentModel,\n ConnectionModel,\n EmptyModel,\n ExternalLinkModel,\n ExternalModel,\n ProjectModel,\n} from './components';\nimport { CellBounds } from './components/Cell/CellNode/CellModel';\nimport { AdvancedLinkModel } from './components/Project/AdvancedLink/AdvancedLinkModel';\nimport { BaseEvent } from '@projectstorm/react-canvas-core';\n\nexport interface Organization {\n id: string;\n name: string;\n projects: Project[];\n configurations?: Connection[];\n modelVersion: string;\n}\n\nexport interface Project {\n id: string;\n name: string;\n components: Component[];\n connections?: OrgConnection[];\n configurations?: Connection[];\n modelVersion?: string;\n}\n\nexport enum ComponentType {\n SERVICE = 'service',\n WEB_APP = 'web-app',\n SCHEDULED_TASK = 'scheduled-task',\n MANUAL_TASK = 'manual-task',\n API_PROXY = 'api-proxy',\n WEB_HOOK = 'web-hook',\n EVENT_HANDLER = 'event-handler',\n TEST = 'test',\n EXTERNAL_CONSUMER = 'external-consumer',\n SYSTEM_COMPONENT = 'system',\n}\n\nexport type ExternalConsumerLinkSelectEvent = BaseEvent & {\n cellBound: CellBounds;\n};\n\nexport interface Component {\n id: string;\n label?: string;\n version: string;\n type: ComponentType;\n buildPack?: string; // Component implemented language\n services: Services;\n connections: Connection[];\n disabled?: {\n status: boolean;\n reason?: string;\n };\n}\n\nexport interface Services {\n [key: string]: Service;\n}\n\nexport interface Service {\n id: string;\n label?: string;\n type: string;\n dependencyIds: string[];\n deploymentMetadata?: DeploymentMetadata;\n}\n\nexport interface Connection {\n id: string;\n label?: string;\n type?: ConnectionType;\n onPlatform?: boolean;\n tooltip?: string;\n observations?: Observations[];\n observationOnly?: boolean;\n}\n\nexport enum ConnectionType {\n HTTP = 'http',\n GRPC = 'grpc',\n WebSocket = 'web-socket',\n Connector = 'connector',\n Datastore = 'datastore',\n}\n\nexport interface ProjectGateway {\n projectId: string;\n boundary: CellBounds;\n}\n\nexport interface OrgConnection {\n id: string;\n label?: string;\n tooltip?: string;\n source: {\n boundary: CellBounds;\n };\n target?: ProjectGateway | Connection;\n}\n\nexport interface ComponentMetadata {\n type: ConnectionType;\n organization: string;\n project: string;\n component: string;\n service?: string;\n}\nexport interface ConnectorMetadata {\n type: ConnectionType.Connector;\n organization: string;\n package: string;\n}\n\nexport type ConnectionMetadata = ComponentMetadata | ConnectorMetadata;\n\nexport interface DeploymentMetadata {\n gateways: {\n internet: {\n isExposed: boolean;\n tooltip?: string;\n observations?: Observations[];\n observationOnly?: boolean;\n };\n intranet: {\n isExposed: boolean;\n tooltip?: string;\n observations?: Observations[];\n observationOnly?: boolean;\n };\n };\n}\n\nexport interface Observations {\n label?: string;\n componentVersion?: string;\n sourceNodeId: number;\n destinationNodeId: number;\n avgLatency: number;\n errorCount: number;\n p50Latency: number;\n p90Latency: number;\n p99Latency: number;\n requestCount: number;\n}\n\n// Util function types\n\nexport type CommonModel =\n | ProjectModel\n | ComponentModel\n | ConnectionModel\n | ExternalModel\n | EmptyModel;\nexport interface OrgDiagramData {\n nodes: Nodes;\n links: Links;\n}\nexport interface ProjectDiagramData {\n nodes: Nodes;\n links: Links;\n gateways: Gateways;\n observationSummary: ObservationSummary;\n}\n\nexport interface Gateways {\n internet: boolean;\n intranet: boolean;\n}\n\nexport interface ObservationSummary {\n requestCount: { min: number; max: number };\n}\n\nexport interface Nodes {\n [key: string]: Map<string, CommonModel>;\n}\n\nexport interface Links {\n [key: string]: Map<\n string,\n ComponentLinkModel | ExternalLinkModel | CellLinkModel | AdvancedLinkModel\n >;\n}\n\nexport interface MoreVertMenuItem {\n label: string;\n callback: (id: string, version?: string) => void;\n}\n\nexport enum DiagramLayer {\n ARCHITECTURE = 'architecture',\n OBSERVABILITY = 'observability',\n DIFF = 'diff',\n}\n\nexport interface CustomTooltips {\n diagramLayers: DiagramLayerTooltips;\n}\n\nexport interface DiagramLayerTooltips {\n staticLayer?: string;\n runtimeLayer?: string;\n diffLayer?: string;\n}\n"],"names":["ComponentType","ConnectionType","DiagramLayer"],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.esm.js","sources":["../src/types.ts"],"sourcesContent":["import {\n CellLinkModel,\n ComponentLinkModel,\n ComponentModel,\n ConnectionModel,\n EmptyModel,\n ExternalLinkModel,\n ExternalModel,\n ProjectModel,\n} from './components';\nimport { CellBounds } from './components/Cell/CellNode/CellModel';\nimport { AdvancedLinkModel } from './components/Project/AdvancedLink/AdvancedLinkModel';\nimport { BaseEvent } from '@projectstorm/react-canvas-core';\n\n// Re-export CellBounds so consumers building Organization/OrgConnection models\n// (e.g. the backend namespace aggregator) can reference boundary values without\n// reaching into internal component paths.\nexport { CellBounds } from './components/Cell/CellNode/CellModel';\n\nexport interface Organization {\n id: string;\n name: string;\n projects: Project[];\n configurations?: Connection[];\n modelVersion: string;\n}\n\nexport interface Project {\n id: string;\n name: string;\n components: Component[];\n connections?: OrgConnection[];\n configurations?: Connection[];\n modelVersion?: string;\n}\n\nexport enum ComponentType {\n SERVICE = 'service',\n WEB_APP = 'web-app',\n SCHEDULED_TASK = 'scheduled-task',\n MANUAL_TASK = 'manual-task',\n API_PROXY = 'api-proxy',\n WEB_HOOK = 'web-hook',\n EVENT_HANDLER = 'event-handler',\n TEST = 'test',\n EXTERNAL_CONSUMER = 'external-consumer',\n SYSTEM_COMPONENT = 'system',\n}\n\nexport type ExternalConsumerLinkSelectEvent = BaseEvent & {\n cellBound: CellBounds;\n};\n\nexport interface Component {\n id: string;\n label?: string;\n version: string;\n type: ComponentType;\n buildPack?: string; // Component implemented language\n services: Services;\n connections: Connection[];\n disabled?: {\n status: boolean;\n reason?: string;\n };\n}\n\nexport interface Services {\n [key: string]: Service;\n}\n\nexport interface Service {\n id: string;\n label?: string;\n type: string;\n dependencyIds: string[];\n deploymentMetadata?: DeploymentMetadata;\n}\n\nexport interface Connection {\n id: string;\n label?: string;\n type?: ConnectionType;\n onPlatform?: boolean;\n tooltip?: string;\n observations?: Observations[];\n observationOnly?: boolean;\n}\n\nexport enum ConnectionType {\n HTTP = 'http',\n GRPC = 'grpc',\n WebSocket = 'web-socket',\n Connector = 'connector',\n Datastore = 'datastore',\n}\n\nexport interface ProjectGateway {\n projectId: string;\n boundary: CellBounds;\n}\n\nexport interface OrgConnection {\n id: string;\n label?: string;\n tooltip?: string;\n source: {\n boundary: CellBounds;\n };\n target?: ProjectGateway | Connection;\n}\n\nexport interface ComponentMetadata {\n type: ConnectionType;\n organization: string;\n project: string;\n component: string;\n service?: string;\n}\nexport interface ConnectorMetadata {\n type: ConnectionType.Connector;\n organization: string;\n package: string;\n}\n\nexport type ConnectionMetadata = ComponentMetadata | ConnectorMetadata;\n\nexport interface DeploymentMetadata {\n gateways: {\n internet: {\n isExposed: boolean;\n tooltip?: string;\n observations?: Observations[];\n observationOnly?: boolean;\n };\n intranet: {\n isExposed: boolean;\n tooltip?: string;\n observations?: Observations[];\n observationOnly?: boolean;\n };\n };\n}\n\nexport interface Observations {\n label?: string;\n componentVersion?: string;\n sourceNodeId: number;\n destinationNodeId: number;\n avgLatency: number;\n errorCount: number;\n p50Latency: number;\n p90Latency: number;\n p99Latency: number;\n requestCount: number;\n}\n\n// Util function types\n\nexport type CommonModel =\n | ProjectModel\n | ComponentModel\n | ConnectionModel\n | ExternalModel\n | EmptyModel;\nexport interface OrgDiagramData {\n nodes: Nodes;\n links: Links;\n}\nexport interface ProjectDiagramData {\n nodes: Nodes;\n links: Links;\n gateways: Gateways;\n observationSummary: ObservationSummary;\n}\n\nexport interface Gateways {\n internet: boolean;\n intranet: boolean;\n}\n\nexport interface ObservationSummary {\n requestCount: { min: number; max: number };\n}\n\nexport interface Nodes {\n [key: string]: Map<string, CommonModel>;\n}\n\nexport interface Links {\n [key: string]: Map<\n string,\n ComponentLinkModel | ExternalLinkModel | CellLinkModel | AdvancedLinkModel\n >;\n}\n\nexport interface MoreVertMenuItem {\n label: string;\n callback: (id: string, version?: string) => void;\n}\n\nexport enum DiagramLayer {\n ARCHITECTURE = 'architecture',\n OBSERVABILITY = 'observability',\n DIFF = 'diff',\n}\n\nexport interface CustomTooltips {\n diagramLayers: DiagramLayerTooltips;\n}\n\nexport interface DiagramLayerTooltips {\n staticLayer?: string;\n runtimeLayer?: string;\n diffLayer?: string;\n}\n"],"names":["ComponentType","ConnectionType","DiagramLayer"],"mappings":";;;AAoCO,IAAK,aAAA,qBAAAA,cAAAA,KAAL;AACL,EAAAA,eAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,eAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,eAAA,gBAAA,CAAA,GAAiB,gBAAA;AACjB,EAAAA,eAAA,aAAA,CAAA,GAAc,aAAA;AACd,EAAAA,eAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,eAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,eAAA,eAAA,CAAA,GAAgB,eAAA;AAChB,EAAAA,eAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,eAAA,mBAAA,CAAA,GAAoB,mBAAA;AACpB,EAAAA,eAAA,kBAAA,CAAA,GAAmB,QAAA;AAVT,EAAA,OAAAA,cAAAA;AAAA,CAAA,EAAA,aAAA,IAAA,EAAA;AAqDL,IAAK,cAAA,qBAAAC,eAAAA,KAAL;AACL,EAAAA,gBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,gBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,gBAAA,WAAA,CAAA,GAAY,YAAA;AACZ,EAAAA,gBAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,gBAAA,WAAA,CAAA,GAAY,WAAA;AALF,EAAA,OAAAA,eAAAA;AAAA,CAAA,EAAA,cAAA,IAAA,EAAA;AAgHL,IAAK,YAAA,qBAAAC,aAAAA,KAAL;AACL,EAAAA,cAAA,cAAA,CAAA,GAAe,cAAA;AACf,EAAAA,cAAA,eAAA,CAAA,GAAgB,eAAA;AAChB,EAAAA,cAAA,MAAA,CAAA,GAAO,MAAA;AAHG,EAAA,OAAAA,aAAAA;AAAA,CAAA,EAAA,YAAA,IAAA,EAAA;;;;"}
|
|
@@ -13,7 +13,7 @@ import 'react';
|
|
|
13
13
|
import '@mui/material/Fade';
|
|
14
14
|
import '@mui/material/Box';
|
|
15
15
|
import '@mui/material/Tooltip';
|
|
16
|
-
import '@mui/icons-material/
|
|
16
|
+
import '@mui/icons-material/ZoomInRounded';
|
|
17
17
|
import '../components/Project/ProjectNode/styles.esm.js';
|
|
18
18
|
import '../components/Project/ProjectPort/styles.esm.js';
|
|
19
19
|
import '../components/Cell/CellNode/styles.esm.js';
|
|
@@ -5,7 +5,7 @@ import 'react';
|
|
|
5
5
|
import '@mui/material/Fade';
|
|
6
6
|
import '@mui/material/Box';
|
|
7
7
|
import '@mui/material/Tooltip';
|
|
8
|
-
import '@mui/icons-material/
|
|
8
|
+
import '@mui/icons-material/ZoomInRounded';
|
|
9
9
|
import '../components/Project/ProjectNode/styles.esm.js';
|
|
10
10
|
import '@projectstorm/react-diagrams';
|
|
11
11
|
import '../components/Project/ProjectPort/styles.esm.js';
|
|
@@ -18,7 +18,7 @@ import 'react';
|
|
|
18
18
|
import '@mui/material/Fade';
|
|
19
19
|
import '@mui/material/Box';
|
|
20
20
|
import '@mui/material/Tooltip';
|
|
21
|
-
import '@mui/icons-material/
|
|
21
|
+
import '@mui/icons-material/ZoomInRounded';
|
|
22
22
|
import '../components/Project/ProjectNode/styles.esm.js';
|
|
23
23
|
import '../components/Project/ProjectPort/styles.esm.js';
|
|
24
24
|
import '../components/Cell/CellNode/styles.esm.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openchoreo/cell-diagram",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0-rc.1",
|
|
4
4
|
"description": "React component library that visualizes OpenChoreo cell architectures.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/index.esm.js",
|
|
@@ -83,4 +83,4 @@
|
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
"module": "./dist/index.esm.js"
|
|
86
|
-
}
|
|
86
|
+
}
|