paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

core-components: declare DependencyGraphTypes as a namespace

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2023-04-18 11:30:57 +02:00
parent 66c0ece34b
commit 6e0b71493d
13 changed files with 253 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/hip-lamps-love.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/core-components': patch
---
Switched internal declaration of `DependencyGraphTypes` to use `namespace`.
packages/core-components/api-report.md
+56 -107
View File
@@ -65,14 +65,6 @@ export type AlertDisplayProps = {
transientTimeoutMs?: number;
};
// @public
enum Alignment {
DOWN_LEFT = 'DL',
DOWN_RIGHT = 'DR',
UP_LEFT = 'UL',
UP_RIGHT = 'UR',
}
// @public
export function Avatar(props: AvatarProps): JSX.Element;
@@ -214,13 +206,6 @@ export type CustomProviderClassKey = 'form' | 'button';
// @public (undocumented)
export function DashboardIcon(props: IconComponentProps): JSX.Element;
// @public
type DependencyEdge<T = {}> = T & {
from: string;
to: string;
label?: string;
};
// @public
export function DependencyGraph<NodeData, EdgeData>(
props: DependencyGraphProps<NodeData, EdgeData>,
@@ -242,59 +227,75 @@ export type DependencyGraphNodeClassKey = 'node';
export interface DependencyGraphProps<NodeData, EdgeData>
extends React_2.SVGProps<SVGSVGElement> {
acyclicer?: 'greedy';
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
align?: Alignment;
align?: DependencyGraphTypes.Alignment;
curve?: 'curveStepBefore' | 'curveMonotoneX';
defs?: SVGDefsElement | SVGDefsElement[];
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
direction?: Direction;
direction?: DependencyGraphTypes.Direction;
edgeMargin?: number;
edgeRanks?: number;
edges: DependencyEdge<EdgeData>[];
edges: DependencyGraphTypes.DependencyEdge<EdgeData>[];
edgeWeight?: number;
fit?: 'grow' | 'contain';
labelOffset?: number;
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
labelPosition?: LabelPosition;
labelPosition?: DependencyGraphTypes.LabelPosition;
nodeMargin?: number;
nodes: DependencyNode<NodeData>[];
nodes: DependencyGraphTypes.DependencyNode<NodeData>[];
paddingX?: number;
paddingY?: number;
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
ranker?: Ranker;
ranker?: DependencyGraphTypes.Ranker;
rankMargin?: number;
renderLabel?: RenderLabelFunction<EdgeData>;
renderNode?: RenderNodeFunction<NodeData>;
renderLabel?: DependencyGraphTypes.RenderLabelFunction<EdgeData>;
renderNode?: DependencyGraphTypes.RenderNodeFunction<NodeData>;
zoom?: 'enabled' | 'disabled' | 'enable-on-click';
}
declare namespace DependencyGraphTypes {
export {
DependencyEdge,
RenderLabelProps,
RenderLabelFunction,
DependencyNode,
RenderNodeProps,
RenderNodeFunction,
Direction,
Alignment,
Ranker,
LabelPosition,
// @public
export namespace DependencyGraphTypes {
export enum Alignment {
DOWN_LEFT = 'DL',
DOWN_RIGHT = 'DR',
UP_LEFT = 'UL',
UP_RIGHT = 'UR',
}
export type DependencyEdge<T = {}> = T & {
from: string;
to: string;
label?: string;
};
export type DependencyNode<T = {}> = T & {
id: string;
};
export enum Direction {
BOTTOM_TOP = 'BT',
LEFT_RIGHT = 'LR',
RIGHT_LEFT = 'RL',
TOP_BOTTOM = 'TB',
}
export enum LabelPosition {
// (undocumented)
CENTER = 'c',
// (undocumented)
LEFT = 'l',
// (undocumented)
RIGHT = 'r',
}
export enum Ranker {
LONGEST_PATH = 'longest-path',
NETWORK_SIMPLEX = 'network-simplex',
TIGHT_TREE = 'tight-tree',
}
export type RenderLabelFunction<T = {}> = (
props: RenderLabelProps<T>,
) => React_2.ReactNode;
export type RenderLabelProps<T = unknown> = {
edge: DependencyEdge<T>;
};
export type RenderNodeFunction<T = {}> = (
props: RenderNodeProps<T>,
) => React_2.ReactNode;
export type RenderNodeProps<T = unknown> = {
node: DependencyNode<T>;
};
}
export { DependencyGraphTypes };
// @public
type DependencyNode<T = {}> = T & {
id: string;
};
// @public
enum Direction {
BOTTOM_TOP = 'BT',
LEFT_RIGHT = 'LR',
RIGHT_LEFT = 'RL',
TOP_BOTTOM = 'TB',
}
// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
@@ -598,16 +599,6 @@ export type ItemCardHeaderProps = Partial<WithStyles<typeof styles_2>> & {
children?: React_2.ReactNode;
};
// @public
enum LabelPosition {
// (undocumented)
CENTER = 'c',
// (undocumented)
LEFT = 'l',
// (undocumented)
RIGHT = 'r',
}
// Warning: (ae-forgotten-export) The symbol "Props_7" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "Lifecycle" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -818,48 +809,6 @@ export type ProxiedSignInPageProps = SignInPageProps & {
headers?: HeadersInit | (() => HeadersInit) | (() => Promise<HeadersInit>);
};
// Warning: (ae-missing-release-tag) "Ranker" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
enum Ranker {
LONGEST_PATH = 'longest-path',
NETWORK_SIMPLEX = 'network-simplex',
TIGHT_TREE = 'tight-tree',
}
// Warning: (ae-missing-release-tag) "RenderLabelFunction" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
type RenderLabelFunction<T = {}> = (
props: RenderLabelProps<T>,
) => React_2.ReactNode;
// Warning: (ae-missing-release-tag) "RenderLabelProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
//
// @public
type RenderLabelProps<T = unknown> = {
edge: DependencyEdge<T>;
};
// Warning: (ae-missing-release-tag) "RenderNodeFunction" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
//
// @public
type RenderNodeFunction<T = {}> = (
props: RenderNodeProps<T>,
) => React_2.ReactNode;
// Warning: (ae-missing-release-tag) "RenderNodeProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
//
// @public
type RenderNodeProps<T = unknown> = {
node: DependencyNode<T>;
};
// Warning: (ae-missing-release-tag) "ResponseErrorPanel" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
@@ -1517,8 +1466,8 @@ export type WarningPanelClassKey =
// Warnings were encountered during analysis:
//
// src/components/DependencyGraph/types.d.ts:16:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
// src/components/DependencyGraph/types.d.ts:20:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
// src/components/DependencyGraph/types.d.ts:22:9 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
// src/components/DependencyGraph/types.d.ts:26:9 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode"
// src/components/TabbedLayout/RoutedTabs.d.ts:9:5 - (ae-forgotten-export) The symbol "SubRoute_2" needs to be exported by the entry point index.d.ts
// src/components/Table/Table.d.ts:20:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts
// src/layout/ErrorBoundary/ErrorBoundary.d.ts:8:5 - (ae-forgotten-export) The symbol "SlackChannel" needs to be exported by the entry point index.d.ts
packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx
+2 -2
View File
@@ -17,7 +17,7 @@
import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { BackstageTheme } from '@backstage/theme';
import { RenderLabelProps } from './types';
import { DependencyGraphTypes as Types } from './types';
/** @public */
export type DependencyGraphDefaultLabelClassKey = 'text';
@@ -32,7 +32,7 @@ const useStyles = makeStyles(
);
/** @public */
export function DefaultLabel({ edge: { label } }: RenderLabelProps) {
export function DefaultLabel({ edge: { label } }: Types.RenderLabelProps) {
const classes = useStyles();
return (
<text className={classes.text} textAnchor="middle">
packages/core-components/src/components/DependencyGraph/DefaultNode.tsx
+2 -2
View File
@@ -17,7 +17,7 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { BackstageTheme } from '@backstage/theme';
import { RenderNodeProps } from './types';
import { DependencyGraphTypes as Types } from './types';
/** @public */
export type DependencyGraphDefaultNodeClassKey = 'node' | 'text';
@@ -36,7 +36,7 @@ const useStyles = makeStyles(
);
/** @public */
export function DefaultNode({ node: { id } }: RenderNodeProps) {
export function DefaultNode({ node: { id } }: Types.RenderNodeProps) {
const classes = useStyles();
const [width, setWidth] = React.useState(0);
const [height, setHeight] = React.useState(0);
packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx
+6 -6
View File
@@ -16,7 +16,7 @@
import React from 'react';
import { DependencyGraph } from './DependencyGraph';
import { Direction, LabelPosition } from './types';
import { DependencyGraphTypes as Types } from './types';
export default {
title: 'Data Display/DependencyGraph',
@@ -82,7 +82,7 @@ export const BottomToTop = () => (
<DependencyGraph
nodes={exampleNodes}
edges={exampleEdges}
direction={Direction.BOTTOM_TOP}
direction={Types.Direction.BOTTOM_TOP}
style={graphStyle}
paddingX={50}
paddingY={50}
@@ -95,7 +95,7 @@ export const LeftToRight = () => (
<DependencyGraph
nodes={exampleNodes}
edges={exampleEdges}
direction={Direction.LEFT_RIGHT}
direction={Types.Direction.LEFT_RIGHT}
style={graphStyle}
paddingX={50}
paddingY={50}
@@ -108,7 +108,7 @@ export const RightToLeft = () => (
<DependencyGraph
nodes={exampleNodes}
edges={exampleEdges}
direction={Direction.RIGHT_LEFT}
direction={Types.Direction.RIGHT_LEFT}
style={graphStyle}
paddingX={50}
paddingY={50}
@@ -123,7 +123,7 @@ export const WithLabels = () => {
<DependencyGraph
nodes={exampleNodes}
edges={edges}
direction={Direction.LEFT_RIGHT}
direction={Types.Direction.LEFT_RIGHT}
style={graphStyle}
paddingX={50}
paddingY={50}
@@ -186,7 +186,7 @@ export const CustomLabels = () => {
<DependencyGraph
nodes={exampleNodes}
edges={edges}
labelPosition={LabelPosition.CENTER}
labelPosition={Types.LabelPosition.CENTER}
style={graphStyle}
paddingX={50}
paddingY={50}
packages/core-components/src/components/DependencyGraph/DependencyGraph.test.tsx
+3 -3
View File
@@ -17,7 +17,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { DependencyGraph } from './DependencyGraph';
import { RenderLabelProps, RenderNodeProps } from './types';
import { DependencyGraphTypes as Types } from './types';
import { EDGE_TEST_ID, LABEL_TEST_ID, NODE_TEST_ID } from './constants';
describe('<DependencyGraph />', () => {
@@ -89,7 +89,7 @@ describe('<DependencyGraph />', () => {
it('renders nodes according to renderNode prop', async () => {
const singleNode = [nodes[0]];
const renderNode = (props: RenderNodeProps) => (
const renderNode = (props: Types.RenderNodeProps) => (
<g>
<text>{props.node.id}</text>
<circle data-testid={CUSTOM_TEST_ID} r={100} />
@@ -107,7 +107,7 @@ describe('<DependencyGraph />', () => {
it('renders labels according to renderLabel prop', async () => {
const labeledEdge = [{ ...edges[0], label: 'label' }];
const renderLabel = (props: RenderLabelProps) => (
const renderLabel = (props: Types.RenderLabelProps) => (
<g>
<text>{props.edge.label}</text>
<circle data-testid={CUSTOM_TEST_ID} r={100} />
packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
+17 -26
View File
@@ -21,16 +21,7 @@ import useTheme from '@material-ui/core/styles/useTheme';
import dagre from 'dagre';
import debounce from 'lodash/debounce';
import { BackstageTheme } from '@backstage/theme';
import {
DependencyEdge,
DependencyNode,
Direction,
Alignment,
Ranker,
RenderNodeFunction,
RenderLabelFunction,
LabelPosition,
} from './types';
import { DependencyGraphTypes as Types } from './types';
import { Node } from './Node';
import { Edge, GraphEdge } from './Edge';
import { ARROW_MARKER_ID } from './constants';
@@ -47,11 +38,11 @@ export interface DependencyGraphProps<NodeData, EdgeData>
/**
* Edges of graph
*/
edges: DependencyEdge<EdgeData>[];
edges: Types.DependencyEdge<EdgeData>[];
/**
* Nodes of Graph
*/
nodes: DependencyNode<NodeData>[];
nodes: Types.DependencyNode<NodeData>[];
/**
* Graph {@link DependencyGraphTypes.Direction | direction}
*
@@ -59,11 +50,11 @@ export interface DependencyGraphProps<NodeData, EdgeData>
*
* Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`
*/
direction?: Direction;
direction?: Types.Direction;
/**
* Node {@link DependencyGraphTypes.Alignment | alignment}
*/
align?: Alignment;
align?: Types.Alignment;
/**
* Margin between nodes on each rank
*
@@ -115,7 +106,7 @@ export interface DependencyGraphProps<NodeData, EdgeData>
*
* Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`
*/
ranker?: Ranker;
ranker?: Types.Ranker;
/**
* {@link DependencyGraphTypes.LabelPosition | Position} of label in relation to edge
*
@@ -123,7 +114,7 @@ export interface DependencyGraphProps<NodeData, EdgeData>
*
* Default: `DependencyGraphTypes.LabelPosition.RIGHT`
*/
labelPosition?: LabelPosition;
labelPosition?: Types.LabelPosition;
/**
* How much to move label away from edge
*
@@ -144,11 +135,11 @@ export interface DependencyGraphProps<NodeData, EdgeData>
/**
* Custom node rendering component
*/
renderNode?: RenderNodeFunction<NodeData>;
renderNode?: Types.RenderNodeFunction<NodeData>;
/**
* Custom label rendering component
*/
renderLabel?: RenderLabelFunction<EdgeData>;
renderLabel?: Types.RenderLabelFunction<EdgeData>;
/**
* {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by
* {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}
@@ -194,7 +185,7 @@ export function DependencyGraph<NodeData, EdgeData>(
edges,
nodes,
renderNode,
direction = Direction.TOP_BOTTOM,
direction = Types.Direction.TOP_BOTTOM,
align,
nodeMargin = 50,
edgeMargin = 10,
@@ -202,8 +193,8 @@ export function DependencyGraph<NodeData, EdgeData>(
paddingX = 0,
paddingY = 0,
acyclicer,
ranker = Ranker.NETWORK_SIMPLEX,
labelPosition = LabelPosition.RIGHT,
ranker = Types.Ranker.NETWORK_SIMPLEX,
labelPosition = Types.LabelPosition.RIGHT,
labelOffset = 10,
edgeRanks = 1,
edgeWeight = 1,
@@ -218,9 +209,9 @@ export function DependencyGraph<NodeData, EdgeData>(
const [containerWidth, setContainerWidth] = React.useState<number>(100);
const [containerHeight, setContainerHeight] = React.useState<number>(100);
const graph = React.useRef<dagre.graphlib.Graph<DependencyNode<NodeData>>>(
new dagre.graphlib.Graph(),
);
const graph = React.useRef<
dagre.graphlib.Graph<Types.DependencyNode<NodeData>>
>(new dagre.graphlib.Graph());
const [graphWidth, setGraphWidth] = React.useState<number>(
graph.current.graph()?.width || 0,
);
@@ -389,13 +380,13 @@ export function DependencyGraph<NodeData, EdgeData>(
updateGraph,
]);
function setNode(id: string, node: DependencyNode<NodeData>) {
function setNode(id: string, node: Types.DependencyNode<NodeData>) {
graph.current.setNode(id, node);
updateGraph();
return graph.current;
}
function setEdge(id: dagre.Edge, edge: DependencyEdge<EdgeData>) {
function setEdge(id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) {
graph.current.setEdge(id, edge);
updateGraph();
return graph.current;
packages/core-components/src/components/DependencyGraph/Edge.test.tsx
+2 -2
View File
@@ -17,7 +17,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Edge } from './Edge';
import { RenderLabelProps } from './types';
import { DependencyGraphTypes as Types } from './types';
const fromNode = 'node';
const toNode = 'other-node';
@@ -38,7 +38,7 @@ const id = {
};
const setEdge = jest.fn();
const renderElement = jest.fn((props: RenderLabelProps) => (
const renderElement = jest.fn((props: Types.RenderLabelProps) => (
<div>{props.edge.label}</div>
));
packages/core-components/src/components/DependencyGraph/Edge.tsx
+9 -12
View File
@@ -19,12 +19,7 @@ import * as d3Shape from 'd3-shape';
import isFinite from 'lodash/isFinite';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { BackstageTheme } from '@backstage/theme';
import {
RenderLabelProps,
RenderLabelFunction,
DependencyEdge,
LabelPosition,
} from './types';
import { DependencyGraphTypes as Types } from './types';
import { EDGE_TEST_ID, LABEL_TEST_ID } from './constants';
import { DefaultLabel } from './DefaultLabel';
import dagre from 'dagre';
@@ -35,11 +30,13 @@ export type EdgeProperties = {
width?: number;
height?: number;
labeloffset?: number;
labelpos?: LabelPosition;
labelpos?: Types.LabelPosition;
minlen?: number;
weight?: number;
};
export type GraphEdge<T> = DependencyEdge<T> & dagre.GraphEdge & EdgeProperties;
export type GraphEdge<T> = Types.DependencyEdge<T> &
dagre.GraphEdge &
EdgeProperties;
/** @public */
export type DependencyGraphEdgeClassKey = 'path' | 'label';
@@ -65,15 +62,15 @@ type EdgePoint = dagre.GraphEdge['points'][0];
export type EdgeComponentProps<T = unknown> = {
id: dagre.Edge;
edge: GraphEdge<T>;
render?: RenderLabelFunction<T>;
render?: Types.RenderLabelFunction<T>;
setEdge: (
id: dagre.Edge,
edge: DependencyEdge<T>,
edge: Types.DependencyEdge<T>,
) => dagre.graphlib.Graph<{}>;
curve: 'curveStepBefore' | 'curveMonotoneX';
};
const renderDefault = (props: RenderLabelProps<unknown>) => (
const renderDefault = (props: Types.RenderLabelProps<unknown>) => (
<DefaultLabel {...props} />
);
@@ -85,7 +82,7 @@ export function Edge<EdgeData>({
curve,
}: EdgeComponentProps<EdgeData>) {
const { x = 0, y = 0, width, height, points } = edge;
const labelProps: DependencyEdge<EdgeData> = edge;
const labelProps: Types.DependencyEdge<EdgeData> = edge;
const classes = useStyles();
const labelRef = React.useRef<SVGGElement>(null);
packages/core-components/src/components/DependencyGraph/Node.test.tsx
+2 -2
View File
@@ -18,11 +18,11 @@ import React from 'react';
import dagre from 'dagre';
import { render } from '@testing-library/react';
import { Node } from './Node';
import { RenderNodeProps } from './types';
import { DependencyGraphTypes as Types } from './types';
const node = { id: 'abc', x: 0, y: 0, width: 0, height: 0 };
const setNode = jest.fn(() => new dagre.graphlib.Graph());
const renderElement = jest.fn((props: RenderNodeProps) => (
const renderElement = jest.fn((props: Types.RenderNodeProps) => (
<div>{props.node.id}</div>
));
packages/core-components/src/components/DependencyGraph/Node.tsx
+7 -5
View File
@@ -17,7 +17,7 @@
import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { DefaultNode } from './DefaultNode';
import { RenderNodeFunction, RenderNodeProps, DependencyNode } from './types';
import { DependencyGraphTypes as Types } from './types';
import { NODE_TEST_ID } from './constants';
import dagre from 'dagre';
@@ -33,15 +33,17 @@ const useStyles = makeStyles(
{ name: 'BackstageDependencyGraphNode' },
);
export type GraphNode<T> = dagre.Node<DependencyNode<T>>;
export type GraphNode<T> = dagre.Node<Types.DependencyNode<T>>;
export type NodeComponentProps<T> = {
node: GraphNode<T>;
render?: RenderNodeFunction<T>;
render?: Types.RenderNodeFunction<T>;
setNode: dagre.graphlib.Graph['setNode'];
};
const renderDefault = (props: RenderNodeProps) => <DefaultNode {...props} />;
const renderDefault = (props: Types.RenderNodeProps) => (
<DefaultNode {...props} />
);
export function Node<T>({
render = renderDefault,
@@ -49,7 +51,7 @@ export function Node<T>({
node,
}: NodeComponentProps<T>) {
const { width, height, x = 0, y = 0 } = node;
const nodeProps: DependencyNode<T> = node;
const nodeProps: Types.DependencyNode<T> = node;
const classes = useStyles();
const nodeRef = React.useRef<SVGGElement | null>(null);
packages/core-components/src/components/DependencyGraph/index.ts
+1 -3
View File
@@ -14,11 +14,9 @@
* limitations under the License.
*/
import * as DependencyGraphTypes from './types';
export { DependencyGraph } from './DependencyGraph';
export type { DependencyGraphProps } from './DependencyGraph';
export { DependencyGraphTypes };
export { DependencyGraphTypes } from './types';
export type { DependencyGraphDefaultLabelClassKey } from './DefaultLabel';
export type { DependencyGraphDefaultNodeClassKey } from './DefaultNode';
packages/core-components/src/components/DependencyGraph/types.ts
+141 -124
View File
@@ -23,135 +23,152 @@
import React from 'react';
/**
* Edge of {@link DependencyGraph}
* Types for the {@link DependencyGraph} component.
*
* @public
*/
export type DependencyEdge<T = {}> = T & {
export namespace DependencyGraphTypes {
/**
* ID of {@link DependencyNode} from where the Edge start
*/
from: string;
/**
* ID of {@link DependencyNode} to where the Edge goes to
*/
to: string;
/**
* Label assigned and rendered with the Edge
*/
label?: string;
};
/**
* Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge}
*/
export type RenderLabelProps<T = unknown> = { edge: DependencyEdge<T> };
/**
* Custom React component for edge labels
*/
export type RenderLabelFunction<T = {}> = (
props: RenderLabelProps<T>,
) => React.ReactNode;
/**
* Node of {@link DependencyGraph}
*
* @public
*/
export type DependencyNode<T = {}> = T & {
id: string;
};
/**
* Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode}
*/
export type RenderNodeProps<T = unknown> = { node: DependencyNode<T> };
/**
* Custom React component for graph {@link DependencyGraphTypes.DependencyNode}
*/
export type RenderNodeFunction<T = {}> = (
props: RenderNodeProps<T>,
) => React.ReactNode;
/**
* Graph direction
*
* @public
*/
export enum Direction {
/**
* Top to Bottom
*/
TOP_BOTTOM = 'TB',
/**
* Bottom to Top
*/
BOTTOM_TOP = 'BT',
/**
* Left to Right
*/
LEFT_RIGHT = 'LR',
/**
* Right to Left
*/
RIGHT_LEFT = 'RL',
}
/**
* Node alignment
*
* @public
*/
export enum Alignment {
/**
* Up Left
*/
UP_LEFT = 'UL',
/**
* Up Right
*/
UP_RIGHT = 'UR',
/**
* Down Left
*/
DOWN_LEFT = 'DL',
/**
* Down Right
*/
DOWN_RIGHT = 'DR',
}
/**
* Algorithm used to rand nodes in graph
*/
export enum Ranker {
/**
* {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm
*/
NETWORK_SIMPLEX = 'network-simplex',
/**
* Tight Tree algorithm
*/
TIGHT_TREE = 'tight-tree',
/**
* Longest path algorithm
* Edge of {@link DependencyGraph}
*
* @remarks
*
* Simplest and fastest
* @public
*/
LONGEST_PATH = 'longest-path',
}
export type DependencyEdge<T = {}> = T & {
/**
* ID of {@link DependencyNode} from where the Edge start
*/
from: string;
/**
* ID of {@link DependencyNode} to where the Edge goes to
*/
to: string;
/**
* Label assigned and rendered with the Edge
*/
label?: string;
};
/**
* Position of label in relation to the edge
*
* @public
*/
export enum LabelPosition {
LEFT = 'l',
RIGHT = 'r',
CENTER = 'c',
/**
* Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge}
*
* @public
*/
export type RenderLabelProps<T = unknown> = { edge: DependencyEdge<T> };
/**
* Custom React component for edge labels
*
* @public
*/
export type RenderLabelFunction<T = {}> = (
props: RenderLabelProps<T>,
) => React.ReactNode;
/**
* Node of {@link DependencyGraph}
*
* @public
*/
export type DependencyNode<T = {}> = T & {
id: string;
};
/**
* Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode}
*
* @public
*/
export type RenderNodeProps<T = unknown> = { node: DependencyNode<T> };
/**
* Custom React component for graph {@link DependencyGraphTypes.DependencyNode}
*
* @public
*/
export type RenderNodeFunction<T = {}> = (
props: RenderNodeProps<T>,
) => React.ReactNode;
/**
* Graph direction
*
* @public
*/
export enum Direction {
/**
* Top to Bottom
*/
TOP_BOTTOM = 'TB',
/**
* Bottom to Top
*/
BOTTOM_TOP = 'BT',
/**
* Left to Right
*/
LEFT_RIGHT = 'LR',
/**
* Right to Left
*/
RIGHT_LEFT = 'RL',
}
/**
* Node alignment
*
* @public
*/
export enum Alignment {
/**
* Up Left
*/
UP_LEFT = 'UL',
/**
* Up Right
*/
UP_RIGHT = 'UR',
/**
* Down Left
*/
DOWN_LEFT = 'DL',
/**
* Down Right
*/
DOWN_RIGHT = 'DR',
}
/**
* Algorithm used to rand nodes in graph
*
* @public
*/
export enum Ranker {
/**
* {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm
*/
NETWORK_SIMPLEX = 'network-simplex',
/**
* Tight Tree algorithm
*/
TIGHT_TREE = 'tight-tree',
/**
* Longest path algorithm
*
* @remarks
*
* Simplest and fastest
*/
LONGEST_PATH = 'longest-path',
}
/**
* Position of label in relation to the edge
*
* @public
*/
export enum LabelPosition {
LEFT = 'l',
RIGHT = 'r',
CENTER = 'c',
}
}