export function TopologyTab()

in karavan-designer/src/topology/TopologyTab.tsx [56:165]
67 lines of code
5 McCabe index (conditional complexity)

export function TopologyTab(props: Props) {

    const [selectedIds, setSelectedIds, setFileName, ranker, setRanker, setNodeData, showGroups, showBeans, showLegend] = useTopologyStore((s) =>
        [s.selectedIds, s.setSelectedIds, s.setFileName, s.ranker, s.setRanker, s.setNodeData, s.showGroups, s.showBeans, s.showLegend], shallow);
    const [setSelectedStep] = useDesignerStore((s) => [s.setSelectedStep], shallow)
    const {selectFile, setDisabled} = useTopologyHook();

    function setTopologySelected(model: Model, ids: string []) {
        setSelectedIds(ids);
        if (ids.length > 0) {
            const node = model.nodes?.filter(node => node.id === ids[0]);
            if (node && node.length > 0) {
                const data = node[0].data;
                setNodeData(data);
                if (data && data.step) {
                    setFileName(data.fileName)
                    setSelectedStep(data.step)
                } else {
                    setSelectedStep(undefined);
                    setFileName(undefined)
                }
            }
        }
    }

    const customLayoutFactory: LayoutFactory = (type: string, graph: Graph, options?: LayoutOptions): Layout => {
        return new DagreLayout(graph, {
                rankdir: 'TB',
                ranker: "network-simplex",
                nodesep: 20,
                edgesep: 20,
                ranksep: 1,
                // align: 'UL'
            });
    };

    const controller = React.useMemo(() => {
        const model = getModel(props.files, showGroups, selectFile, setDisabled);
        const controller = new Visualization();

        controller.registerLayoutFactory(customLayoutFactory);
        controller.registerComponentFactory(CustomComponentFactory);

        controller.addEventListener(SELECTION_EVENT, args => setTopologySelected(model, args));
        // controller1.addEventListener(SELECTION_EVENT, args => {
        //     console.log(args)
        // });
        controller.addEventListener(GRAPH_LAYOUT_END_EVENT, () => {
            controller.getGraph().fit(80);
        });
        controller.fromModel(model, false);
        return controller;
    },[]);

    React.useEffect(() => {
        try {
            setSelectedIds([])
            const model = getModel(props.files, showGroups, selectFile, setDisabled);
            controller.fromModel(model, false);
        } catch (e) {
            console.error(e);
        }
    }, [setSelectedIds, props.files, controller, showGroups]);

    const controlButtons = React.useMemo(() => {
        return createTopologyControlButtons({
            ...defaultControlButtonsOptions,
            zoomInCallback: action(() => {
                controller.getGraph().scaleBy(4 / 3);
            }),
            zoomOutCallback: action(() => {
                controller.getGraph().scaleBy(0.75);
            }),
            fitToScreenCallback: action(() => {
                controller.getGraph().fit(80);
            }),
            resetViewCallback: action(() => {
                controller.getGraph().reset();
                controller.getGraph().layout();
            }),
            legend: false,
            // customButtons,
        });
    }, [ranker, controller, setRanker]);

    return (
        <TopologyView
            className="topology-panel"
            contextToolbar={!props.hideToolbar
                ? <TopologyToolbar onClickAddRouteConfiguration={props.onClickAddRouteConfiguration}
                                   onClickAddBean={props.onClickAddBean}
                                   onClickAddKamelet={props.onClickAddKamelet}
                                   onClickAddREST={props.onClickAddREST}
                                   isDev={props.isDev}
                />
                : undefined}
            controlBar={
                <TopologyControlBar
                    controlButtons={controlButtons}
                />
            }
        >
            <VisualizationProvider controller={controller}>
                <VisualizationSurface state={{selectedIds}}/>
                {showBeans && <TopologyBeans/>}
                {showLegend && <TopologyLegend/>}
            </VisualizationProvider>
        </TopologyView>
    );
}