nodeinfobar.tsx

import React from "react";

import "./nodeinfobar.css";
import { NodeData } from "../../../common/graph";
import TitleArea from "./titlearea";
import FancyScrollbar from "../fancyscrollbar";
import MediaArea from "./mediaarea";
import Neighbors from "./neighbors";

interface InfoBarProps {
    height: number;
    node: NodeData;
    nodeColors?: Map<string, string>;
    onClose?: () => void;
    nodeClickedCallback?: (node: NodeData) => void;
}

/**
 * Displays a sidebar showing information on a specific node.
 * @param height Height of the sidebar.
 * @param node Node which drives the presented information.
 * @param nodeColors Mapping of node types to colors.
 * @param onClose Optional callback, called when the menu is closed.
 * @param nodeClickedCallback Optional callback, called when a neighbor of the current node gets selected.
 * @constructor
 */
function NodeInfoBar({
    height,
    node,
    nodeColors,
    onClose,
    nodeClickedCallback,
}: InfoBarProps) {
    return (
        <div className={"node-info-bar"} style={{ height }}>
            <div className={"node-info-bar-close-button"} onClick={onClose}>
                <p>&#10006;</p>
            </div>

            <div className={"node-info-bar-info-area"}>
                <FancyScrollbar>
                    <TitleArea title={node.name} image={node.banner} />
                    <MediaArea
                        description={node.description}
                        image={node.banner}
                        video={node.video}
                        references={node.references}
                    />
                </FancyScrollbar>
            </div>

            <Neighbors
                neighbors={node.neighbors}
                nodeColors={nodeColors}
                nodeClickedCallback={nodeClickedCallback}
            />
        </div>
    );
}

export default NodeInfoBar;