@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
86 lines • 4.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DetailsPanel = void 0;
const jsx_runtime_1 = require("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/>.
*/
const react_1 = require("@neo4j-ndl/react");
const react_2 = require("react");
const graph_visualization_context_1 = require("../graph-visualization-context");
const graph_visualization_sidepanel_1 = require("../graph-visualization-sidepanel");
const properties_table_1 = require("./properties-table");
const DetailsPanel = ({ paneWidth = 400 }) => {
const { selected, nvlGraph } = (0, graph_visualization_context_1.useGraphVisualizationContext)();
const nodeData = (0, react_2.useMemo)(() => {
const [nodeId] = selected.nodeIds;
if (nodeId !== undefined) {
return nvlGraph.dataLookupTable.nodes[nodeId];
}
return undefined;
}, [selected, nvlGraph]);
const relData = (0, react_2.useMemo)(() => {
const [relId] = selected.relationshipIds;
if (relId !== undefined) {
return nvlGraph.dataLookupTable.relationships[relId];
}
return undefined;
}, [selected, nvlGraph]);
const selectedItem = (0, react_2.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel.Title, { children: [(0, jsx_runtime_1.jsx)("h6", { className: "ndl-details-title", children: selectedItem.dataType === 'node'
? 'Node details'
: 'Relationship details' }), (0, jsx_runtime_1.jsx)(react_1.ClipboardButton, { textToCopy: properties
.map((prop) => `${prop.key}: ${prop.value}`)
.join('\n'), size: "small" })] }), (0, jsx_runtime_1.jsxs)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel.Content, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-details-tags", children: selectedItem.dataType === 'node' ? (selectedItem.data.labelsSorted.map((label) => {
var _a, _b;
return ((0, jsx_runtime_1.jsx)(react_1.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));
})) : ((0, jsx_runtime_1.jsx)(react_1.GraphLabel, { type: "relationship", color: selectedItem.data.color, as: "span", htmlAttributes: {
tabIndex: 0,
}, children: selectedItem.data.type }, selectedItem.data.type)) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-details-divider" }), (0, jsx_runtime_1.jsx)(properties_table_1.PropertiesTable, { properties: selectedItem.data.properties, paneWidth: paneWidth })] })] }));
};
exports.DetailsPanel = DetailsPanel;
//# sourceMappingURL=details-panel.js.map