import * as React from "react"; import { connect } from "react-redux"; import { NonIdealState, Spinner } from "@blueprintjs/core"; import { push } from "connected-react-router"; import { Dispatch } from "redux"; import styled from "styled-components"; import { fetchGraph } from "../../redux/actions"; import { IAppState, IGraphResponse } from "../../redux/types"; import { colorSchemes, IColorScheme } from "../../types"; import { domainMatchSelector } from "../../util"; import { Cytoscape, ErrorState, GraphTools } from "../molecules/"; const GraphDiv = styled.div` flex: 2; `; interface IGraphProps { currentInstanceName: string | null; fetchGraph: () => void; graphResponse?: IGraphResponse; graphLoadError: boolean; hoveringOverResult?: string; isLoadingGraph: boolean; searchResultDomains: string[]; navigate: (path: string) => void; } interface IGraphState { colorScheme?: IColorScheme; isShowingEdges: boolean; } class GraphImpl extends React.PureComponent { private cytoscapeComponent: React.RefObject; public constructor(props: IGraphProps) { super(props); this.cytoscapeComponent = React.createRef(); this.state = { colorScheme: undefined, isShowingEdges: true }; } public componentDidMount() { this.loadGraph(); } public render() { let content; if (this.props.isLoadingGraph) { content = } title="Loading..." />; } else if (this.props.graphLoadError || !this.props.graphResponse) { content = ; } else { content = ( <> ); } return {content}; } private loadGraph = () => { if (!this.props.isLoadingGraph && !this.props.graphLoadError) { this.props.fetchGraph(); } }; private resetGraphPosition = () => { if (this.cytoscapeComponent.current) { this.cytoscapeComponent.current.resetGraphPosition(); } }; private toggleEdges = () => { this.setState({ isShowingEdges: !this.state.isShowingEdges }); }; private setColorScheme = (colorScheme?: IColorScheme) => { this.setState({ colorScheme }); }; private navigateToInstancePath = (domain: string) => { this.props.navigate(`/instance/${domain}`); }; private navigateToRoot = () => { this.props.navigate("/"); }; } const mapStateToProps = (state: IAppState) => { const match = domainMatchSelector(state); return { currentInstanceName: match && match.params.domain, graphLoadError: state.data.graphLoadError, graphResponse: state.data.graphResponse, hoveringOverResult: state.search.hoveringOverResult, isLoadingGraph: state.data.isLoadingGraph, searchResultDomains: state.search.results.map(r => r.name) }; }; const mapDispatchToProps = (dispatch: Dispatch) => ({ fetchGraph: () => dispatch(fetchGraph() as any), navigate: (path: string) => dispatch(push(path)) }); const Graph = connect( mapStateToProps, mapDispatchToProps )(GraphImpl); export default Graph;