frontend/cytoscape feature parity

.gitignore

@@ -2,7 +2,7 @@
 .idea/
 *.gexf
 data/
-.vscode/
+*.class
 
 backend/.sobelow
 
@@ -80,6 +80,7 @@ yarn-error.log*
 
 /gephi/.gradle/
 /gephi/build/
+/gephi/bin/
 /gephi/lib/*
 /gephi/!lib/.gitkeep
 # 64MB file but I don't have much faith that it'll remain available...

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "jakebecker.elixir-ls",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "kevinmcgowan.typescriptimport",
+    "msjsdiag.debugger-for-chrome"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/frontend/src",
+      "runtimeExecutable": "/usr/bin/chromium-browser"
+    }
+  ]
+}

README.md

@@ -6,8 +6,16 @@ Read the latest updates on Mastodon: [@fediversespace](https://cursed.technology
 
 ![A screenshot of fediverse.space](screenshot.png)
 
+1. [Requirements](#requirements)
+2. [Running it](#running-it)
+3. [Commands](#commands)
+4. [Privacy](#privacy)
+5. [Acknowledgements](#acknowledgements)
+
 ## Requirements
 
+Though dockerized, backend development is easiest if you have the following installed.
+
 - For the scraper + API:
   - Elixir
   - Postgres
@@ -17,8 +25,6 @@ Read the latest updates on Mastodon: [@fediversespace](https://cursed.technology
   - Node.js
   - Yarn
 
-All of the above can also be run through Docker with `docker-compose`.
-
 ## Running it
 
 ### Backend
@@ -37,17 +43,21 @@ All of the above can also be run through Docker with `docker-compose`.
 
 ### Backend
 
-After running the backend in Docker:
-
-- `docker-compose run gephi java -Xmx1g -jar build/libs/graphBuilder.jar` lays out the graph
-
 `./gradlew shadowJar` compiles the graph layout program. `java -Xmx1g -jar build/libs/graphBuilder.jar` runs it.
+If running in docker, this means you run
+
+- `docker-compose build gephi`
+- `docker-compose run gephi java -Xmx1g -jar build/libs/graphBuilder.jar` lays out the graph
 
 ### Frontend
 
-- `yarn build` to create an optimized build for deployment
+- `yarn build` creates an optimized build for deployment
 
-### Acknowledgements
+## Privacy
+
+This project doesn't crawl personal instances: the goal is to understand communities, not individuals. The threshold for what makes an instance "personal" is defined in the [backend config](backend/config/config.exs) and the [graph builder SQL](gephi/src/main/java/space/fediverse/graph/GraphBuilder.java).
+
+## Acknowledgements
 
 [![NLnet logo](https://i.imgur.com/huV3rvo.png)](https://nlnet.nl/project/fediverse_space/)
 

backend/lib/backend/api.ex

@@ -1,5 +1,6 @@
 defmodule Backend.Api do
   alias Backend.{Crawl, Edge, Instance, Repo}
+  import Backend.Util
   import Ecto.Query
 
   @spec list_instances() :: [Instance.t()]
@@ -18,18 +19,27 @@ defmodule Backend.Api do
   @doc """
   Returns a list of instances that
   * have a user count (required to give the instance a size on the graph)
+  * the user count is > the threshold
   * have x and y coordinates
   """
   @spec list_nodes() :: [Instance.t()]
   def list_nodes() do
+    user_threshold = get_config(:personal_instance_threshold)
+
     Instance
-    |> where([i], not is_nil(i.x) and not is_nil(i.y) and not is_nil(i.user_count))
+    |> where(
+      [i],
+      not is_nil(i.x) and not is_nil(i.y) and not is_nil(i.user_count) and
+        i.user_count >= ^user_threshold
+    )
     |> select([c], [:domain, :user_count, :x, :y])
     |> Repo.all()
   end
 
   @spec list_edges() :: [Edge.t()]
   def list_edges() do
+    user_threshold = get_config(:personal_instance_threshold)
+
     Edge
     |> join(:inner, [e], i1 in Instance, on: e.source_domain == i1.domain)
     |> join(:inner, [e], i2 in Instance, on: e.target_domain == i2.domain)
@@ -37,7 +47,8 @@ defmodule Backend.Api do
     |> where(
       [e, i1, i2],
       not is_nil(i1.x) and not is_nil(i1.y) and
-        not is_nil(i2.x) and not is_nil(i2.y)
+        not is_nil(i2.x) and not is_nil(i2.y) and
+        i1.user_count >= ^user_threshold and i2.user_count >= ^user_threshold
     )
     |> Repo.all()
   end

backend/lib/backend/crawler/crawler.ex

@@ -188,6 +188,10 @@ defmodule Backend.Crawler do
   end
 
   defp save(%{domain: domain, error: error}) do
+    if error == nil do
+      error = "no api found"
+    end
+
     Repo.insert!(%Crawl{
       instance_domain: domain,
       error: error

backend/lib/backend_web/controllers/instance_controller.ex

@@ -4,7 +4,7 @@ defmodule BackendWeb.InstanceController do
   import Backend.Util
   alias Backend.Api
 
-  action_fallback BackendWeb.FallbackController
+  action_fallback(BackendWeb.FallbackController)
 
   def index(conn, _params) do
     instances = Api.list_instances()
@@ -13,7 +13,7 @@ defmodule BackendWeb.InstanceController do
 
   def show(conn, %{"id" => domain}) do
     instance = Api.get_instance!(domain)
-    last_crawl = get_last_crawl(domain)
+    last_crawl = get_last_successful_crawl(domain)
     render(conn, "show.json", instance: instance, crawl: last_crawl)
   end
 

backend/lib/backend_web/views/instance_view.ex

@@ -1,6 +1,7 @@
 defmodule BackendWeb.InstanceView do
   use BackendWeb, :view
   alias BackendWeb.InstanceView
+  import Backend.Util
   require Logger
 
   def render("index.json", %{instances: instances}) do
@@ -16,6 +17,8 @@ defmodule BackendWeb.InstanceView do
   end
 
   def render("instance_detail.json", %{instance: instance, crawl: crawl}) do
+    user_threshold = get_config(:personal_instance_threshold)
+
     [status, last_updated] =
       case crawl do
         nil ->
@@ -28,6 +31,14 @@ defmodule BackendWeb.InstanceView do
           end
       end
 
+    cond do
+      instance.user_count < user_threshold ->
+        %{
+          name: instance.domain,
+          status: "personal instance"
+        }
+
+      true ->
         %{
           name: instance.domain,
           description: instance.description,
@@ -42,3 +53,4 @@ defmodule BackendWeb.InstanceView do
         }
     end
   end
+end

frontend/package.json

@@ -34,7 +34,7 @@
     "classnames": "^2.2.6",
     "cross-fetch": "^3.0.4",
     "cytoscape": "^3.8.1",
-    "cytoscape-cola": "^2.3.0",
+    "cytoscape-popper": "^1.0.4",
     "lodash": "^4.17.14",
     "moment": "^2.22.2",
     "normalize.css": "^8.0.0",
@@ -49,7 +49,8 @@
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
     "sanitize-html": "^1.20.1",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.3.2",
+    "tippy.js": "^4.3.4"
   },
   "devDependencies": {
     "@blueprintjs/tslint-config": "^1.8.1",

frontend/src/components/Cytoscape.tsx

@@ -0,0 +1,152 @@
+import cytoscape from "cytoscape";
+import popper from "cytoscape-popper";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import styled from "styled-components";
+import tippy, { Instance } from "tippy.js";
+import { DEFAULT_NODE_COLOR, SELECTED_NODE_COLOR } from "../constants";
+
+const EntireWindowDiv = styled.div`
+  position: absolute;
+  top: 50px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+`;
+
+interface ICytoscapeProps {
+  elements: cytoscape.ElementsDefinition;
+  onInstanceSelect: (domain: string) => void;
+  onInstanceDeselect: () => void;
+}
+class Cytoscape extends React.Component<ICytoscapeProps> {
+  public cy?: cytoscape.Core;
+
+  public componentDidMount() {
+    const container = ReactDOM.findDOMNode(this);
+    cytoscape.use(popper as any);
+    this.cy = cytoscape({
+      autoungrabify: true,
+      container: container as any,
+      elements: this.props.elements,
+      hideEdgesOnViewport: true,
+      hideLabelsOnViewport: true,
+      layout: {
+        name: "preset"
+      },
+      maxZoom: 2,
+      minZoom: 0.03,
+      pixelRatio: 1.0,
+      selectionType: "single"
+    });
+
+    // Setup node tooltip on hover
+    this.cy.nodes().forEach(n => {
+      const domain = n.data("id");
+      const ref = (n as any).popperRef();
+      const t = tippy(ref, {
+        animateFill: false,
+        animation: "fade",
+        content: domain,
+        duration: 100,
+        trigger: "manual"
+      });
+      n.on("mouseover", e => {
+        (t as Instance).show();
+      });
+      n.on("mouseout", e => {
+        (t as Instance).hide();
+      });
+    });
+
+    const style = this.cy.style() as any;
+
+    style
+      .clear()
+      .selector("node")
+      .style({
+        "background-color": DEFAULT_NODE_COLOR,
+        // The size from the backend is log_10(userCount), which from 10 <= userCount <= 1,000,000 gives us the range
+        // 1-6. We map this to the range of sizes we want.
+        // TODO: I should probably check that that the backend is actually using log_10 and not log_e, but it look
+        // quite good as it is, so...
+        height: "mapData(size, 1, 6, 20, 200)",
+        label: "data(id)",
+        width: "mapData(size, 1, 6, 20, 200)"
+      })
+      .selector("node:selected")
+      .style({
+        "background-color": SELECTED_NODE_COLOR
+      })
+      .selector("edge")
+      .style({
+        "curve-style": "haystack", // fast edges
+        "line-color": DEFAULT_NODE_COLOR,
+        width: "mapData(weight, 0, 0.5, 1, 20)"
+      })
+      .selector("node[label]")
+      .style({
+        color: DEFAULT_NODE_COLOR,
+        "font-size": 50,
+        "min-zoomed-font-size": 16
+      })
+      .selector(".hidden")
+      .style({
+        display: "none"
+      })
+      .selector(".thickEdge")
+      .style({
+        width: 2
+      })
+      .update();
+
+    this.cy.nodes().on("select", e => {
+      const instanceId = e.target.data("id");
+      if (instanceId) {
+        this.props.onInstanceSelect(instanceId);
+      }
+
+      const neighborhood = this.cy!.$id(instanceId).closedNeighborhood();
+      // Reset graph visibility
+      this.cy!.batch(() => {
+        this.cy!.nodes().removeClass("hidden");
+        this.cy!.edges().removeClass("thickEdge");
+        // Then hide everything except neighborhood
+        this.cy!.nodes()
+          .diff(neighborhood)
+          .left.addClass("hidden");
+        neighborhood.connectedEdges().addClass("thickEdge");
+      });
+    });
+    this.cy.nodes().on("unselect", e => {
+      this.props.onInstanceDeselect();
+      this.cy!.batch(() => {
+        this.cy!.nodes().removeClass("hidden");
+        this.cy!.edges().removeClass("thickEdge");
+      });
+    });
+    this.cy.on("click", e => {
+      // Clicking on the background should also deselect
+      const target = e.target;
+      if (!target) {
+        this.props.onInstanceDeselect();
+      }
+      this.cy!.batch(() => {
+        this.cy!.nodes().removeClass("hidden");
+        this.cy!.edges().removeClass("thickEdge");
+      });
+    });
+  }
+
+  public componentWillUnmount() {
+    if (this.cy) {
+      this.cy.destroy();
+    }
+  }
+
+  public render() {
+    return <EntireWindowDiv />;
+  }
+}
+
+export default Cytoscape;

frontend/src/components/CytoscapeGraph.tsx

@@ -1,218 +0,0 @@
-import cytoscape from "cytoscape";
-// import cola from "cytoscape-cola";
-import * as React from "react";
-import { connect } from "react-redux";
-
-import { Dispatch } from "redux";
-import styled from "styled-components";
-import { DEFAULT_NODE_COLOR, SELECTED_NODE_COLOR } from "../constants";
-import { selectAndLoadInstance } from "../redux/actions";
-import { IAppState, IGraph } from "../redux/types";
-import { ErrorState } from "./ErrorState";
-// import { FloatingLayoutSelect } from "./FloatingLayoutSelect";
-import { FloatingResetButton } from "./FloatingResetButton";
-
-interface IGraphProps {
-  graph?: IGraph;
-  currentInstanceName: string | null;
-  selectAndLoadInstance: (name: string) => void;
-}
-interface IGraphState {
-  layoutAlgorithm: string;
-  isLayouting: boolean;
-  didError: boolean;
-}
-class GraphImpl extends React.Component<IGraphProps, IGraphState> {
-  private cy?: cytoscape.Core;
-  // private layout?: cytoscape.Layouts;
-  private cytoscapeDiv: React.RefObject<HTMLElement>;
-
-  public constructor(props: IGraphProps) {
-    super(props);
-    this.cytoscapeDiv = React.createRef();
-    this.state = { layoutAlgorithm: "cola", isLayouting: false, didError: false };
-  }
-
-  public render() {
-    if (this.state.didError) {
-      return <ErrorState />;
-    }
-
-    const FullDiv = styled.div`
-      position: absolute;
-      top: 50px;
-      bottom: 0;
-      right: 0;
-      left: 0;
-    `;
-
-    return (
-      <div>
-        <FullDiv id="cytoscape" ref={this.cytoscapeDiv as any} />
-        {/* <FloatingLayoutSelect
-          onItemSelect={this.handleLayoutSelect}
-          currentLayoutKey={this.state.layoutAlgorithm}
-          startLayout={this.startLayout}
-          stopLayout={this.stopLayout}
-        /> */}
-        <FloatingResetButton onClick={this.resetGraph} />
-      </div>
-    );
-  }
-
-  public componentDidMount() {
-    let { graph } = this.props;
-    if (!graph) {
-      this.setState({ didError: true });
-      return;
-    }
-
-    // Check that all nodes have size & coordinates; otherwise the graph will look messed up
-    const lengthBeforeFilter = graph.nodes.length;
-    graph = { ...graph, nodes: graph.nodes.filter(n => n.data.size && n.position.x && n.position.y) };
-    if (graph.nodes.length !== lengthBeforeFilter) {
-      // tslint:disable-next-line:no-console
-      console.error(
-        "Some nodes were missing details: " +
-          graph.nodes.filter(n => !n.data.size || !n.position.x || !n.position.y).map(n => n.data.label)
-      );
-      this.setState({ didError: true });
-    }
-
-    // cytoscape.use(cola as any);
-    this.initGraph();
-  }
-
-  public componentDidUpdate() {
-    this.initGraph();
-  }
-
-  // private handleLayoutSelect = (layout: string) => {
-  //   this.setState({ layoutAlgorithm: layout });
-  // };
-
-  // private startLayout = () => {
-  //   if (!this.cy) {
-  //     return;
-  //   }
-  //   const options = {
-  //     cola: {
-  //       animate: true,
-  //       convergenceThreshold: 0.1,
-  //       edgeLength: (edge: any) => 1 / edge.data("weight"),
-  //       name: "cola"
-  //     },
-  //     cose: {
-  //       animate: false,
-  //       idealEdgeLength: (edge: any) => 1 / edge.data("weight"),
-  //       name: "cose",
-  //       numIter: 100
-  //     }
-  //   };
-  //   this.layout = this.cy.layout(options[this.state.layoutAlgorithm] as any);
-  //   this.layout.run();
-  // };
-
-  // private stopLayout = () => {
-  //   if (!this.layout) {
-  //     return;
-  //   }
-  //   this.layout.stop();
-  // };
-
-  private initGraph = () => {
-    const { graph } = this.props;
-    if (this.state.didError || !graph) {
-      return;
-    }
-    this.cy = cytoscape({
-      autoungrabify: false,
-      container: this.cytoscapeDiv.current,
-      elements: {
-        edges: graph.edges.map(e => ({
-          ...e,
-          data: {
-            ...e.data,
-            weight: Math.min(Math.max(e.data.weight * 100, 2), 10)
-          },
-          selectable: false
-        })),
-        nodes: graph.nodes.map(n => ({
-          ...n,
-          data: {
-            ...n.data,
-            size: Math.min(Math.max(n.data.size * 10, 10), 80)
-          }
-        }))
-      },
-      layout: {
-        name: "preset"
-      },
-      selectionType: "single",
-      style: [
-        {
-          selector: "node:selected",
-          style: {
-            "background-color": SELECTED_NODE_COLOR,
-            label: "data(id)"
-          }
-        },
-        {
-          selector: "node",
-          style: {
-            "background-color": DEFAULT_NODE_COLOR,
-            height: "data(size)",
-            label: "data(id)",
-            width: "data(size)"
-          }
-        },
-        {
-          selector: "edge",
-          style: {
-            width: "data(weight)"
-          }
-        },
-        {
-          selector: "label",
-          style: {
-            color: DEFAULT_NODE_COLOR
-          }
-        }
-      ]
-    });
-    this.cy.nodes().on("select", e => {
-      const instanceId = e.target.data("id");
-      if (instanceId) {
-        // console.log(`selecting ${instanceId}`);
-        // console.log(`now selected: ${this.cy && this.cy.$(":selected")}`);
-        this.props.selectAndLoadInstance(instanceId);
-      }
-    });
-    this.cy.nodes().on("unselect", e => {
-      const instanceId = e.target.data("id");
-      if (instanceId) {
-        // console.log(`unselecting ${instanceId}`);
-        this.props.selectAndLoadInstance("");
-      }
-    });
-  };
-
-  private resetGraph = () => {
-    if (!this.cy) {
-      return;
-    }
-    this.cy.reset();
-  };
-}
-
-const mapStateToProps = (state: IAppState) => ({
-  currentInstanceName: state.currentInstance.currentInstanceName,
-  graph: state.data.graph
-});
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  selectAndLoadInstance: (instanceName: string) => dispatch(selectAndLoadInstance(instanceName) as any)
-});
-export const CytoscapeGraph = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(GraphImpl);

frontend/src/components/FloatingLayoutSelect.tsx

@@ -1,53 +0,0 @@
-import { Button, H6, MenuItem } from "@blueprintjs/core";
-import { IconNames } from "@blueprintjs/icons";
-import { ItemRenderer, Select } from "@blueprintjs/select";
-import * as React from "react";
-import FloatingCard from "./FloatingCard";
-
-interface ILayoutToDisplayName {
-  [key: string]: string;
-}
-const layouts: ILayoutToDisplayName = {
-  cola: "COLA",
-  cose: "CoSE"
-};
-const LayoutSelect = Select.ofType<string>();
-
-const LayoutItemRenderer: ItemRenderer<string> = (layout, { handleClick, modifiers }) => (
-  <MenuItem active={modifiers.active} key={layout} onClick={handleClick} text={layout} />
-);
-
-interface IFloatingLayoutSelectProps {
-  currentLayoutKey: string;
-  onItemSelect: (layout: string) => void;
-  startLayout: () => void;
-  stopLayout: () => void;
-}
-export const FloatingLayoutSelect: React.FC<IFloatingLayoutSelectProps> = ({
-  currentLayoutKey,
-  onItemSelect,
-  startLayout,
-  stopLayout
-}) => {
-  return (
-    <FloatingCard>
-      <H6>Layout</H6>
-      <LayoutSelect
-        items={Object.keys(layouts)}
-        itemRenderer={LayoutItemRenderer}
-        filterable={false}
-        onItemSelect={onItemSelect}
-        popoverProps={{ minimal: true }}
-      >
-        <Button
-          icon="film"
-          rightIcon="caret-down"
-          text={currentLayoutKey ? layouts[currentLayoutKey] : "(No selection)"}
-        />
-      </LayoutSelect>
-      <br />
-      <Button icon={IconNames.PLAY} onClick={startLayout} />
-      <Button icon={IconNames.STOP} onClick={stopLayout} />
-    </FloatingCard>
-  );
-};

frontend/src/components/Graph.jsx

@@ -1,107 +0,0 @@
-import * as React from "react";
-import { connect } from "react-redux";
-import { Sigma, Filter, ForceAtlas2 } from "react-sigma";
-
-import { selectAndLoadInstance } from "../redux/actions";
-import { ErrorState } from "./ErrorState";
-
-const STYLE = {
-  bottom: "0",
-  left: "0",
-  position: "absolute",
-  right: "0",
-  top: "50px"
-};
-const DEFAULT_NODE_COLOR = "#CED9E0";
-const SELECTED_NODE_COLOR = "#48AFF0";
-const SETTINGS = {
-  defaultEdgeColor: "#5C7080",
-  defaultLabelColor: "#F5F8FA",
-  defaultNodeColor: DEFAULT_NODE_COLOR,
-  drawEdges: true,
-  drawLabels: true,
-  edgeColor: "default",
-  labelColor: "default",
-  labelThreshold: 10,
-  maxEdgeSize: 1,
-  minEdgeSize: 0.3
-};
-
-class GraphImpl extends React.Component {
-  constructor(props) {
-    super(props);
-    this.sigmaComponent = React.createRef();
-  }
-
-  render() {
-    let graph = this.props.graph;
-    if (!graph) {
-      return <ErrorState />;
-    }
-    // Check that all nodes have size & coordinates; otherwise the graph will look messed up
-    const lengthBeforeFilter = graph.nodes.length;
-    graph = { ...graph, nodes: graph.nodes.filter(n => n.size && n.x && n.y) };
-    if (graph.nodes.length !== lengthBeforeFilter) {
-      // tslint:disable-next-line:no-console
-      console.error(
-        "Some nodes were missing details: " +
-          this.props.graph.nodes.filter(n => !n.size || !n.x || !n.y).map(n => n.label)
-      );
-      return <ErrorState />;
-    }
-    return (
-      <Sigma
-        graph={graph}
-        renderer="webgl"
-        settings={SETTINGS}
-        style={STYLE}
-        onClickNode={this.onClickNode}
-        onClickStage={this.onClickStage}
-        ref={this.sigmaComponent}
-      >
-        <Filter neighborsOf={this.props.currentInstanceName} />
-        <ForceAtlas2 iterationsPerRender={1} timeout={10000} />
-      </Sigma>
-    );
-  }
-
-  componentDidUpdate() {
-    const sigma = this.sigmaComponent && this.sigmaComponent.current.sigma;
-    // Check if sigma exists s.t. nothing breaks if the graph didn't load (for whatever reason)
-    if (sigma) {
-      sigma.graph.nodes().map(this.colorNodes);
-      sigma.refresh();
-    }
-  }
-
-  onClickNode = e => {
-    this.props.selectAndLoadInstance(e.data.node.label);
-  };
-
-  onClickStage = e => {
-    // Deselect the instance (unless this was a drag event)
-    if (!e.data.captor.isDragging) {
-      this.props.selectAndLoadInstance(null);
-    }
-  };
-
-  colorNodes = n => {
-    if (this.props.currentInstanceName && n.id === this.props.currentInstanceName) {
-      n.color = SELECTED_NODE_COLOR;
-    } else {
-      n.color = DEFAULT_NODE_COLOR;
-    }
-  };
-}
-
-const mapStateToProps = state => ({
-  currentInstanceName: state.currentInstance.currentInstanceName,
-  graph: state.data.graph
-});
-const mapDispatchToProps = dispatch => ({
-  selectAndLoadInstance: instanceName => dispatch(selectAndLoadInstance(instanceName))
-});
-export const Graph = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(GraphImpl);

frontend/src/components/Graph.tsx

@@ -0,0 +1,101 @@
+import { get } from "lodash";
+import * as React from "react";
+import { connect } from "react-redux";
+
+import { Dispatch } from "redux";
+import { selectAndLoadInstance } from "../redux/actions";
+import { IAppState, IGraph } from "../redux/types";
+import Cytoscape from "./Cytoscape";
+import { ErrorState } from "./ErrorState";
+import { FloatingResetButton } from "./FloatingResetButton";
+
+interface IGraphProps {
+  graph?: IGraph;
+  currentInstanceName: string | null;
+  selectAndLoadInstance: (name: string) => void;
+}
+class GraphImpl extends React.Component<IGraphProps> {
+  private cytoscapeComponent: React.RefObject<Cytoscape>;
+
+  public constructor(props: IGraphProps) {
+    super(props);
+    this.cytoscapeComponent = React.createRef();
+  }
+
+  public render() {
+    if (!this.props.graph) {
+      return <ErrorState />;
+    }
+
+    return (
+      <div>
+        <Cytoscape
+          elements={this.props.graph}
+          onInstanceSelect={this.onInstanceSelect}
+          onInstanceDeselect={this.onInstanceDeselect}
+          ref={this.cytoscapeComponent}
+        />
+        <FloatingResetButton onClick={this.resetGraphPosition} />
+      </div>
+    );
+  }
+
+  public componentDidUpdate(prevProps: IGraphProps) {
+    const { currentInstanceName } = this.props;
+    if (prevProps.currentInstanceName !== currentInstanceName) {
+      const cy = this.getCytoscape();
+      cy.$id(prevProps.currentInstanceName).unselect();
+      if (currentInstanceName) {
+        // Select instance
+        cy.$id(`${currentInstanceName}`).select();
+        // Center it
+        const selected = cy.$id(currentInstanceName);
+        cy.center(selected);
+      }
+    }
+  }
+
+  private resetGraphPosition = () => {
+    const cy = this.getCytoscape();
+    const { currentInstanceName } = this.props;
+    if (currentInstanceName) {
+      cy.zoom({
+        level: 0.2,
+        position: cy.$id(currentInstanceName).position()
+      });
+    } else {
+      cy.zoom({
+        level: 0.2,
+        position: { x: 0, y: 0 }
+      });
+    }
+  };
+
+  private onInstanceSelect = (domain: string) => {
+    this.props.selectAndLoadInstance(domain);
+  };
+
+  private onInstanceDeselect = () => {
+    this.props.selectAndLoadInstance("");
+  };
+
+  private getCytoscape = () => {
+    const cy = get(this.cytoscapeComponent, "current.cy");
+    if (!cy) {
+      throw new Error("Expected cytoscape component but did not find one.");
+    }
+    return cy;
+  };
+}
+const mapStateToProps = (state: IAppState) => ({
+  currentInstanceName: state.currentInstance.currentInstanceName,
+  graph: state.data.graph
+});
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  selectAndLoadInstance: (instanceName: string) => dispatch(selectAndLoadInstance(instanceName) as any)
+});
+const Graph = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(GraphImpl);
+export default Graph;

frontend/src/components/Sidebar.tsx

@@ -5,7 +5,6 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import sanitize from "sanitize-html";
-import styled from "styled-components";
 
 import {
   AnchorButton,
@@ -30,6 +29,7 @@ import { IconNames } from "@blueprintjs/icons";
 
 import { selectAndLoadInstance } from "../redux/actions";
 import { IAppState, IGraph, IInstanceDetails } from "../redux/types";
+import FullDiv from "./atoms/FullDiv";
 import { ErrorState } from "./ErrorState";
 
 interface ISidebarProps {
@@ -104,22 +104,43 @@ class SidebarImpl extends React.Component<ISidebarProps, ISidebarState> {
   };
 
   private renderSidebarContents = () => {
+    let content;
     if (this.props.isLoadingInstanceDetails || this.state.isProcessingNeighbors) {
-      return this.renderLoadingState();
+      content = this.renderLoadingState();
     } else if (!this.props.instanceDetails) {
       return this.renderEmptyState();
     } else if (this.props.instanceDetails.status.toLowerCase().indexOf("personal instance") > -1) {
-      return this.renderPersonalInstanceErrorState();
+      content = this.renderPersonalInstanceErrorState();
     } else if (this.props.instanceDetails.status !== "success") {
-      return this.renderMissingDataState();
+      content = this.renderMissingDataState();
     } else if (this.props.instanceLoadError) {
-      return <ErrorState />;
+      return (content = <ErrorState />);
+    } else {
+      content = this.renderTabs();
     }
     return (
-      <div>
+      <FullDiv>
         {this.renderHeading()}
+        {content}
+      </FullDiv>
+    );
+  };
+
+  private renderTabs = () => {
+    const hasNeighbors = this.state.neighbors && this.state.neighbors.length > 0;
+
+    const insularCallout = hasNeighbors ? (
+      undefined
+    ) : (
+      <Callout icon={IconNames.INFO_SIGN} title="Insular instance">
+        <p>This instance doesn't have any neighbors that we know of, so it's hidden from the graph.</p>
+      </Callout>
+    );
+    return (
+      <div>
+        {insularCallout}
         <Tabs>
-          {this.props.instanceDetails.description && (
+          {this.props.instanceDetails!.description && (
             <Tab id="description" title="Description" panel={this.renderDescription()} />
           )}
           {this.shouldRenderStats() && <Tab id="stats" title="Details" panel={this.renderVersionAndCounts()} />}
@@ -138,7 +159,7 @@ class SidebarImpl extends React.Component<ISidebarProps, ISidebarState> {
   private renderHeading = () => {
     let content: JSX.Element;
     if (!this.props.instanceName) {
-      content = <span>{"No instance selected"}</span>;
+      return;
     } else {
       content = (
         <span>
@@ -150,19 +171,9 @@ class SidebarImpl extends React.Component<ISidebarProps, ISidebarState> {
       );
     }
 
-    const hasNeighbors = this.state.neighbors && this.state.neighbors.length > 0;
-
-    const insularCallout = hasNeighbors ? (
-      undefined
-    ) : (
-      <Callout icon={IconNames.INFO_SIGN} title="Insular instance">
-        <p>This instance doesn't have any neighbors that we know of, so it's hidden from the graph.</p>
-      </Callout>
-    );
     return (
       <div>
         <H2>{content}</H2>
-        {insularCallout}
         <Divider />
       </div>
     );
@@ -346,8 +357,8 @@ class SidebarImpl extends React.Component<ISidebarProps, ISidebarState> {
         title="No data"
         description="This instance has fewer than 10 users. It was not crawled in order to protect their privacy, but if it's your instance you can opt in."
         action={
-          <AnchorButton icon={IconNames.CONFIRM} href="https://cursed.technology/@tao" target="_blank">
+          <AnchorButton icon={IconNames.CONFIRM} href="https://cursed.technology/@fediversespace" target="_blank">
-            Message @tao to opt in
+            Message @fediversespace to opt in
           </AnchorButton>
         }
       />
@@ -355,12 +366,8 @@ class SidebarImpl extends React.Component<ISidebarProps, ISidebarState> {
   };
 
   private renderMissingDataState = () => {
-    const FillDiv = styled.div`
-      width: 100%;
-      height: 100%;
-    `;
     return (
-      <FillDiv>
+      <FullDiv>
         <NonIdealState
           icon={IconNames.ERROR}
           title="No data"
@@ -369,7 +376,7 @@ class SidebarImpl extends React.Component<ISidebarProps, ISidebarState> {
         <span className="sidebar-hidden-instance-status" style={{ display: "none" }}>
           {this.props.instanceDetails && this.props.instanceDetails.status}
         </span>
-      </FillDiv>
+      </FullDiv>
     );
   };
 

frontend/src/components/atoms/FullDiv.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export default styled.div`
+  width: 100%;
+  height: 100%;
+`;

frontend/src/components/screens/GraphScreen.tsx

@@ -6,8 +6,8 @@ import { NonIdealState, Spinner } from "@blueprintjs/core";
 
 import { fetchGraph, fetchInstances } from "../../redux/actions";
 import { IAppState, IGraph, IInstance } from "../../redux/types";
-import { CytoscapeGraph } from "../CytoscapeGraph";
 import { ErrorState } from "../ErrorState";
+import Graph from "../Graph";
 import { Sidebar } from "../Sidebar";
 
 interface IGraphScreenProps {
@@ -48,7 +48,7 @@ class GraphScreenImpl extends React.Component<IGraphScreenProps> {
   };
 
   private graphState = () => {
-    const content = this.props.graphLoadError ? <ErrorState /> : <CytoscapeGraph />;
+    const content = this.props.graphLoadError ? <ErrorState /> : <Graph />;
     return (
       <div>
         <Sidebar />

frontend/src/typings/cytoscape-cola.d.ts

@@ -1,3 +0,0 @@
-declare module "cytoscape-cola" {
-  const prototype: {};
-}

frontend/src/typings/cytoscape-popper.d.ts

@@ -0,0 +1,3 @@
+declare module "cytoscape-popper" {
+  const prototype: {};
+}

frontend/tsconfig.json

@@ -4,7 +4,10 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "preserve",
-    "lib": ["esnext", "dom"],
+    "lib": [
+      "es2015",
+      "dom"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noImplicitAny": true,
@@ -20,11 +23,19 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "strict": true,
-    "typeRoots": ["./node_modules/@types", "./src/typings"],
+    "typeRoots": [
+      "./node_modules/@types",
+      "./src/typings"
+    ],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true
   },
-  "exclude": ["node_modules", "build"],
+  "exclude": [
-  "include": ["src"]
+    "node_modules",
+    "build"
+  ],
+  "include": [
+    "src"
+  ]
 }

frontend/yarn.lock

@@ -3413,12 +3413,12 @@ cyclist@~0.2.2:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
   integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
 
-cytoscape-cola@^2.3.0:
+cytoscape-popper@^1.0.4:
-  version "2.3.0"
+  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cytoscape-cola/-/cytoscape-cola-2.3.0.tgz#24104eaab46e0a88dfeedb02199610450525208d"
+  resolved "https://registry.yarnpkg.com/cytoscape-popper/-/cytoscape-popper-1.0.4.tgz#13388223d6d84f66f121643fb1213c26d1c693f8"
-  integrity sha512-xblxlCH8JXGLdH6XMUBJY3xBUJuL1rLy8bLMGvqkvoPHSbBfV+/klMWoqwervVKWOmFHPwUdihtxy8stG4RM5g==
+  integrity sha512-rKzWiuhGDw0+1UwKK+2eXkZVSNR8TxAXp3k0QOOkH0GW1w55mnCDUVUKZuQyXqHtcZie+TnW1FJ5ml2Uc/lkOg==
   dependencies:
-    webcola "^3.3.6"
+    popper.js "^1.0.0"
 
 cytoscape@^3.8.1:
   version "3.8.1"
@@ -3428,29 +3428,6 @@ cytoscape@^3.8.1:
     heap "^0.2.6"
     lodash.debounce "^4.0.8"
 
-d3-dispatch@1, d3-dispatch@^1.0.3:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.5.tgz#e25c10a186517cd6c82dd19ea018f07e01e39015"
-  integrity sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g==
-
-d3-drag@^1.0.4:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.3.tgz#46e206ad863ec465d88c588098a1df444cd33c64"
-  integrity sha512-8S3HWCAg+ilzjJsNtWW1Mutl74Nmzhb9yU6igspilaJzeZVFktmY6oO9xOh5TDk+BM2KrNFjttZNoJJmDnkjkg==
-  dependencies:
-    d3-dispatch "1"
-    d3-selection "1"
-
-d3-selection@1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
-  integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==
-
-d3-timer@^1.0.5:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba"
-  integrity sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg==
-
 damerau-levenshtein@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
@@ -7920,7 +7897,7 @@ pnp-webpack-plugin@1.2.1:
   dependencies:
     ts-pnp "^1.0.0"
 
-popper.js@^1.14.1, popper.js@^1.14.4:
+popper.js@^1.0.0, popper.js@^1.14.1, popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
   integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
@@ -10347,6 +10324,13 @@ tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tippy.js@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.4.tgz#9a91fd5ce8c401f181b7adaa6b2c27f3d105f3ba"
+  integrity sha512-O2ukxHOJTLVYZ/TfHjNd8WgAWoefX9uk5QiWRdHfX2PR2lBpUU4BJQLl7U2Ykc8K7o16gTeHEElpuRfgD5b0aA==
+  dependencies:
+    popper.js "^1.14.7"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -10930,15 +10914,6 @@ web-namespaces@^1.1.2:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
   integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg==
 
-webcola@^3.3.6:
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/webcola/-/webcola-3.3.9.tgz#a54cae07478f1b25968d280b0d4a369c0b4352b3"
-  integrity sha512-hjE23yiRU+7AGajxuDdUDW8txyMVgXHCW71erA0UVKYx0lruqs1o4QFQ0OSpSdNS6wlAwgk0IPxhuEiQq1MXfQ==
-  dependencies:
-    d3-dispatch "^1.0.3"
-    d3-drag "^1.0.4"
-    d3-timer "^1.0.5"
-
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"

gephi/src/main/java/space/fediverse/graph/GraphBuilder.java

@@ -87,7 +87,7 @@ public class GraphBuilder {
         importController.process(container, new DefaultProcessor(), workspace);
 
         // Layout
-        AutoLayout autoLayout = new AutoLayout(1, TimeUnit.MINUTES);
+        AutoLayout autoLayout = new AutoLayout(2, TimeUnit.MINUTES);
         autoLayout.setGraphModel(graphModel);
         // YifanHuLayout firstLayout = new YifanHuLayout(null, new
         // StepDisplacement(1f));