mirror of
https://github.com/bellingcat/gesara-entity-viz.git
synced 2026-06-07 19:18:32 +03:00
initial commit
This commit is contained in:
Tristan Lee
38
.gitignore
vendored
Normal file
38
.gitignore
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
.DS_STORE
|
||||
node_modules
|
||||
scripts/flow/*/.flowconfig
|
||||
.flowconfig
|
||||
*~
|
||||
*.pyc
|
||||
.grunt
|
||||
_SpecRunner.html
|
||||
__benchmarks__
|
||||
build/
|
||||
remote-repo/
|
||||
coverage/
|
||||
.module-cache
|
||||
fixtures/dom/public/react-dom.js
|
||||
fixtures/dom/public/react.js
|
||||
test/the-files-to-test.generated.js
|
||||
*.log*
|
||||
chrome-user-data
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
.idea
|
||||
*.iml
|
||||
.vscode
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
packages/react-devtools-core/dist
|
||||
packages/react-devtools-extensions/chrome/build
|
||||
packages/react-devtools-extensions/chrome/*.crx
|
||||
packages/react-devtools-extensions/chrome/*.pem
|
||||
packages/react-devtools-extensions/firefox/build
|
||||
packages/react-devtools-extensions/firefox/*.xpi
|
||||
packages/react-devtools-extensions/firefox/*.pem
|
||||
packages/react-devtools-extensions/shared/build
|
||||
packages/react-devtools-extensions/.tempUserDataDir
|
||||
packages/react-devtools-inline/dist
|
||||
packages/react-devtools-shell/dist
|
||||
packages/react-devtools-timeline/dist
|
||||
34
README.md
Normal file
34
README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Sigma.js full-featured demo
|
||||
|
||||
This project aims to provide a full-features "real life" application using sigma.js. It was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and uses [react-sigma-v2](https://github.com/sim51/react-sigma-v2) to interface sigma.js with React.
|
||||
|
||||
## Dataset
|
||||
|
||||
The dataset has been kindly crafted by the [Sciences-Po médialab](https://medialab.sciencespo.fr/) and [OuestWare](https://www.ouestware.com/en/) teams using [Seealsology](https://densitydesign.github.io/strumentalia-seealsology/). It represents a network of Wikipedia pages, connected by ["See also"](https://en.wikipedia.org/wiki/See_also) links. It then was tagged by hand.
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:5000](http://localhost:5000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.\
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
27377
package-lock.json
generated
Normal file
27377
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
52
package.json
Normal file
52
package.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "sigma-demo",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "./",
|
||||
"dependencies": {
|
||||
"@types/lodash": "^4.14.178",
|
||||
"@types/node": "^17.0.2",
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"babel-loader": "8.2.3",
|
||||
"graphology": "^0.23.2",
|
||||
"graphology-layout-forceatlas2": "^0.8.1",
|
||||
"graphology-types": "^0.24.5",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^17.0.2",
|
||||
"react-animate-height": "^2.0.23",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.3.1",
|
||||
"react-scripts": "5.0.0",
|
||||
"react-sigma-v2": "^1.3.0",
|
||||
"sigma": "latest",
|
||||
"typescript": "^4.5.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
],
|
||||
"rules": {
|
||||
"react-hooks/exhaustive-deps": "off"
|
||||
}
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
1
public/dataset_entities.json
Normal file
1
public/dataset_entities.json
Normal file
File diff suppressed because one or more lines are too long
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
37
public/index.html
Normal file
37
public/index.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#e22653" />
|
||||
<meta name="description" content="Entities mentioned in English-language posts from GESARA channels" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Entities mentioned in English-language posts from GESARA channels</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
114
src/canvas-utils.ts
Normal file
114
src/canvas-utils.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { NodeDisplayData, PartialButFor, PlainObject } from "sigma/types";
|
||||
import { Settings } from "sigma/settings";
|
||||
|
||||
const TEXT_COLOR = "#000000";
|
||||
|
||||
/**
|
||||
* This function draw in the input canvas 2D context a rectangle.
|
||||
* It only deals with tracing the path, and does not fill or stroke.
|
||||
*/
|
||||
export function drawRoundRect(
|
||||
ctx: CanvasRenderingContext2D,
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
radius: number,
|
||||
): void {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + width - radius, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||||
ctx.lineTo(x + width, y + height - radius);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
||||
ctx.lineTo(x + radius, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hover renderer
|
||||
*/
|
||||
export function drawHover(context: CanvasRenderingContext2D, data: PlainObject, settings: PlainObject) {
|
||||
const size = settings.labelSize;
|
||||
const font = settings.labelFont;
|
||||
const weight = settings.labelWeight;
|
||||
const subLabelSize = size - 2;
|
||||
|
||||
const label = data.label;
|
||||
const subLabel = data.tag !== "unknown" ? data.tag : "";
|
||||
const clusterLabel = data.clusterLabel;
|
||||
|
||||
// Then we draw the label background
|
||||
context.beginPath();
|
||||
context.fillStyle = "#fff";
|
||||
context.shadowOffsetX = 0;
|
||||
context.shadowOffsetY = 2;
|
||||
context.shadowBlur = 8;
|
||||
context.shadowColor = "#000";
|
||||
|
||||
context.font = `${weight} ${size}px ${font}`;
|
||||
const labelWidth = context.measureText(label).width;
|
||||
context.font = `${weight} ${subLabelSize}px ${font}`;
|
||||
const subLabelWidth = subLabel ? context.measureText(subLabel).width : 0;
|
||||
context.font = `${weight} ${subLabelSize}px ${font}`;
|
||||
const clusterLabelWidth = clusterLabel ? context.measureText(clusterLabel).width : 0;
|
||||
|
||||
const textWidth = Math.max(labelWidth, subLabelWidth, clusterLabelWidth);
|
||||
|
||||
const x = Math.round(data.x);
|
||||
const y = Math.round(data.y);
|
||||
const w = Math.round(textWidth + size / 2 + data.size + 3);
|
||||
const hLabel = Math.round(size / 2 + 4);
|
||||
const hSubLabel = subLabel ? Math.round(subLabelSize / 2 + 9) : 0;
|
||||
const hClusterLabel = Math.round(subLabelSize / 2 + 9);
|
||||
|
||||
drawRoundRect(context, x, y - hSubLabel - 12, w, hClusterLabel + hLabel + hSubLabel + 12, 5);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
|
||||
context.shadowOffsetX = 0;
|
||||
context.shadowOffsetY = 0;
|
||||
context.shadowBlur = 0;
|
||||
|
||||
// And finally we draw the labels
|
||||
context.fillStyle = TEXT_COLOR;
|
||||
context.font = `${weight} ${size}px ${font}`;
|
||||
context.fillText(label, data.x + data.size + 3, data.y + size / 3);
|
||||
|
||||
if (subLabel) {
|
||||
context.fillStyle = TEXT_COLOR;
|
||||
context.font = `${weight} ${subLabelSize}px ${font}`;
|
||||
context.fillText(subLabel, data.x + data.size + 3, data.y - (2 * size) / 3 - 2);
|
||||
}
|
||||
|
||||
context.fillStyle = data.color;
|
||||
context.font = `${weight} ${subLabelSize}px ${font}`;
|
||||
context.fillText(clusterLabel, data.x + data.size + 3, data.y + size / 3 + 3 + subLabelSize);
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom label renderer
|
||||
*/
|
||||
export default function drawLabel(
|
||||
context: CanvasRenderingContext2D,
|
||||
data: PartialButFor<NodeDisplayData, "x" | "y" | "size" | "label" | "color">,
|
||||
settings: Settings,
|
||||
): void {
|
||||
if (!data.label) return;
|
||||
|
||||
const size = settings.labelSize,
|
||||
font = settings.labelFont,
|
||||
weight = settings.labelWeight;
|
||||
|
||||
context.font = `${weight} ${size}px ${font}`;
|
||||
const width = context.measureText(data.label).width + 8;
|
||||
|
||||
context.fillStyle = "#ffffffcc";
|
||||
context.fillRect(data.x + data.size, data.y + size / 3 - 15, width, 20);
|
||||
|
||||
context.fillStyle = "#000";
|
||||
context.fillText(data.label, data.x + data.size + 3, data.y + size / 3);
|
||||
}
|
||||
12
src/index.tsx
Normal file
12
src/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import "./styles.css";
|
||||
import Root from "./views/Root";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<Root />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root"),
|
||||
);
|
||||
1
src/react-app-env.d.ts
vendored
Normal file
1
src/react-app-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
||||
335
src/styles.css
Normal file
335
src/styles.css
Normal file
@@ -0,0 +1,335 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora&family=Public+Sans:ital@0;1&display=swap");
|
||||
|
||||
/**
|
||||
* VARIABLES:
|
||||
* **********
|
||||
*/
|
||||
:root {
|
||||
--ruby: #e22653;
|
||||
--grey: #999;
|
||||
--dark-grey: #666;
|
||||
--light-grey: #ccc;
|
||||
--cream: #f9f7ed;
|
||||
--transparent-white: #ffffffcc;
|
||||
--transition: all ease-out 300ms;
|
||||
--shadow: 0 1px 5px var(--dark-grey);
|
||||
--hover-opacity: 0.7;
|
||||
--stage-padding: 8px;
|
||||
--panels-width: 350px;
|
||||
--border-radius: 3px;
|
||||
}
|
||||
|
||||
/**
|
||||
* BASE STYLES:
|
||||
* ************
|
||||
*/
|
||||
body {
|
||||
font-family: "Public Sans", sans-serif;
|
||||
background: white;
|
||||
font-size: 0.9em;
|
||||
overflow: hidden;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Lora, serif;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
margin: 0;
|
||||
}
|
||||
h2 > * {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
a {
|
||||
color: black !important;
|
||||
}
|
||||
a:hover {
|
||||
opacity: var(--hover-opacity);
|
||||
}
|
||||
|
||||
/**
|
||||
* LAYOUT:
|
||||
* *******
|
||||
*/
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#root {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
#app-root,
|
||||
.sigma-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.controls {
|
||||
position: absolute;
|
||||
bottom: var(--stage-padding);
|
||||
left: var(--stage-padding);
|
||||
}
|
||||
.graph-title {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: calc(100vw - var(--panels-width) - 3 * var(--stage-padding));
|
||||
padding: var(--stage-padding);
|
||||
}
|
||||
.graph-title h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.graph-title h1,
|
||||
.graph-title h2 {
|
||||
margin: 0;
|
||||
background: var(--transparent-white);
|
||||
}
|
||||
.panels {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 350px;
|
||||
max-height: calc(100vh - 2 * var(--stage-padding));
|
||||
overflow-y: auto;
|
||||
padding: var(--stage-padding);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--grey);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* USEFUL CLASSES:
|
||||
* ***************
|
||||
*/
|
||||
div.ico > button {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 1.8em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
color: black;
|
||||
background: white;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-top: 0.2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
div.ico > button:hover {
|
||||
color: var(--dark-grey);
|
||||
}
|
||||
div.ico > button > * {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
button.btn {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
outline: none;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.3em 0.5em;
|
||||
font-size: 1em;
|
||||
font-family: Lato, sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
button.btn:hover {
|
||||
opacity: var(--hover-opacity);
|
||||
}
|
||||
button.btn > * {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
ul > li {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
.text-muted {
|
||||
color: var(--dark-grey);
|
||||
}
|
||||
.text-small {
|
||||
font-size: 0.7em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.mouse-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**
|
||||
* CAPTIONS PANELS:
|
||||
* ****************
|
||||
*/
|
||||
.panel {
|
||||
background: white;
|
||||
padding: 1em;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.panel:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.panel h2 button {
|
||||
float: right;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1.2em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.panel h2 button:hover {
|
||||
opacity: var(--hover-opacity);
|
||||
}
|
||||
|
||||
.caption-row input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
.caption-row input[type="checkbox"]:not(:checked) + label {
|
||||
color: var(--dark-grey);
|
||||
}
|
||||
.caption-row input[type="checkbox"]:not(:checked) + label .circle {
|
||||
background-color: white !important;
|
||||
}
|
||||
.caption-row label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
}
|
||||
.caption-row label:hover {
|
||||
opacity: var(--hover-opacity);
|
||||
}
|
||||
.caption-row label .circle {
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 1.2em;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--dark-grey);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 0.2em;
|
||||
transition: var(--transition);
|
||||
border: 3px solid var(--dark-grey);
|
||||
}
|
||||
.caption-row label .node-label {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.caption-row label .bar {
|
||||
position: relative;
|
||||
background: var(--light-grey);
|
||||
height: 3px;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.caption-row label .bar .inside-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: var(--dark-grey);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/**
|
||||
* SEARCH FIELD:
|
||||
* *************
|
||||
*/
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.search-wrapper > input[type="search"] {
|
||||
width: calc(100%);
|
||||
height: 3em;
|
||||
box-shadow: var(--shadow);
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 0.5em;
|
||||
padding: 1em 1em 1em 3em;
|
||||
font-family: Lato, sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
.search-wrapper > .icon {
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* RESPONSIVENESS:
|
||||
* ***************
|
||||
*/
|
||||
@media (max-width: 767.98px) {
|
||||
#app-root:not(.show-contents) .contents,
|
||||
#app-root.show-contents .controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-root.show-contents .contents {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
background: var(--transparent-white);
|
||||
}
|
||||
#app-root.show-contents .graph-title,
|
||||
#app-root.show-contents .panels {
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
max-width: unset;
|
||||
position: static;
|
||||
overflow-y: visible;
|
||||
width: auto;
|
||||
}
|
||||
#app-root.show-contents .graph-title {
|
||||
background: white;
|
||||
padding-right: calc(3em + 2 * var(--stage-padding));
|
||||
min-height: 3em;
|
||||
}
|
||||
#app-root.show-contents .contents .hide-contents {
|
||||
position: absolute;
|
||||
top: var(--stage-padding);
|
||||
right: var(--stage-padding);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
button.show-contents,
|
||||
button.hide-contents {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
27
src/types.ts
Normal file
27
src/types.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { Extent } from "sigma/types";
|
||||
|
||||
export interface NodeData {
|
||||
key: string;
|
||||
label: string;
|
||||
cluster: string;
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface Cluster {
|
||||
key: string;
|
||||
color: string;
|
||||
clusterLabel: string;
|
||||
}
|
||||
|
||||
export interface Dataset {
|
||||
nodes: NodeData[];
|
||||
edges: [string, string][];
|
||||
clusters: Cluster[];
|
||||
bbox: {'x': Extent, 'y': Extent}
|
||||
}
|
||||
|
||||
export interface FiltersState {
|
||||
clusters: Record<string, boolean>;
|
||||
}
|
||||
27
src/use-debounce.ts
Normal file
27
src/use-debounce.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
function useDebounce<T>(value: T, delay: number): T {
|
||||
// State and setters for debounced value
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
// Update debounced value after delay
|
||||
const handler = setTimeout(() => {
|
||||
if (value !== debouncedValue) setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
// Cancel the timeout if value changes (also on delay change or unmount)
|
||||
// This is how we prevent debounced value from updating if value is changed ...
|
||||
// .. within the delay period. Timeout gets cleared and restarted.
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
},
|
||||
[value, delay], // Only re-call effect if value or delay changes
|
||||
);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
|
||||
export default useDebounce;
|
||||
112
src/views/ClustersPanel.tsx
Normal file
112
src/views/ClustersPanel.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import React, { FC, useEffect, useMemo, useState } from "react";
|
||||
import { useSigma } from "react-sigma-v2";
|
||||
import { sortBy, values, keyBy, mapValues } from "lodash";
|
||||
import { MdGroupWork } from "react-icons/md";
|
||||
import { AiOutlineCheckCircle, AiOutlineCloseCircle } from "react-icons/ai";
|
||||
|
||||
import { Cluster, FiltersState } from "../types";
|
||||
import Panel from "./Panel";
|
||||
|
||||
const ClustersPanel: FC<{
|
||||
clusters: Cluster[];
|
||||
filters: FiltersState;
|
||||
toggleCluster: (cluster: string) => void;
|
||||
setClusters: (clusters: Record<string, boolean>) => void;
|
||||
}> = ({ clusters, filters, toggleCluster, setClusters }) => {
|
||||
const sigma = useSigma();
|
||||
const graph = sigma.getGraph();
|
||||
|
||||
const nodesPerCluster = useMemo(() => {
|
||||
const index: Record<string, number> = {};
|
||||
graph.forEachNode((_, { cluster }) => (index[cluster] = (index[cluster] || 0) + 1));
|
||||
return index;
|
||||
}, []);
|
||||
|
||||
const maxNodesPerCluster = useMemo(() => Math.max(...values(nodesPerCluster)), [nodesPerCluster]);
|
||||
const visibleClustersCount = useMemo(() => Object.keys(filters.clusters).length, [filters]);
|
||||
|
||||
const [visibleNodesPerCluster, setVisibleNodesPerCluster] = useState<Record<string, number>>(nodesPerCluster);
|
||||
useEffect(() => {
|
||||
// To ensure the graphology instance has up to data "hidden" values for
|
||||
// nodes, we wait for next frame before reindexing. This won't matter in the
|
||||
// UX, because of the visible nodes bar width transition.
|
||||
requestAnimationFrame(() => {
|
||||
const index: Record<string, number> = {};
|
||||
graph.forEachNode((_, { cluster, hidden }) => !hidden && (index[cluster] = (index[cluster] || 0) + 1));
|
||||
setVisibleNodesPerCluster(index);
|
||||
});
|
||||
}, [filters]);
|
||||
|
||||
const sortedClusters = useMemo(
|
||||
() => sortBy(clusters, (cluster) => -nodesPerCluster[cluster.key]),
|
||||
[clusters, nodesPerCluster],
|
||||
);
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title={
|
||||
<>
|
||||
<MdGroupWork className="text-muted" /> Clusters
|
||||
{visibleClustersCount < clusters.length ? (
|
||||
<span className="text-muted text-small">
|
||||
{" "}
|
||||
({visibleClustersCount} / {clusters.length})
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p>
|
||||
<i className="text-muted">Click a cluster to show/hide related pages from the network.</i>
|
||||
</p>
|
||||
<p className="buttons">
|
||||
<button className="btn" onClick={() => setClusters(mapValues(keyBy(clusters, "key"), () => true))}>
|
||||
<AiOutlineCheckCircle /> Check all
|
||||
</button>{" "}
|
||||
<button className="btn" onClick={() => setClusters({})}>
|
||||
<AiOutlineCloseCircle /> Uncheck all
|
||||
</button>
|
||||
</p>
|
||||
<ul>
|
||||
{sortedClusters.map((cluster) => {
|
||||
const nodesCount = nodesPerCluster[cluster.key];
|
||||
const visibleNodesCount = visibleNodesPerCluster[cluster.key] || 0;
|
||||
return (
|
||||
<li
|
||||
className="caption-row"
|
||||
key={cluster.key}
|
||||
title={`${nodesCount} page${nodesCount > 1 ? "s" : ""}${
|
||||
visibleNodesCount !== nodesCount ? ` (only ${visibleNodesCount} visible)` : ""
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.clusters[cluster.key] || false}
|
||||
onChange={() => toggleCluster(cluster.key)}
|
||||
id={`cluster-${cluster.key}`}
|
||||
/>
|
||||
<label htmlFor={`cluster-${cluster.key}`}>
|
||||
<span className="circle" style={{ background: cluster.color, borderColor: cluster.color }} />{" "}
|
||||
<div className="node-label">
|
||||
<span>{cluster.clusterLabel}</span>
|
||||
<div className="bar" style={{ width: (100 * nodesCount) / maxNodesPerCluster + "%" }}>
|
||||
<div
|
||||
className="inside-bar"
|
||||
style={{
|
||||
width: (100 * visibleNodesCount) / nodesCount + "%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Panel>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClustersPanel;
|
||||
78
src/views/DescriptionPanel.tsx
Normal file
78
src/views/DescriptionPanel.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import React, { FC } from "react";
|
||||
import { BsInfoCircle } from "react-icons/bs";
|
||||
|
||||
import Panel from "./Panel";
|
||||
|
||||
const DescriptionPanel: FC = () => {
|
||||
return (
|
||||
<Panel
|
||||
initiallyDeployed
|
||||
title={
|
||||
<>
|
||||
<BsInfoCircle className="text-muted" /> Description
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p>
|
||||
This visualisation represents a <i>network</i> of{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://spacy.io/usage/linguistic-features#named-entities">
|
||||
named entities
|
||||
</a> in English-language posts archived in a database of Telegram channels that have posted about GESARA. Each{" "}
|
||||
<i>node</i> represents an entity, <i>edges</i> between nodes indicate that one or more posts contain both entities
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Some social media channels were identified by researchers from{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://www.bellingcat.com/">
|
||||
Bellingcat
|
||||
</a>{" "}and{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://www.lighthousereports.nl/">
|
||||
Lighthouse Reports
|
||||
</a>
|
||||
, then several rounds of snowball sampling found forwarded channels that have posted about GESARA.
|
||||
The entities were identified using {" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://spacy.io/">
|
||||
spaCy
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
This web application has been developed by{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://www.bellingcat.com/">
|
||||
Bellingcat
|
||||
</a>
|
||||
, using{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://reactjs.org/">
|
||||
react
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://www.sigmajs.org">
|
||||
sigma.js
|
||||
</a>
|
||||
. You can read the source code{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://github.com/jacomyal/sigma.js/tree/main/demo">
|
||||
on GitHub
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Node sizes are related to the number of times the entity was mentioned in the database.
|
||||
</p>
|
||||
<p>
|
||||
Nodes are colored based a{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://arxiv.org/abs/0803.0476">
|
||||
community detection algorithm
|
||||
</a>.
|
||||
</p>
|
||||
<p>
|
||||
For visualisation purposes, edges were pruned using the{" "}
|
||||
<a target="_blank" rel="noreferrer" href="https://github.com/naviddianati/GraphPruning">
|
||||
Marginal Likelihood Filter
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</Panel>
|
||||
);
|
||||
};
|
||||
|
||||
export default DescriptionPanel;
|
||||
45
src/views/GraphDataController.tsx
Normal file
45
src/views/GraphDataController.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useSigma } from "react-sigma-v2";
|
||||
import { FC, useEffect } from "react";
|
||||
import { keyBy, omit } from "lodash";
|
||||
|
||||
import { Dataset, FiltersState } from "../types";
|
||||
|
||||
const GraphDataController: FC<{ dataset: Dataset; filters: FiltersState }> = ({ dataset, filters, children }) => {
|
||||
const sigma = useSigma();
|
||||
const graph = sigma.getGraph();
|
||||
|
||||
/**
|
||||
* Feed graphology with the new dataset:
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!graph || !dataset) return;
|
||||
|
||||
sigma.setCustomBBox(dataset.bbox)
|
||||
|
||||
const clusters = keyBy(dataset.clusters, "key");
|
||||
|
||||
dataset.nodes.forEach((node) =>
|
||||
graph.addNode(node.key, {
|
||||
...node,
|
||||
...omit(clusters[node.cluster], "key"),
|
||||
}),
|
||||
);
|
||||
dataset.edges.forEach(([source, target]) => graph.addEdge(source, target, { size: 1 }));
|
||||
|
||||
return () => graph.clear();
|
||||
}, [graph, dataset]);
|
||||
|
||||
/**
|
||||
* Apply filters to graphology:
|
||||
*/
|
||||
useEffect(() => {
|
||||
const { clusters } = filters;
|
||||
graph.forEachNode((node, { cluster }) =>
|
||||
graph.setNodeAttribute(node, "hidden", !clusters[cluster]),
|
||||
);
|
||||
}, [graph, filters]);
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default GraphDataController;
|
||||
35
src/views/GraphEventsController.tsx
Normal file
35
src/views/GraphEventsController.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { useRegisterEvents, useSigma } from "react-sigma-v2";
|
||||
import { FC, useEffect } from "react";
|
||||
|
||||
function getMouseLayer() {
|
||||
return document.querySelector(".sigma-mouse");
|
||||
}
|
||||
|
||||
const GraphEventsController: FC<{ setHoveredNode: (node: string | null) => void }> = ({ setHoveredNode, children }) => {
|
||||
const registerEvents = useRegisterEvents();
|
||||
|
||||
/**
|
||||
* Initialize here settings that require to know the graph and/or the sigma
|
||||
* instance:
|
||||
*/
|
||||
useEffect(() => {
|
||||
registerEvents({
|
||||
enterNode({ node }) {
|
||||
setHoveredNode(node);
|
||||
// TODO: Find a better way to get the DOM mouse layer:
|
||||
const mouseLayer = getMouseLayer();
|
||||
if (mouseLayer) mouseLayer.classList.add("mouse-pointer");
|
||||
},
|
||||
leaveNode() {
|
||||
setHoveredNode(null);
|
||||
// TODO: Find a better way to get the DOM mouse layer:
|
||||
const mouseLayer = getMouseLayer();
|
||||
if (mouseLayer) mouseLayer.classList.remove("mouse-pointer");
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default GraphEventsController;
|
||||
60
src/views/GraphSettingsController.tsx
Normal file
60
src/views/GraphSettingsController.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useSigma } from "react-sigma-v2";
|
||||
import { FC, useEffect } from "react";
|
||||
|
||||
import { drawHover } from "../canvas-utils";
|
||||
import useDebounce from "../use-debounce";
|
||||
|
||||
const NODE_FADE_COLOR = "#bbb";
|
||||
const EDGE_FADE_COLOR = "#eee";
|
||||
|
||||
const GraphSettingsController: FC<{ hoveredNode: string | null }> = ({ children, hoveredNode }) => {
|
||||
const sigma = useSigma();
|
||||
const graph = sigma.getGraph();
|
||||
|
||||
// Here we debounce the value to avoid having too much highlights refresh when
|
||||
// moving the mouse over the graph:
|
||||
const debouncedHoveredNode = useDebounce(hoveredNode, 40);
|
||||
|
||||
/**
|
||||
* Initialize here settings that require to know the graph and/or the sigma
|
||||
* instance:
|
||||
*/
|
||||
useEffect(() => {
|
||||
sigma.setSetting("hoverRenderer", (context, data, settings) =>
|
||||
drawHover(context, { ...sigma.getNodeDisplayData(data.key), ...data }, settings),
|
||||
);
|
||||
}, [sigma, graph]);
|
||||
|
||||
/**
|
||||
* Update node and edge reducers when a node is hovered, to highlight its
|
||||
* neighborhood:
|
||||
*/
|
||||
useEffect(() => {
|
||||
const hoveredColor: string = debouncedHoveredNode ? sigma.getNodeDisplayData(debouncedHoveredNode)!.color : "";
|
||||
|
||||
sigma.setSetting(
|
||||
"nodeReducer",
|
||||
debouncedHoveredNode
|
||||
? (node, data) =>
|
||||
node === debouncedHoveredNode ||
|
||||
graph.hasEdge(node, debouncedHoveredNode) ||
|
||||
graph.hasEdge(debouncedHoveredNode, node)
|
||||
? { ...data, zIndex: 1 }
|
||||
: { ...data, zIndex: 0, label: "", color: NODE_FADE_COLOR, image: null, highlighted: false }
|
||||
: null,
|
||||
);
|
||||
sigma.setSetting(
|
||||
"edgeReducer",
|
||||
debouncedHoveredNode
|
||||
? (edge, data) =>
|
||||
graph.hasExtremity(edge, debouncedHoveredNode)
|
||||
? { ...data, color: hoveredColor, size: 4 }
|
||||
: { ...data, color: EDGE_FADE_COLOR, hidden: true }
|
||||
: null,
|
||||
);
|
||||
}, [debouncedHoveredNode]);
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default GraphSettingsController;
|
||||
47
src/views/GraphTitle.tsx
Normal file
47
src/views/GraphTitle.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React, { FC, useEffect, useState } from "react";
|
||||
import { useSigma } from "react-sigma-v2";
|
||||
|
||||
import { FiltersState } from "../types";
|
||||
|
||||
function prettyPercentage(val: number): string {
|
||||
return (val * 100).toFixed(1) + "%";
|
||||
}
|
||||
|
||||
const GraphTitle: FC<{ filters: FiltersState }> = ({ filters }) => {
|
||||
const sigma = useSigma();
|
||||
const graph = sigma.getGraph();
|
||||
|
||||
const [visibleItems, setVisibleItems] = useState<{ nodes: number; edges: number }>({ nodes: 0, edges: 0 });
|
||||
useEffect(() => {
|
||||
// To ensure the graphology instance has up to data "hidden" values for
|
||||
// nodes, we wait for next frame before reindexing. This won't matter in the
|
||||
// UX, because of the visible nodes bar width transition.
|
||||
requestAnimationFrame(() => {
|
||||
const index = { nodes: 0, edges: 0 };
|
||||
graph.forEachNode((_, { hidden }) => !hidden && index.nodes++);
|
||||
graph.forEachEdge((_, _2, _3, _4, source, target) => !source.hidden && !target.hidden && index.edges++);
|
||||
setVisibleItems(index);
|
||||
});
|
||||
}, [filters]);
|
||||
|
||||
return (
|
||||
<div className="graph-title">
|
||||
<h1>Entities mentioned in English-language posts from GESARA channels</h1>
|
||||
<h2>
|
||||
<i>
|
||||
{graph.order} node{graph.order > 1 ? "s" : ""}{" "}
|
||||
{visibleItems.nodes !== graph.order
|
||||
? ` (only ${prettyPercentage(visibleItems.nodes / graph.order)} visible)`
|
||||
: ""}
|
||||
, {graph.size} edge
|
||||
{graph.size > 1 ? "s" : ""}{" "}
|
||||
{visibleItems.edges !== graph.size
|
||||
? ` (only ${prettyPercentage(visibleItems.edges / graph.size)} visible)`
|
||||
: ""}
|
||||
</i>
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GraphTitle;
|
||||
37
src/views/Panel.tsx
Normal file
37
src/views/Panel.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React, { FC, useEffect, useRef, useState } from "react";
|
||||
import { MdExpandLess, MdExpandMore } from "react-icons/md";
|
||||
import AnimateHeight from "react-animate-height";
|
||||
|
||||
const DURATION = 300;
|
||||
|
||||
const Panel: FC<{ title: JSX.Element | string; initiallyDeployed?: boolean }> = ({
|
||||
title,
|
||||
initiallyDeployed,
|
||||
children,
|
||||
}) => {
|
||||
const [isDeployed, setIsDeployed] = useState(initiallyDeployed || false);
|
||||
const dom = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDeployed)
|
||||
setTimeout(() => {
|
||||
if (dom.current) dom.current.parentElement!.scrollTo({ top: dom.current.offsetTop - 5, behavior: "smooth" });
|
||||
}, DURATION);
|
||||
}, [isDeployed]);
|
||||
|
||||
return (
|
||||
<div className="panel" ref={dom}>
|
||||
<h2>
|
||||
{title}{" "}
|
||||
<button type="button" onClick={() => setIsDeployed((v) => !v)}>
|
||||
{isDeployed ? <MdExpandLess /> : <MdExpandMore />}
|
||||
</button>
|
||||
</h2>
|
||||
<AnimateHeight duration={DURATION} height={isDeployed ? "auto" : 0}>
|
||||
{children}
|
||||
</AnimateHeight>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Panel;
|
||||
133
src/views/Root.tsx
Normal file
133
src/views/Root.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import React, { FC, useEffect, useState } from "react";
|
||||
import { SigmaContainer, ZoomControl, FullScreenControl } from "react-sigma-v2";
|
||||
import { omit, mapValues, keyBy, constant } from "lodash";
|
||||
|
||||
import getNodeProgramImage from "sigma/rendering/webgl/programs/node.image";
|
||||
|
||||
import GraphSettingsController from "./GraphSettingsController";
|
||||
import GraphEventsController from "./GraphEventsController";
|
||||
import GraphDataController from "./GraphDataController";
|
||||
import DescriptionPanel from "./DescriptionPanel";
|
||||
import { Dataset, FiltersState } from "../types";
|
||||
import ClustersPanel from "./ClustersPanel";
|
||||
import SearchField from "./SearchField";
|
||||
import drawLabel from "../canvas-utils";
|
||||
import GraphTitle from "./GraphTitle";
|
||||
|
||||
import "react-sigma-v2/lib/react-sigma-v2.css";
|
||||
import { GrClose } from "react-icons/gr";
|
||||
import { BiRadioCircleMarked, BiBookContent } from "react-icons/bi";
|
||||
import { BsArrowsFullscreen, BsFullscreenExit, BsZoomIn, BsZoomOut } from "react-icons/bs";
|
||||
|
||||
const Root: FC = () => {
|
||||
const [showContents, setShowContents] = useState(false);
|
||||
const [dataReady, setDataReady] = useState(false);
|
||||
const [dataset, setDataset] = useState<Dataset | null>(null);
|
||||
const [filtersState, setFiltersState] = useState<FiltersState>({
|
||||
clusters: {},
|
||||
});
|
||||
const [hoveredNode, setHoveredNode] = useState<string | null>(null);
|
||||
|
||||
// Load data on mount:
|
||||
useEffect(() => {
|
||||
fetch(`${process.env.PUBLIC_URL}/dataset_entities.json`)
|
||||
.then((res) => res.json())
|
||||
.then((dataset: Dataset) => {
|
||||
setDataset(dataset);
|
||||
setFiltersState({
|
||||
clusters: mapValues(keyBy(dataset.clusters, "key"), constant(true)),
|
||||
});
|
||||
requestAnimationFrame(() => setDataReady(true));
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!dataset) return null;
|
||||
|
||||
return (
|
||||
<div id="app-root" className={showContents ? "show-contents" : ""}>
|
||||
<SigmaContainer
|
||||
graphOptions={{ type: "undirected" }}
|
||||
initialSettings={{
|
||||
nodeProgramClasses: { image: getNodeProgramImage() },
|
||||
labelRenderer: drawLabel,
|
||||
defaultNodeType: "image",
|
||||
labelDensity: 0.07,
|
||||
labelGridCellSize: 60,
|
||||
labelRenderedSizeThreshold: 10,
|
||||
labelFont: "Lato, sans-serif",
|
||||
zIndex: true,
|
||||
}}
|
||||
className="react-sigma"
|
||||
>
|
||||
<GraphSettingsController hoveredNode={hoveredNode} />
|
||||
<GraphEventsController setHoveredNode={setHoveredNode} />
|
||||
<GraphDataController dataset={dataset} filters={filtersState} />
|
||||
|
||||
{dataReady && (
|
||||
<>
|
||||
<div className="controls">
|
||||
<div className="ico">
|
||||
<button
|
||||
type="button"
|
||||
className="show-contents"
|
||||
onClick={() => setShowContents(true)}
|
||||
title="Show caption and description"
|
||||
>
|
||||
<BiBookContent />
|
||||
</button>
|
||||
</div>
|
||||
<FullScreenControl
|
||||
className="ico"
|
||||
customEnterFullScreen={<BsArrowsFullscreen />}
|
||||
customExitFullScreen={<BsFullscreenExit />}
|
||||
/>
|
||||
<ZoomControl
|
||||
className="ico"
|
||||
customZoomIn={<BsZoomIn />}
|
||||
customZoomOut={<BsZoomOut />}
|
||||
customZoomCenter={<BiRadioCircleMarked />}
|
||||
/>
|
||||
</div>
|
||||
<div className="contents">
|
||||
<div className="ico">
|
||||
<button
|
||||
type="button"
|
||||
className="ico hide-contents"
|
||||
onClick={() => setShowContents(false)}
|
||||
title="Show caption and description"
|
||||
>
|
||||
<GrClose />
|
||||
</button>
|
||||
</div>
|
||||
<GraphTitle filters={filtersState} />
|
||||
<div className="panels">
|
||||
<SearchField filters={filtersState} />
|
||||
<DescriptionPanel />
|
||||
<ClustersPanel
|
||||
clusters={dataset.clusters}
|
||||
filters={filtersState}
|
||||
setClusters={(clusters) =>
|
||||
setFiltersState((filters) => ({
|
||||
...filters,
|
||||
clusters,
|
||||
}))
|
||||
}
|
||||
toggleCluster={(cluster) => {
|
||||
setFiltersState((filters) => ({
|
||||
...filters,
|
||||
clusters: filters.clusters[cluster]
|
||||
? omit(filters.clusters, cluster)
|
||||
: { ...filters.clusters, [cluster]: true },
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</SigmaContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Root;
|
||||
102
src/views/SearchField.tsx
Normal file
102
src/views/SearchField.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React, { KeyboardEvent, ChangeEvent, FC, useEffect, useState } from "react";
|
||||
import { useSigma } from "react-sigma-v2";
|
||||
import { Attributes } from "graphology-types";
|
||||
import { BsSearch } from "react-icons/bs";
|
||||
|
||||
import { FiltersState } from "../types";
|
||||
|
||||
/**
|
||||
* This component is basically a fork from React-sigma-v2's SearchControl
|
||||
* component, to get some minor adjustments:
|
||||
* 1. We need to hide hidden nodes from results
|
||||
* 2. We need custom markup
|
||||
*/
|
||||
const SearchField: FC<{ filters: FiltersState }> = ({ filters }) => {
|
||||
const sigma = useSigma();
|
||||
|
||||
const [search, setSearch] = useState<string>("");
|
||||
const [values, setValues] = useState<Array<{ id: string; label: string }>>([]);
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
|
||||
const refreshValues = () => {
|
||||
const newValues: Array<{ id: string; label: string }> = [];
|
||||
const lcSearch = search.toLowerCase();
|
||||
if (!selected && search.length > 1) {
|
||||
sigma.getGraph().forEachNode((key: string, attributes: Attributes): void => {
|
||||
if (!attributes.hidden && attributes.label && attributes.label.toLowerCase().indexOf(lcSearch) === 0)
|
||||
newValues.push({ id: key, label: attributes.label });
|
||||
});
|
||||
}
|
||||
setValues(newValues);
|
||||
};
|
||||
|
||||
// Refresh values when search is updated:
|
||||
useEffect(() => refreshValues(), [search]);
|
||||
|
||||
// Refresh values when filters are updated (but wait a frame first):
|
||||
useEffect(() => {
|
||||
requestAnimationFrame(refreshValues);
|
||||
}, [filters]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selected) return;
|
||||
|
||||
sigma.getGraph().setNodeAttribute(selected, "highlighted", true);
|
||||
const nodeDisplayData = sigma.getNodeDisplayData(selected);
|
||||
|
||||
if (nodeDisplayData)
|
||||
sigma.getCamera().animate(
|
||||
{ ...nodeDisplayData, ratio: 0.05 },
|
||||
{
|
||||
duration: 600,
|
||||
},
|
||||
);
|
||||
|
||||
return () => {
|
||||
sigma.getGraph().setNodeAttribute(selected, "highlighted", false);
|
||||
};
|
||||
}, [selected]);
|
||||
|
||||
const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const searchString = e.target.value;
|
||||
const valueItem = values.find((value) => value.label === searchString);
|
||||
if (valueItem) {
|
||||
setSearch(valueItem.label);
|
||||
setValues([]);
|
||||
setSelected(valueItem.id);
|
||||
} else {
|
||||
setSelected(null);
|
||||
setSearch(searchString);
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" && values.length) {
|
||||
setSearch(values[0].label);
|
||||
setSelected(values[0].id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="search-wrapper">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search in nodes..."
|
||||
list="nodes"
|
||||
value={search}
|
||||
onChange={onInputChange}
|
||||
onKeyPress={onKeyPress}
|
||||
/>
|
||||
<BsSearch className="icon" />
|
||||
<datalist id="nodes">
|
||||
{values.map((value: { id: string; label: string }) => (
|
||||
<option key={value.id} value={value.label}>
|
||||
{value.label}
|
||||
</option>
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchField;
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user