diff --git a/pkg/interface/src/views/apps/graph/app.js b/pkg/interface/src/views/apps/graph/app.js
new file mode 100644
index 000000000..c396ed137
--- /dev/null
+++ b/pkg/interface/src/views/apps/graph/app.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+
+export default class GraphApp extends Component {
+ render() {
+ const { props } = this;
+ const contacts = props.contacts ? props.contacts : {};
+ const groups = props.groups ? props.groups : {};
+ const associations =
+ props.associations ? props.associations : { graph: {}, contacts: {} };
+ const graphKeys = props.graphKeys || new Set([]);
+ const graphs = props.graphs || {};
+
+ const { api, sidebarShown, hideAvatars, hideNicknames, s3, remoteContentPolicy } = this.props;
+
+ return (
+ <>
+
+ {
+ const resource =
+ `${props.match.params.ship}/${props.match.params.name}`;
+
+ const autoJoin = () => {
+ try {
+ api.graph.joinGraph(
+ `~${props.match.params.ship}`,
+ props.match.params.name
+ );
+ props.history.push(`/~graph/${resource}`);
+ } catch(err) {
+ setTimeout(autoJoin, 2000);
+ }
+ };
+ autoJoin();
+ }}
+ />
+ {
+ const resourcePath =
+ `${props.match.params.ship}/${props.match.params.name}`;
+ const resource =
+ associations.graph[resourcePath] ?
+ associations.graph[resourcePath] : { metadata: {} };
+ const contactDetails = contacts[resource['group-path']] || {};
+ const popout = props.match.url.includes('/popout/');
+ const graph = graphs[resourcePath] || null;
+
+ if ('app-name' in resource) {
+ // TODO: add proper tags to graph-store's tag-queries,
+ // then push the proper path to history
+ props.history.push();
+ }
+
+ return (
+ Redirecting...
+ );
+ }}
+ />
+
+ >
+ );
+ }
+}
+
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 12dbbce92..9cafd2e96 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -92,25 +92,6 @@ export class LinksApp extends Component {
);
}}
/>
- {
- const resource =
- `${props.match.params.ship}/${props.match.params.name}`;
-
- const autoJoin = () => {
- try {
- api.graph.joinGraph(
- `~${props.match.params.ship}`,
- props.match.params.name
- );
- props.history.push(`/~link/${resource}`);
- } catch(err) {
- setTimeout(autoJoin, 2000);
- }
- };
- autoJoin();
- }}
- />
{
const resourcePath =
diff --git a/pkg/interface/src/views/components/Content.js b/pkg/interface/src/views/components/Content.js
index 47625c743..fd25e881f 100644
--- a/pkg/interface/src/views/components/Content.js
+++ b/pkg/interface/src/views/components/Content.js
@@ -54,7 +54,8 @@ export const Content = (props) => {
path={[
'/~chat',
'/~publish',
- '/~link'
+ '/~link',
+ '/~graph'
]}
render={ p => (
{
@@ -39,6 +40,16 @@ export const TwoPaneApp = (props) => {
{...props} />
)}
/>
+ (
+
+ )}
+ />
);
}