inex/index.community
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix instance details view on mobile (fixes #88)

Browse source
This commit is contained in:
Tao Bror Bojlén 2019-08-06 21:35:26 +03:00
parent 75e66affe3
commit decdadf76e
No known key found for this signature in database
GPG key ID: C6EC7AAB905F9E6F
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed ### Fixed
- Fixed broken instance view on mobile devices.
### Security ### Security
## [2.4.1 - 2019-08-04] ## [2.4.1 - 2019-08-04]

11
frontend/src/components/screens/InstanceScreen.tsx
View file

@ -28,7 +28,7 @@ import { push } from "connected-react-router";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Dispatch } from "redux"; import { Dispatch } from "redux";
import styled from "styled-components"; import styled from "styled-components";
import { IAppState, IGraph, IInstanceDetails } from "../../redux/types"; import { IAppState, IGraph, IGraphResponse, IInstanceDetails } from "../../redux/types";
import { domainMatchSelector, getFromApi, isSmallScreen } from "../../util"; import { domainMatchSelector, getFromApi, isSmallScreen } from "../../util";
import { InstanceType } from "../atoms"; import { InstanceType } from "../atoms";
import { Cytoscape, ErrorState } from "../molecules/"; import { Cytoscape, ErrorState } from "../molecules/";
@ -173,14 +173,15 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
} }
this.setState({ isLoadingLocalGraph: true }); this.setState({ isLoadingLocalGraph: true });
getFromApi(`graph/${this.props.instanceName}`) getFromApi(`graph/${this.props.instanceName}`)
.then((response: IGraph) => { .then((response: IGraphResponse) => {
// We do some processing of edges here to make sure that every edge's source and target are in the neighborhood // We do some processing of edges here to make sure that every edge's source and target are in the neighborhood
// We could (and should) be doing this in the backend, but I don't want to mess around with complex SQL // We could (and should) be doing this in the backend, but I don't want to mess around with complex SQL
// queries. // queries.
// TODO: think more about moving the backend to a graph database that would make this easier. // TODO: think more about moving the backend to a graph database that would make this easier.
const nodeIds = new Set(response.nodes.map(n => n.data.id)); const graph = response.graph;
const edges = response.edges.filter(e => nodeIds.has(e.data.source) && nodeIds.has(e.data.target)); const nodeIds = new Set(graph.nodes.map(n => n.data.id));
this.setState({ isLoadingLocalGraph: false, localGraph: { ...response, edges } }); const edges = graph.edges.filter(e => nodeIds.has(e.data.source) && nodeIds.has(e.data.target));
this.setState({ isLoadingLocalGraph: false, localGraph: { ...graph, edges } });
}) })
.catch(() => this.setState({ isLoadingLocalGraph: false, localGraphLoadError: true })); .catch(() => this.setState({ isLoadingLocalGraph: false, localGraphLoadError: true }));
}; };