import * as Config from "../config"; import { FilterOverlay } from "./components/filteroverlay"; import { NodeInfoOverlay } from "./components/nodeinfo"; import React from "react"; import screenfull from "screenfull"; import { GraphRenderer } from "./renderer"; import Graph from "./graph"; import { loadGraphJson } from "../datasets"; import PropTypes, { InferType } from "prop-types"; class Display extends React.Component< InferType<typeof Display.propTypes>, InferType<typeof Display.stateTypes> > { props: InferType<typeof Display.propTypes>; state: InferType<typeof Display.stateTypes>; infoOverlay: NodeInfoOverlay; sceneNode: HTMLElement; static propTypes = { spaceId: PropTypes.string.isRequired, }; static stateTypes = { graph: Graph, }; constructor(props: InferType<typeof Display.propTypes>) { super(props); this.state = { graph: null, }; } componentDidMount() { const fetchGraph = async () => { const graphData = await loadGraphJson(this.props.spaceId); const graph = new Graph(graphData.nodes, graphData.links); this.setState({ graph: graph }); }; fetchGraph(); // this.infoOverlay = new NodeInfoOverlay(this.graph); } /** * Callback which is called when the underlying graph has finished loading * its content */ loadGraphComponents() { // this.infoOverlay.create(); // this.sceneNode = document.getElementById("kg-display"); /* * This call is necessary since the graph can only load after the * component has mounted (the graph requires a fixed <div> element), * but some components rely on the graph being loaded. * The fix is to exclude all components from rendering until the graph * finished loading. * TODO: Once all components have been transformed to react components * this call could be substituted by changing the object state (which * causes a re-render) */ // this.forceUpdate(); // filterOverlay.filterChangedCallback = (cls) => // infoOverlay.bottomMenu.toggleTabVisibility(cls); // createFullScreenButton(); } toggleFullscreen() { if (screenfull.isEnabled) { screenfull.toggle(this.sceneNode); // this.graph.resize(); } else { console.log("No fullscreen mode available :("); } } render() { return ( <div id="kg-display" style={{ position: "relative" }}> <div className={"fullscreen-button no-select"} title={"Vollbild"} onClick={this.toggleFullscreen.bind(this)} > <p>⤢</p> </div> {/*{this.graph && (*/} {/* <FilterOverlay graph={this.graph} type={"node"} />*/} {/*)}*/} <div id="3d-graph" /> {this.state.graph && <GraphRenderer graph={this.state.graph} />} </div> ); } } export default Display;