nodeinfobar.tsx

import React from "react";
import { NodeData } from "../../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>;
    nodeClosedCallback?: () => void;
    nodeClickedCallback?: (node: NodeData) => void;
}

function NodeInfoBar({
    height,
    node,
    nodeColors,
    nodeClosedCallback,
    nodeClickedCallback,
}: InfoBarProps) {
    return (
        <div id={"infoOverlay"} className={"detail-view"} style={{ height }}>
            <div
                className={"close-button"}
                id={"infoOverlayCloseButton"}
                onClick={nodeClosedCallback}
            >
                <p>&#10006;</p>
            </div>

            <div className={"detail-view-info-area"}>
                <FancyScrollbar>
                    <TitleArea name={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;