@kinvolk/headlamp-plugin/lib/components/resourceMap/GraphRenderer.js

The needed infrastructure for building Headlamp plugins.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright 2025 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import { Background, BackgroundVariant, ConnectionMode, Controls, ReactFlow, } from '@xyflow/react';
import { useTranslation } from 'react-i18next';
import Loader from '../common/Loader';
import { GraphEdgeComponent } from './edges/GraphEdgeComponent';
import { maxZoom, minZoom } from './graphConstants';
import { GraphControls } from './GraphControls';
import { KubeObjectNodeComponent } from './nodes/KubeObjectNode';
export const nodeTypes = {
    object: KubeObjectNodeComponent,
};
const edgeTypes = {
    edge: GraphEdgeComponent,
};
const emptyArray = [];
export function GraphRenderer({ nodes, edges, onNodeClick, onEdgeClick, onMoveStart, onBackgroundClick, children, controlActions, isLoading, }) {
    const { t } = useTranslation();
    const theme = useTheme();
    return (_jsxs(ReactFlow, { nodes: isLoading ? emptyArray : nodes, edges: isLoading ? emptyArray : edges, edgeTypes: edgeTypes, nodeTypes: nodeTypes, nodesFocusable: false, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onMove: onMoveStart, onClick: e => {
            if (e.target?.className?.includes?.('react-flow__pane')) {
                onBackgroundClick?.();
            }
        }, minZoom: minZoom, maxZoom: maxZoom, connectionMode: ConnectionMode.Loose, children: [_jsx(Background, { variant: BackgroundVariant.Dots, color: theme.palette.divider, size: 2 }), _jsx(Controls, { showInteractive: false, showFitView: false, showZoom: false, children: _jsx(GraphControls, { children: controlActions }) }), isLoading && (_jsx(Box, { sx: {
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                }, children: _jsx(Loader, { title: "Loading" }) })), !isLoading && nodes.length === 0 && (_jsx(Typography, { sx: {
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                }, children: t('No data to be shown. Try to change filters or select a different namespace.') })), children] }));
}