@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
82 lines • 4.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { ClipboardButton, GraphLabel } from '@neo4j-ndl/react';
import { useMemo } from 'react';
import { useGraphVisualizationContext, } from '../graph-visualization-context';
import { GraphVisualizationSidepanel } from '../graph-visualization-sidepanel';
import { PropertiesTable } from './properties-table';
export const DetailsPanel = ({ paneWidth = 400 }) => {
const { selected, nvlGraph } = useGraphVisualizationContext();
const nodeData = useMemo(() => {
const [nodeId] = selected.nodeIds;
if (nodeId !== undefined) {
return nvlGraph.dataLookupTable.nodes[nodeId];
}
return undefined;
}, [selected, nvlGraph]);
const relData = useMemo(() => {
const [relId] = selected.relationshipIds;
if (relId !== undefined) {
return nvlGraph.dataLookupTable.relationships[relId];
}
return undefined;
}, [selected, nvlGraph]);
const selectedItem = useMemo(() => {
if (nodeData) {
return { data: nodeData, dataType: 'node' };
}
if (relData) {
return { data: relData, dataType: 'relationship' };
}
return undefined;
}, [nodeData, relData]);
if (selectedItem === undefined) {
return null;
}
const properties = [
{
key: '<id>',
type: 'String',
value: `${selectedItem.data.id}`,
},
...Object.keys(selectedItem.data.properties).map((key) => {
return {
key: key,
type: selectedItem.data.properties[key].type,
value: selectedItem.data.properties[key].stringified,
};
}),
];
return (_jsxs(_Fragment, { children: [_jsxs(GraphVisualizationSidepanel.Title, { children: [_jsx("h6", { className: "ndl-details-title", children: selectedItem.dataType === 'node'
? 'Node details'
: 'Relationship details' }), _jsx(ClipboardButton, { textToCopy: properties
.map((prop) => `${prop.key}: ${prop.value}`)
.join('\n'), size: "small" })] }), _jsxs(GraphVisualizationSidepanel.Content, { children: [_jsx("div", { className: "ndl-details-tags", children: selectedItem.dataType === 'node' ? (selectedItem.data.labelsSorted.map((label) => {
var _a, _b;
return (_jsx(GraphLabel, { type: "node", color: (_b = (_a = nvlGraph.dataLookupTable.labelMetaData[label]) === null || _a === void 0 ? void 0 : _a.mostCommonColor) !== null && _b !== void 0 ? _b : '', as: "span", htmlAttributes: {
tabIndex: 0,
}, children: label }, label));
})) : (_jsx(GraphLabel, { type: "relationship", color: selectedItem.data.color, as: "span", htmlAttributes: {
tabIndex: 0,
}, children: selectedItem.data.type }, selectedItem.data.type)) }), _jsx("div", { className: "ndl-details-divider" }), _jsx(PropertiesTable, { properties: selectedItem.data.properties, paneWidth: paneWidth })] })] }));
};
//# sourceMappingURL=details-panel.js.map