0.0.15 • Published 7 months ago
@graphscope/studio-draw-pattern v0.0.15
📊 @graphscope/studio-draw-pattern
This section covers the DrawPattern
component of the GraphScope Portal
.
Data Structure
The following diagram illustrates the data structure design:
Key Points:
- Properties: In both nodes and edges, the properties store the property ID values.
- isErgodic: This flag is used to determine whether a node has been traversed during generation.
Component
Overview
The DrawPattern
component is designed to handle graph schema previews and provide an interactive interface for users to define graph patterns using MATCH
, WHERE
, and description
values. It allows custom handling of changes through a callback function and renders a user interface split into two sections: a quick start guide and a canvas for graph visualization.
Props
previewGraph?: GraphProps
- Type:
GraphProps
(an object containing nodes and edges) - Description: This optional prop allows you to pass in a preview graph, which consists of schema nodes and edges to visualize on the canvas.
GraphProps Interface:
export interface GraphProps {
nodes: ISchemaNode[];
edges: ISchemaEdge[];
}
nodes
: An array of graph nodes (ISchemaNode
).edges
: An array of graph edges (ISchemaEdge
).
onClick?: (value: DrawPatternValue) => void
- Type:
(value: DrawPatternValue) => void
- Description: An optional callback function that will be triggered when a user action occurs, providing the
MATCH
,WHERE
, anddescription
values.
DrawPatternValue Interface:
export interface DrawPatternValue {
MATCHs: string;
WHEREs: string;
description: string;
}
MATCHs
: String representation of the graph pattern’sMATCH
statement.WHEREs
: String representation of theWHERE
conditions.description
: A string describing the pattern.
Usage Example
Here’s how you can use the DrawPattern
component within a React application:
import React from 'react';
import { DrawPattern, DrawPatternValue, GraphProps } from './DrawPattern';
const App: React.FC = () => {
const graphData: GraphProps = {
nodes: [
{ id: 'node1', label: 'Node 1' },
{ id: 'node2', label: 'Node 2' },
],
edges: [{ source: 'node1', target: 'node2', label: 'Edge 1' }],
};
const handlePatternClick = (value: DrawPatternValue) => {
console.log('Pattern clicked:', value);
};
return <DrawPattern previewGraph={graphData} onClick={handlePatternClick} />;
};
export default App;
Explanation
- Graph Data: You pass graph data (
nodes
andedges
) to thepreviewGraph
prop, allowing the component to visualize the graph schema. - Callback: The
onClick
prop is used to handle changes in graph pattern selection, such as when the user defines aMATCH
orWHERE
condition.