diff --git a/visualizer/README.md b/visualizer/README.md index 22bfb4f..940b5c2 100644 --- a/visualizer/README.md +++ b/visualizer/README.md @@ -7,4 +7,4 @@ It works as any React app in terms of building, running etc. If you just want to 1. Ensure that you have Node >=16 and npm installed. See https://docs.npmjs.com/downloading-and-installing-node-js-and-npm. 2. From the directory `conspiracies/visualizer`, run `npm install`. 3. Then run `npm start` which will open a development server on `localhost:3000`. -4. Load in the file `graph.json` from your output via the GUI. \ No newline at end of file +4. Load in the file `graph.json` from your output via the GUI. diff --git a/visualizer/electron-main.js b/visualizer/electron-main.js index e1d363d..38213e9 100644 --- a/visualizer/electron-main.js +++ b/visualizer/electron-main.js @@ -1,7 +1,6 @@ const { app, BrowserWindow } = require("electron"); const path = require("path"); - function createWindow() { const mainWindow = new BrowserWindow(); diff --git a/visualizer/public/index.html b/visualizer/public/index.html index 32055ae..5ddbf33 100644 --- a/visualizer/public/index.html +++ b/visualizer/public/index.html @@ -1,12 +1,9 @@ - + - + Visualizer diff --git a/visualizer/public/manifest.json b/visualizer/public/manifest.json index d0c7108..96b3f5a 100644 --- a/visualizer/public/manifest.json +++ b/visualizer/public/manifest.json @@ -1,8 +1,7 @@ { "short_name": "Visualizer", "name": "Narrative Graphs Visualizer", - "icons": [ - ], + "icons": [], "start_url": ".", "display": "standalone", "theme_color": "#000000", diff --git a/visualizer/src/common/LogarithmicRangeSlider.tsx b/visualizer/src/common/LogarithmicRangeSlider.tsx index b766506..2ca6226 100644 --- a/visualizer/src/common/LogarithmicRangeSlider.tsx +++ b/visualizer/src/common/LogarithmicRangeSlider.tsx @@ -89,19 +89,19 @@ const LogarithmicRangeSlider: React.FC = ({ ]; return ( - + ); }; export default LogarithmicRangeSlider; diff --git a/visualizer/src/graph/GraphOptionsControlPanel.tsx b/visualizer/src/graph/GraphOptionsControlPanel.tsx index 3b374a4..afc9554 100644 --- a/visualizer/src/graph/GraphOptionsControlPanel.tsx +++ b/visualizer/src/graph/GraphOptionsControlPanel.tsx @@ -1,69 +1,84 @@ import React from "react"; -import './graph.css' -import {Options} from "react-vis-graph-wrapper"; - +import "./graph.css"; +import { Options } from "react-vis-graph-wrapper"; interface GraphOptionsControlPanelProps { - options: Options; - setOptions: React.Dispatch>; - + options: Options; + setOptions: React.Dispatch>; } function getSmoothEnabled(options: Options): boolean { - if (typeof options.edges?.smooth === 'boolean') { - return options.edges.smooth; - } else if (typeof options.edges?.smooth === 'object' && 'enabled' in options.edges.smooth) { - return options.edges.smooth.enabled; - } else { - return false; - } + if (typeof options.edges?.smooth === "boolean") { + return options.edges.smooth; + } else if ( + typeof options.edges?.smooth === "object" && + "enabled" in options.edges.smooth + ) { + return options.edges.smooth.enabled; + } else { + return false; + } } -export const GraphOptionsControlPanel = ({options, setOptions}: GraphOptionsControlPanelProps) => { - - - return
-
- Physics enabled: - setOptions( - { - ...options, - physics: { - ...options.physics, - enabled: event.target.checked - } - }) - }/> -
-
- Rounded edges: - setOptions( - { - ...options, - edges: { - ...options.edges, - smooth: !options.edges?.smooth - } - }) - }/> -
-
- Edge length: - setOptions( - { - ...options, - physics: { - ...options.physics, - barnesHut: { - springLength: Number(event.target.value) - } - } - }) - } - step="1"/> -
+export const GraphOptionsControlPanel = ({ + options, + setOptions, +}: GraphOptionsControlPanelProps) => { + return ( +
+
+ Physics enabled: + + setOptions({ + ...options, + physics: { + ...options.physics, + enabled: event.target.checked, + }, + }) + } + /> +
+
+ Rounded edges: + + setOptions({ + ...options, + edges: { + ...options.edges, + smooth: !options.edges?.smooth, + }, + }) + } + /> +
+
+ Edge length: + + setOptions({ + ...options, + physics: { + ...options.physics, + barnesHut: { + springLength: Number(event.target.value), + }, + }, + }) + } + step="1" + /> +
-} \ No newline at end of file + ); +}; diff --git a/visualizer/src/index.css b/visualizer/src/index.css index ec2585e..4a1df4d 100644 --- a/visualizer/src/index.css +++ b/visualizer/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/visualizer/src/index.tsx b/visualizer/src/index.tsx index 77c175d..008f05d 100644 --- a/visualizer/src/index.tsx +++ b/visualizer/src/index.tsx @@ -4,8 +4,6 @@ import "./index.css"; import App from "./App"; const root = ReactDOM.createRoot( - document.getElementById("root") as HTMLElement -); -root.render( - + document.getElementById("root") as HTMLElement, ); +root.render(); diff --git a/visualizer/tsconfig.json b/visualizer/tsconfig.json index a273b0c..9d379a3 100644 --- a/visualizer/tsconfig.json +++ b/visualizer/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +16,5 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": ["src"] }