From decdadf76e231032749ff12257f93ebd72c0bd9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bror=20Bojl=C3=A9n?= <tao@btao.org>
Date: Tue, 6 Aug 2019 21:35:26 +0300
Subject: [PATCH] fix instance details view on mobile (fixes #88)

---
 CHANGELOG.md                                       |  2 ++
 frontend/src/components/screens/InstanceScreen.tsx | 11 ++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a7b303..6d1bdb4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed broken instance view on mobile devices.
+
 ### Security
 
 ## [2.4.1 - 2019-08-04]
diff --git a/frontend/src/components/screens/InstanceScreen.tsx b/frontend/src/components/screens/InstanceScreen.tsx
index 7a3f7f3..70760dd 100644
--- a/frontend/src/components/screens/InstanceScreen.tsx
+++ b/frontend/src/components/screens/InstanceScreen.tsx
@@ -28,7 +28,7 @@ import { push } from "connected-react-router";
 import { Link } from "react-router-dom";
 import { Dispatch } from "redux";
 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 { InstanceType } from "../atoms";
 import { Cytoscape, ErrorState } from "../molecules/";
@@ -173,14 +173,15 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
     }
     this.setState({ isLoadingLocalGraph: true });
     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 could (and should) be doing this in the backend, but I don't want to mess around with complex SQL
         // queries.
         // 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 edges = response.edges.filter(e => nodeIds.has(e.data.source) && nodeIds.has(e.data.target));
-        this.setState({ isLoadingLocalGraph: false, localGraph: { ...response, edges } });
+        const graph = response.graph;
+        const nodeIds = new Set(graph.nodes.map(n => n.data.id));
+        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 }));
   };