@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
103 lines • 3.95 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { IconButtonArray } from '@neo4j-ndl/react';
import { useState } from 'react';
import { GraphVisualization } from '../graph-visualization';
import { SingleSelectionSidepanelContents } from '../sidepanel-components/single-selection-sidepanel-contents';
const nodes = [
{
id: 'node1',
labels: ['Pokemon', 'Legendary'],
properties: {
durationToWinBattle: {
stringified: 'P0M0DT0.000000001S',
type: 'duration',
},
favoriteColors: {
stringified: '["red", "blue", "green"]',
type: 'list',
},
getsBeatBy: {
stringified: 'null',
type: 'null',
},
isAwesome: {
stringified: 'true',
type: 'boolean',
},
location: {
stringified: 'point({srid:1, x:100, y:200, z:300})',
type: 'point',
},
name: {
stringified: '"Rayquaza"',
type: 'string',
},
weight: {
stringified: '392.0',
type: 'float',
},
},
},
{
id: 'node2',
labels: ['Type'],
properties: { name: { stringified: 'Dragon', type: 'String' } },
},
{
id: 'node3',
labels: ['Type'],
properties: { name: { stringified: 'Flying', type: 'String' } },
},
];
const rels = [
{
from: 'node1',
id: 'rel1',
properties: {},
to: 'node2',
type: 'HAS_TYPE',
},
{
from: 'node1',
id: 'rel2',
properties: {},
to: 'node3',
type: 'HAS_TYPE',
},
];
export const containerClasses = 'n-w-full n-border-palette-neutral-border-weak n-mx-2 n-rounded-lg n-border';
const Component = () => {
const [isOpen, setIsOpen] = useState(true);
const [gesture, setGesture] = useState('box');
return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { gesture: gesture, setGesture: setGesture, bottomLeftIsland: _jsxs(IconButtonArray, { children: [_jsx(GraphVisualization.LassoSelectButton, {}), _jsx(GraphVisualization.SingleSelectButton, {}), _jsx(GraphVisualization.BoxSelectButton, {})] }), bottomRightIsland: _jsxs(IconButtonArray, { children: [_jsx(GraphVisualization.ZoomInButton, {}), _jsx(GraphVisualization.ZoomOutButton, {}), _jsx(GraphVisualization.ZoomToFitButton, {})] }), nodes: nodes, rels: rels, sidepanel: {
children: _jsx(SingleSelectionSidepanelContents, {}),
isSidePanelOpen: isOpen,
onSidePanelResize: () => {
/* no op */
},
setIsSidePanelOpen: setIsOpen,
sidePanelWidth: 300,
}, topLeftIsland: _jsx(GraphVisualization.DownloadButton, {}), topRightIsland: _jsx(GraphVisualization.ToggleSidePanelButton, {}), className: containerClasses }) }));
};
export default Component;
//# sourceMappingURL=graph-visualization-maximalist.story.js.map