diff options
| author | blackhao <13851610112@163.com> | 2025-08-22 02:51:50 -0500 |
|---|---|---|
| committer | blackhao <13851610112@163.com> | 2025-08-22 02:51:50 -0500 |
| commit | 4aab4087dc97906d0b9890035401175cdaab32d4 (patch) | |
| tree | 4e2e9d88a711ec5b1cfa02e8ac72a55183b99123 /src | |
| parent | afa8f50d1d21c721dabcb31ad244610946ab65a3 (diff) | |
2.0
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.tsx | 12 | ||||
| -rw-r--r-- | src/components/Graph.tsx | 49 | ||||
| -rw-r--r-- | src/global.d.ts | 2 | ||||
| -rw-r--r-- | src/hooks/useCourseData.ts | 14 | ||||
| -rw-r--r-- | src/main.tsx | 9 |
5 files changed, 0 insertions, 86 deletions
diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 9687afc..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Graph from "./components/Graph"; -import { useCourseData } from "./hooks/useCourseData"; - -export default function App() { - const catalog = useCourseData("/data/catalog_2025_fall.json"); - return ( - <> - <h1 style={{ textAlign: "center" }}>UIUC Course Prerequisite Graph</h1> - <Graph catalog={catalog} /> - </> - ); -} diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx deleted file mode 100644 index 5e81b38..0000000 --- a/src/components/Graph.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import CytoscapeComponent from "react-cytoscapejs"; -import cytoscape from "cytoscape"; -import dagre from "cytoscape-dagre"; -import { useMemo } from "react"; - -cytoscape.use(dagre); - -type Catalog = Record<string, string[]>; - -export default function Graph({ catalog }: { catalog: Catalog }) { - const elements = useMemo(() => { - const els: any[] = []; - Object.keys(catalog).forEach(id => { - els.push({ data: { id } }); - catalog[id].forEach(p => - els.push({ - data: { id: `${p}->${id}`, source: p, target: id } - }) - ); - }); - return els; - }, [catalog]); - - return ( - <CytoscapeComponent - elements={elements} - stylesheet={[ - { - selector: "node", - style: { - "background-color": "#3182bd", - label: "data(id)", - color: "#fff" - } - }, - { - selector: "edge", - style: { - width: 2, - "target-arrow-shape": "triangle", - "curve-style": "bezier" - } - } - ]} - layout={{ name: "dagre", rankDir: "TB", nodeSep: 30, rankSep: 50 }} - style={{ width: "100%", height: "90vh" }} - /> - ); -} diff --git a/src/global.d.ts b/src/global.d.ts deleted file mode 100644 index d2d9941..0000000 --- a/src/global.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare module 'react-cytoscapejs'; -declare module 'cytoscape-dagre'; diff --git a/src/hooks/useCourseData.ts b/src/hooks/useCourseData.ts deleted file mode 100644 index 74281fa..0000000 --- a/src/hooks/useCourseData.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useEffect, useState } from "react"; - -export function useCourseData(file = "/data/catalog_2025_fall.json") { - const [catalog, setCatalog] = useState<Record<string, string[]>>({}); - - useEffect(() => { - fetch(file) - .then(r => r.json()) - .then(setCatalog) - .catch(console.error); - }, [file]); - - return catalog; -} diff --git a/src/main.tsx b/src/main.tsx deleted file mode 100644 index 3fd3a69..0000000 --- a/src/main.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App"; - -ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - <React.StrictMode> - <App /> - </React.StrictMode> -); |
