neighbors.tsx

import React from "react";

import { NodeData } from "../../graph";
import FancyScrollbar from "../fancyscrollbar";
import Collapsible from "../collapsible";

import "./neighbors.css";

interface NeighborsProps {
    neighbors: NodeData[];
    nodeClickedCallback?: (node: NodeData) => void;
}

function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
    const classes = [...new Set<string>(neighbors.map((node) => node.type))];
    classes.sort(); // Sort classes to get a constant order of the node type tabs
    const categories = new Map<string, Array<NodeData>>();

    for (const cls of classes) {
        categories.set(cls, []);
    }

    for (const neighbor of neighbors) {
        categories.get(neighbor.type).push(neighbor);
    }

    const handleNodeClick = (node: NodeData) => {
        if (nodeClickedCallback) {
            nodeClickedCallback(node);
        }
    };

    return (
        <div className={"neighbor-container"}>
            <FancyScrollbar>
                <Collapsible header={"Verwandte Inhalte"}>
                    {classes.map((cls) => (
                        <Collapsible
                            header={cls}
                            key={cls}
                            heightTransition={false}
                        >
                            <ul>
                                {categories.get(cls).map((node) => (
                                    <li
                                        className={"neighbor-content-link"}
                                        key={node.name}
                                        onClick={() => handleNodeClick(node)}
                                    >
                                        {node.name}
                                    </li>
                                ))}
                            </ul>
                        </Collapsible>
                    ))}
                </Collapsible>
            </FancyScrollbar>
        </div>
    );
}

export default Neighbors;