Skip to content

Commit 05f6e9d

Browse files
yilinxiayilinxia
authored
Merge pull request #8 from data-exp-lab/render
Interface Change
2 parents a80d934 + b0e5625 commit 05f6e9d

20 files changed

+200099
-3175
lines changed

‎.gitignore

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
node_modules
2-
.ipython_checkpoints
3-
dist
2+
*.ipython_checkpoints
3+
dist
4+
.DS_Store
5+
*temp

‎index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
7-
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
6+
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
7+
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
8+
<link rel="icon" href="favicon.ico" />
89
<meta name="viewport" content="width=device-width, initial-scale=1" />
910
<meta name="theme-color" content="#000000" />
1011
<meta name="description" content="A web application to share network visualizations" />

‎public/arg_clusters.gexf

Lines changed: 2567 additions & 0 deletions
Large diffs are not rendered by default.

‎public/favicon-16x16.png

803 Bytes
Loading

‎public/favicon-32x32.png

2.18 KB
Loading

‎public/favicon.ico

320 Bytes
Binary file not shown.

‎public/llm_clusters.gexf

Lines changed: 139497 additions & 0 deletions
Large diffs are not rendered by default.

‎public/logic_tag_clusters.gexf

Lines changed: 0 additions & 3142 deletions
This file was deleted.

‎public/lp_clusters.gexf

Lines changed: 24003 additions & 0 deletions
Large diffs are not rendered by default.

‎public/vp_clusters.gexf

Lines changed: 33931 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/Footer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Footer: FC = () => (
99
<div className="d-flex flex-row align-items-center">
1010
<Link to="/" className="flex-shrink-0 me-2 p-0">
1111
<img
12-
src={import.meta.env.BASE_URL + "/deepgit_logo.png"}
12+
src={import.meta.env.BASE_URL + "deepgit_logo.png"}
1313
alt="DeepGit logo"
1414
style={{ height: "1.2em" }}
1515
className="me-1"

‎src/lib/consts.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import { Props as LinkifyProps } from "react-linkify";
66
import { NodeCircleProgram } from "sigma/rendering";
77
import { Settings } from "sigma/settings";
88

9-
export const SAMPLE_DATASET_URI = import.meta.env.BASE_URL + "/dataset.gexf";
9+
export const WIKIPEDIA_DATA_URI = import.meta.env.BASE_URL + "/dataset.gexf";
10+
export const LOGIC_PROGRAMMING_DATA_URI = import.meta.env.BASE_URL + "/lp_clusters.gexf";
11+
export const VISUAL_PROGRAMMING_DATA_URI = import.meta.env.BASE_URL + "/vp_clusters.gexf";
12+
export const LLM_DATA_URI = import.meta.env.BASE_URL + "/llm_clusters.gexf";
13+
export const ARG_DATA_URI = import.meta.env.BASE_URL + "/arg_clusters.gexf";
1014

1115
// Palettes
1216
export const PALETTES = RAW_PALETTES as Record<number, string[]>;

‎src/lib/context.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createContext } from "react";
1+
import { Dispatch, SetStateAction, createContext } from "react";
22
import Sigma from "sigma";
33

44
import { ModalName } from "../views/modals";
@@ -25,6 +25,9 @@ type GraphContextType = {
2525
isPanelExpanded: boolean;
2626
setIsPanelExpanded: (isPanelExpanded: boolean) => void;
2727

28+
showEditionPanel: boolean;
29+
setShowEditionPanel: Dispatch<SetStateAction<boolean>>;
30+
2831
navState: NavState;
2932
computedData: ComputedData;
3033
hovered: string | Set<string> | undefined;
@@ -45,5 +48,5 @@ type GraphContextType = {
4548
};
4649
export const GraphContext = createContext<GraphContextType>(
4750
// "Fake" initial value (proper value will be given by Provider)
48-
null as unknown as GraphContextType,
51+
null as unknown as GraphContextType
4952
);

‎src/views/EditionPanel.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ interface Option {
5656
}
5757

5858
const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
59-
const { navState, data, setNavState, openModal, setPanel } = useContext(GraphContext);
59+
const { navState, data, setNavState, openModal, setPanel, setShowEditionPanel } = useContext(GraphContext);
6060
const { fields, fieldsIndex } = data;
6161
const { filterable, colorable, sizeable, subtitleFields } = navState;
6262

@@ -106,14 +106,15 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
106106
style={{ top: 15, right: 15 }}
107107
onClick={() => {
108108
setNavState({ ...navState, role: "x" });
109+
setShowEditionPanel(false); // Add this line to hide the panel
109110
}}
110111
>
111112
<FaTimes />
112113
</button>
113114

114115
<h1 className="fs-4 mt-4 mb-4">
115116
<img
116-
src={import.meta.env.BASE_URL + "/deepgit_logo.png"}
117+
src={import.meta.env.BASE_URL + "deepgit_logo.png"}
117118
alt="DeepGit logo"
118119
style={{ height: "1em", filter: "invert(1)" }} // Inverts colors (turns black to white)
119120
className="me-1 mb-1"

‎src/views/GraphView.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
7575
(newNavState: NavState) => {
7676
navigate(
7777
location.hash.replace(/^#/, "").replace(/\?.*/, "") +
78-
"?" +
79-
navStateToQueryURL(data ? cleanNavState(newNavState, data) : newNavState),
78+
"?" +
79+
navStateToQueryURL(data ? cleanNavState(newNavState, data) : newNavState),
8080
);
8181
},
8282
[data, location.hash, navigate],
@@ -88,6 +88,7 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
8888

8989
const [computedData, setComputedData] = useState<ComputedData | null>(null);
9090

91+
const [showEditionPanel, setShowEditionPanel] = useState(false); // Add this state
9192
// Refresh aggregations and filtered items lists:
9293
useEffect(() => {
9394
if (data) {
@@ -165,10 +166,10 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
165166

166167
let promise:
167168
| Promise<{
168-
name: string;
169-
extension: string;
170-
textContent: string;
171-
}>
169+
name: string;
170+
extension: string;
171+
textContent: string;
172+
}>
172173
| undefined;
173174

174175
if (!url && !local) {
@@ -267,6 +268,9 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
267268
isPanelExpanded,
268269
setIsPanelExpanded,
269270

271+
showEditionPanel,
272+
setShowEditionPanel,
273+
270274
modal: modalName,
271275
openModal: (modal: ModalName) => setModalName(modal),
272276
closeModal: () => setModalName(undefined),
@@ -280,7 +284,7 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
280284
}}
281285
>
282286
{navState.local && <LocalWarningBanner />}
283-
<EditionPanel isExpanded={(navState.role || DEFAULT_ROLE) === "d"} />
287+
{showEditionPanel && <EditionPanel isExpanded={true} />}
284288
<main className={cx("graph-view", isPanelExpanded ? "panel-expanded" : "panel-collapsed")} ref={domRoot}>
285289
<div className="wrapper">
286290
<ContextPanel />

‎src/views/HomeView.tsx

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import { useLocation, useNavigate } from "react-router";
66

77
import DropInput from "../components/DropInput";
88
import Footer from "../components/Footer";
9-
import { SAMPLE_DATASET_URI } from "../lib/consts";
9+
import { WIKIPEDIA_DATA_URI } from "../lib/consts";
10+
import { LOGIC_PROGRAMMING_DATA_URI } from "../lib/consts";
11+
import { VISUAL_PROGRAMMING_DATA_URI } from "../lib/consts";
12+
import { LLM_DATA_URI } from "../lib/consts";
13+
import { ARG_DATA_URI } from "../lib/consts";
1014
import { getErrorMessage } from "../lib/errors";
1115
import { useNotifications } from "../lib/notifications";
1216

@@ -36,7 +40,7 @@ const HomeView: FC = () => {
3640
<main className="home-view">
3741
<div className="title-block">
3842
<div className="text-center">
39-
<img src={import.meta.env.BASE_URL + "/deepgit_logo.png"} alt="DeepGit Logo" className="mb-3" style={{ width: "120px", height: "auto" }} />
43+
<img src={import.meta.env.BASE_URL + "deepgit_logo.png"} alt="DeepGit Logo" className="mb-3" style={{ width: "120px", height: "auto" }} />
4044
</div>
4145
<h1 className="mb-4">
4246
<span className="position-relative">
@@ -86,16 +90,57 @@ const HomeView: FC = () => {
8690
<label htmlFor="graph-url-input" className="form-label h5">
8791
Enter here your graph file URL, or use{" "}
8892
<a
89-
href={SAMPLE_DATASET_URI}
93+
href={WIKIPEDIA_DATA_URI}
9094
onClick={(e) => {
9195
e.preventDefault();
92-
setState({ type: "url", input: window.location.origin + SAMPLE_DATASET_URI });
96+
setState({ type: "url", input: window.location.origin + WIKIPEDIA_DATA_URI });
9397
}}
9498
>
95-
our sample
99+
Wikipedia data
100+
</a>
101+
,{" "}
102+
<a
103+
href={LOGIC_PROGRAMMING_DATA_URI}
104+
onClick={(e) => {
105+
e.preventDefault();
106+
setState({ type: "url", input: window.location.origin + LOGIC_PROGRAMMING_DATA_URI });
107+
}}
108+
>
109+
Logic Programming
110+
</a>
111+
, or{" "}
112+
<a
113+
href={VISUAL_PROGRAMMING_DATA_URI}
114+
onClick={(e) => {
115+
e.preventDefault();
116+
setState({ type: "url", input: window.location.origin + VISUAL_PROGRAMMING_DATA_URI });
117+
}}
118+
>
119+
Visual Programming
120+
</a>
121+
, or{" "}
122+
<a
123+
href={LLM_DATA_URI}
124+
onClick={(e) => {
125+
e.preventDefault();
126+
setState({ type: "url", input: window.location.origin + LLM_DATA_URI });
127+
}}
128+
>
129+
Large Language Models
130+
</a>
131+
, or{" "}
132+
<a
133+
href={ARG_DATA_URI}
134+
onClick={(e) => {
135+
e.preventDefault();
136+
setState({ type: "url", input: window.location.origin + ARG_DATA_URI });
137+
}}
138+
>
139+
Argumentation
96140
</a>
97141
:
98142
</label>
143+
99144
<input
100145
type="url"
101146
className="form-control"

‎src/views/ReadabilityBlock.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ import { GraphContext } from "../lib/context";
2727
import { NavState } from "../lib/navState";
2828

2929
const ReadabilityBlock: FC = () => {
30-
const { navState, setNavState } = useContext(GraphContext);
31-
30+
// const { navState, setNavState } = useContext(GraphContext);
31+
const { navState, setNavState, showEditionPanel, setShowEditionPanel } = useContext(GraphContext);
3232
const [initialNavState] = useState<NavState>(navState);
3333

3434
const minLabelSize = typeof navState.minLabelSize === "number" ? navState.minLabelSize : DEFAULT_LABEL_SIZE;
@@ -63,14 +63,17 @@ const ReadabilityBlock: FC = () => {
6363
type="button"
6464
className="btn btn-outline-dark flex-grow-1"
6565
disabled={navState.role === "d"}
66-
onClick={() =>
66+
onClick={() => {
67+
// Toggle the edition panel
68+
setShowEditionPanel(!showEditionPanel);
69+
// Also set the role if needed
6770
setNavState({
6871
...navState,
6972
role: "d",
70-
})
71-
}
73+
});
74+
}}
7275
>
73-
<FaGear /> Configure this graph for Retina
76+
<FaGear /> Configure this graph for DeepGit
7477
</button>
7578
)}
7679
</div>

‎src/views/SelectedNodePanel.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,11 @@ const SelectedNodePanel: FC<{ node: string; data: NodeData }> = ({ node, data: {
8484
<h2 key={key} className="fs-5 ellipsis">
8585
<small className="text-muted">{startCase(key)}:</small>{" "}
8686
<span title={value}>
87-
{typeof value === "number" ? value.toLocaleString() : <Linkify {...DEFAULT_LINKIFY_PROPS}>{value}</Linkify>}
87+
{typeof value === "number"
88+
? value.toLocaleString()
89+
: typeof value === "string" && (value.startsWith("http://") || value.startsWith("https://"))
90+
? <a href={value} target="_blank" rel="noreferrer">{value}</a>
91+
: <Linkify {...DEFAULT_LINKIFY_PROPS}>{String(value)}</Linkify>}
8892
</span>
8993
</h2>
9094
))}

‎src/views/modals/PublishModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const PublishModal: FC<{ close: () => void }> = ({ close }) => {
7272
}}
7373
>
7474
<p>
75-
To be able to <strong>share</strong> your visualizations online, Retina needs to be able to access your graph
75+
To be able to <strong>share</strong> your visualizations online, DeepGit needs to be able to access your graph
7676
file <strong>online</strong>, through HTTP. You can publish it on a server or your own, a cloud provider...
7777
</p>
7878

@@ -81,7 +81,7 @@ const PublishModal: FC<{ close: () => void }> = ({ close }) => {
8181
<a href="https://gist.github.com/" target="_blank" rel="noreferrer">
8282
GitHub Gist
8383
</a>
84-
, a site where you can freely upload your graph for Retina:
84+
, a site where you can freely upload your graph for DeepGit:
8585
</p>
8686

8787
<ol>

‎vite.config.mts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import react from "@vitejs/plugin-react-swc";
22
import { defineConfig } from "vite";
33

4-
console.log(`Building DeepGit with BASE_PATH="${process.env.BASE_PATH || "/deepgit"}"`);
4+
console.log(`Building DeepGit with BASE_PATH="${process.env.BASE_PATH || "/"}"`);
55

66
export default defineConfig({
7-
base: process.env.BASE_PATH || "/deepgit",
7+
base: process.env.BASE_PATH || "/",
88
plugins: [react()],
99
server: {
1010
host: "0.0.0.0",
@@ -18,3 +18,4 @@ export default defineConfig({
1818
allowedHosts: ["deepgit.onrender.com"]
1919
},
2020
});
21+

0 commit comments

Comments
 (0)