diff --git a/src/display/components/filteroverlay.tsx b/src/display/components/filteroverlay.tsx deleted file mode 100644 index c087fd6c85c2d3eb37041290eb0bdb7a128488cf..0000000000000000000000000000000000000000 --- a/src/display/components/filteroverlay.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import React from "react"; -import Graph from "../graph"; -import PropTypes, { InferType } from "prop-types"; - -export { FilterOverlay }; - -class Link extends React.Component< - InferType<typeof Link.propTypes>, - InferType<typeof Link.stateTypes> -> { - static propTypes = { - type: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - width: PropTypes.number.isRequired, - toggledCallback: PropTypes.func, - }; - - static stateTypes = { - visible: PropTypes.bool, - }; - - constructor(props: InferType<typeof Link.propTypes>) { - super(props); - this.state = { visible: true }; - this.handleClick = this.handleClick.bind(this); - } - - handleClick() { - const callback = this.props.toggledCallback || null; - if (callback) { - callback(this.props.type); - } - this.setState( - ( - state: InferType<typeof Link.stateTypes>, - props: InferType<typeof Link.propTypes> - ) => ({ visible: !state.visible }) - ); - } - - render() { - const opacity = this.state.visible ? 1.0 : 0.4; - return ( - <div - className={"relation"} - style={{ opacity: opacity }} - onClick={this.handleClick} - > - <p>{this.props.type}</p> - <div - className={"rel-container"} - style={{ - width: this.props.width + "px", - backgroundColor: this.props.color, - }} - /> - </div> - ); - } -} - -/** - * Represents an overlay showing the meaning of different link/node colors. - * Offers the ability to toggle certain types. - */ -class FilterOverlay extends React.Component< - InferType<typeof FilterOverlay.propTypes>, - unknown -> { - static propTypes = { - graph: PropTypes.instanceOf(Graph).isRequired, - type: PropTypes.string.isRequired, - }; - - /** - * Callback which gets called when the visibility of a category has changed. - */ - filterChangedCallback: (type: string) => void; - - constructor(props: InferType<typeof FilterOverlay.propTypes>) { - super(props); - this.filterChangedCallback = (type) => void type; - this.toggleVisibility = this.toggleVisibility.bind(this); - } - - /** - * Renders an element for each category, which enables the user to toggle - * the corresponding visibility of assigned nodes. - */ - renderLinks() { - const classes = - this.props.type === "link" - ? this.props.graph.getLinkClasses() - : this.props.graph.getNodeClasses(); - - const chars = Math.max( - ...classes.map(function (c: string) { - return c.length; - }) - ); - - const links = []; - for (const link of classes) { - links.push( - <Link - type={link} - color={ - this.props.type == "link" - ? this.props.graph.edgeColors[link] - : this.props.graph.nodeColors[link] - } - width={10 * chars} - toggledCallback={this.toggleVisibility} - key={link} - /> - ); - } - return links; - } - - render() { - return <div className={"link-overlay"}>{this.renderLinks()}</div>; - } - - /** - * Event handler for the click event of the link type divs. - * Toggles the visibility of certain edge types. - */ - toggleVisibility(type: string) { - if (this.props.type === "link") { - this.props.graph.toggleLinkVisibility(type); - } else { - this.props.graph.toggleNodeVisibility(type); - } - this.filterChangedCallback(type); - - // TODO: This is really ugly. - this.props.graph.infoOverlay.bottomMenu.toggleCategory(type); - } -}