Move frontend to correct directory
This commit is contained in:
William Jeynes
@@ -13,7 +13,7 @@ from tqdm import tqdm
|
||||
INPUT_CSV = "../../data/dataset-dev.csv"
|
||||
OUTPUT_JSON = "../../data/clustered_output.json"
|
||||
MODEL_NAME = "all-MiniLM-L6-v2"
|
||||
SIMILARITY_THRESHOLD = 0.55
|
||||
SIMILARITY_THRESHOLD = 0.65
|
||||
|
||||
def generate_guid():
|
||||
return str(uuid.uuid4())
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
.parcel-cache/
|
||||
dist/
|
||||
node_modules/
|
||||
src/data.json
|
||||
-3576
File diff suppressed because it is too large
Load Diff
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"name": "parcel-react-client-starter",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"source": "src/index.html",
|
||||
"scripts": {
|
||||
"start": "parcel",
|
||||
"build": "parcel build"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"react-force-graph-2d": "^1.29.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"parcel": "^2.14.0"
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
font-family: system-ui;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import ForceGraph2D from "react-force-graph-2d";
|
||||
|
||||
import data from "./data.json";
|
||||
|
||||
function buildGraph(data) {
|
||||
const nodes = [];
|
||||
const links = [];
|
||||
|
||||
const claimClusterMap = new Map();
|
||||
const eventClusterMap = new Map();
|
||||
|
||||
// Build cluster nodes
|
||||
data.claim_clusters.forEach((cluster) => {
|
||||
const clusterNode = {
|
||||
id: cluster.cluster_id,
|
||||
label: cluster.title || "Unnamed Claim Cluster",
|
||||
type: "claim_cluster",
|
||||
members: cluster.members
|
||||
};
|
||||
nodes.push(clusterNode);
|
||||
claimClusterMap.set(cluster.cluster_id, clusterNode);
|
||||
});
|
||||
|
||||
data.event_clusters.forEach((cluster) => {
|
||||
const clusterNode = {
|
||||
id: cluster.cluster_id,
|
||||
label: cluster.title || "Unnamed Event Cluster",
|
||||
type: "event_cluster",
|
||||
members: cluster.members
|
||||
};
|
||||
nodes.push(clusterNode);
|
||||
eventClusterMap.set(cluster.cluster_id, clusterNode);
|
||||
});
|
||||
|
||||
// Build links between clusters
|
||||
data.cluster_links.forEach((link) => {
|
||||
links.push({ source: link.claim_cluster_id, target: link.event_cluster_id });
|
||||
});
|
||||
|
||||
return { nodes, links };
|
||||
}
|
||||
|
||||
export function App() {
|
||||
const [selectedNode, setSelectedNode] = useState(null);
|
||||
|
||||
const graphData = useMemo(() => buildGraph(data), []);
|
||||
function setNode(node) {
|
||||
console.log(node)
|
||||
setSelectedNode(node)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<ForceGraph2D
|
||||
graphData={graphData}
|
||||
nodeLabel={(node) => node.label}
|
||||
nodeAutoColorBy="type"
|
||||
//linkDirectionalParticles={1}
|
||||
//linkDirectionalParticleSpeed={0.002}
|
||||
onNodeRightClick={(node) => setNode(node)}
|
||||
nodeCanvasObject={(node, ctx, globalScale) => {
|
||||
const fontSize = 12;
|
||||
ctx.font = `${fontSize}px Sans-Serif`;
|
||||
ctx.fillStyle = node.type.includes('claim') ? "blue" : "green";
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, 2*node.members.length , 0, 2 * Math.PI, false);
|
||||
ctx.fill();
|
||||
|
||||
if (node.members.length > 2) {
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillText(node.label, node.x + 12, node.y + 4);
|
||||
}
|
||||
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ position:"absolute", top:0, left:0 }}>
|
||||
<h2>Details</h2>
|
||||
{selectedNode ? (
|
||||
<div>
|
||||
<p><strong>ID:</strong> {selectedNode.id}</p>
|
||||
<p><strong>Type:</strong> {selectedNode.type}</p>
|
||||
<p><strong>Title / Label:</strong> {selectedNode.label}</p>
|
||||
{selectedNode.members && (
|
||||
<div>
|
||||
<p><strong>Members:</strong></p>
|
||||
<ul>
|
||||
{selectedNode.members.map((m) => {
|
||||
const memberData = data.claims.find(c => c.id === m) || data.events.find(e => e.id === m);
|
||||
return <li key={m}>{memberData ? memberData.text : m}</li>;
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p>Click a cluster node to see its members</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Parcel React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +0,0 @@
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { StrictMode } from 'react';
|
||||
import { App } from './App';
|
||||
|
||||
let container = document.getElementById("app")!;
|
||||
let root = createRoot(container)
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
"target": "ES2020",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"jsx": "react-jsx",
|
||||
"useDefineForClassFields": true,
|
||||
|
||||
/* Modules */
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
|
||||
/* Emit */
|
||||
"noEmit": true,
|
||||
|
||||
/* Interop Constraints */
|
||||
"isolatedModules": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true,
|
||||
|
||||
/* Completeness */
|
||||
"skipLibCheck": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user