Skip to content

Commit 45fe6d8

Browse files
yilinxiayilinxia
committed
add edgepanel
1 parent 5f9b4be commit 45fe6d8

5 files changed

Lines changed: 346 additions & 52 deletions

File tree

‎src/lib/context.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ type GraphContextType = {
2727

2828
showEditionPanel: boolean;
2929
setShowEditionPanel: Dispatch<SetStateAction<boolean>>;
30+
showEdgePanel: boolean;
31+
setShowEdgePanel: Dispatch<SetStateAction<boolean>>;
3032

3133
navState: NavState;
3234
computedData: ComputedData;

‎src/views/EdgePanel.tsx‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import cx from "classnames";
2+
import React, { FC, useContext, useState } from "react";
3+
import { FaTimes } from "react-icons/fa";
4+
import Slider from "rc-slider";
5+
6+
import { GraphContext } from "../lib/context";
7+
8+
const EdgePanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
9+
const { navState, setNavState, setShowEdgePanel } = useContext(GraphContext);
10+
11+
// State for edge creation criteria
12+
const [topicThreshold, setTopicThreshold] = useState(2);
13+
const [contributorThreshold, setContributorThreshold] = useState(1);
14+
const [stargazerThreshold, setStargazerThreshold] = useState(5);
15+
const [enableTopicLinking, setEnableTopicLinking] = useState(false);
16+
const [enableContributorOverlap, setEnableContributorOverlap] = useState(false);
17+
const [enableSharedOrganization, setEnableSharedOrganization] = useState(false);
18+
const [enableCommonStargazers, setEnableCommonStargazers] = useState(false);
19+
const [enableDependencies, setEnableDependencies] = useState(false);
20+
21+
return (
22+
<section
23+
className={cx(
24+
"side-panel edge-panel d-flex flex-column bg-dark text-white",
25+
isExpanded ? "expanded" : "collapsed",
26+
)}
27+
>
28+
<div className="panel-content scrollbar-left position-relative">
29+
<div className="flex-grow-1 p-0 m-0">
30+
<div className="editor-block block">
31+
<button
32+
className="btn btn-outline-light position-absolute"
33+
style={{ top: 15, right: 15 }}
34+
onClick={() => {
35+
setNavState({ ...navState, role: "x" });
36+
setShowEdgePanel(false);
37+
}}
38+
>
39+
<FaTimes />
40+
</button>
41+
42+
<h1 className="fs-4 mt-4 mb-4">
43+
<img
44+
src={import.meta.env.BASE_URL + "deepgit_logo.png"}
45+
alt="DeepGit logo"
46+
style={{ height: "1em", filter: "invert(1)" }}
47+
className="me-1 mb-1"
48+
/>
49+
Edge Creation
50+
</h1>
51+
52+
<div className="mb-3">
53+
<h3 className="form-label fs-6 mb-3">Configure how edges are automatically created between repositories based on various criteria</h3>
54+
</div>
55+
56+
{/* Topic Based Linking */}
57+
<div className="mb-4">
58+
<div className="d-flex align-items-center mb-2">
59+
<input
60+
type="checkbox"
61+
className="form-check-input me-2"
62+
checked={enableTopicLinking}
63+
onChange={(e) => setEnableTopicLinking(e.target.checked)}
64+
/>
65+
<label className="form-label mb-0">Topic Based Linking</label>
66+
</div>
67+
<p className="text-white small mb-2 ms-4">
68+
Repositories sharing a number of common topics will be linked
69+
</p>
70+
{enableTopicLinking && (
71+
<div className="ms-4">
72+
<label className="form-label small text-white">
73+
Minimum shared topics: <strong>{topicThreshold}</strong>
74+
</label>
75+
<Slider
76+
value={topicThreshold}
77+
min={1}
78+
max={10}
79+
step={1}
80+
marks={{
81+
1: "1",
82+
5: "5",
83+
10: "10"
84+
}}
85+
onChange={(value) => setTopicThreshold(value as number)}
86+
className="mt-2"
87+
/>
88+
</div>
89+
)}
90+
</div>
91+
92+
{/* Contributor Overlap */}
93+
<div className="mb-4">
94+
<div className="d-flex align-items-center mb-2">
95+
<input
96+
type="checkbox"
97+
className="form-check-input me-2"
98+
checked={enableContributorOverlap}
99+
onChange={(e) => setEnableContributorOverlap(e.target.checked)}
100+
/>
101+
<label className="form-label mb-0">Contributor Overlap</label>
102+
</div>
103+
<p className="text-white small mb-2 ms-4">
104+
Repositories will be linked if they share a sufficient number of contributors
105+
</p>
106+
{enableContributorOverlap && (
107+
<div className="ms-4">
108+
<label className="form-label small text-white">
109+
Minimum shared contributors: <strong>{contributorThreshold}</strong>
110+
</label>
111+
<Slider
112+
value={contributorThreshold}
113+
min={1}
114+
max={20}
115+
step={1}
116+
marks={{
117+
1: "1",
118+
5: "5",
119+
10: "10",
120+
20: "20"
121+
}}
122+
onChange={(value) => setContributorThreshold(value as number)}
123+
className="mt-2"
124+
/>
125+
</div>
126+
)}
127+
</div>
128+
129+
{/* Shared Organization */}
130+
<div className="mb-4">
131+
<div className="d-flex align-items-center mb-2">
132+
<input
133+
type="checkbox"
134+
className="form-check-input me-2"
135+
checked={enableSharedOrganization}
136+
onChange={(e) => setEnableSharedOrganization(e.target.checked)}
137+
/>
138+
<label className="form-label mb-0">Shared Organization</label>
139+
</div>
140+
<p className="text-white small mb-2 ms-4">
141+
Repositories maintained within the same GitHub organization will be linked. This helps identify repositories that are part of the same project ecosystem or company.
142+
</p>
143+
</div>
144+
145+
{/* Common Stargazers */}
146+
<div className="mb-4">
147+
<div className="d-flex align-items-center mb-2">
148+
<input
149+
type="checkbox"
150+
className="form-check-input me-2"
151+
checked={enableCommonStargazers}
152+
onChange={(e) => setEnableCommonStargazers(e.target.checked)}
153+
/>
154+
<label className="form-label mb-0">Common Stargazers</label>
155+
</div>
156+
<p className="text-white small mb-2 ms-4">
157+
Repositories are linked if they share a sufficient number of stargazers
158+
</p>
159+
{enableCommonStargazers && (
160+
<div className="ms-4">
161+
<label className="form-label small text-white">
162+
Minimum shared stargazers: <strong>{stargazerThreshold}</strong>
163+
</label>
164+
<Slider
165+
value={stargazerThreshold}
166+
min={1}
167+
max={100}
168+
step={5}
169+
marks={{
170+
1: "1",
171+
25: "25",
172+
50: "50",
173+
100: "100"
174+
}}
175+
onChange={(value) => setStargazerThreshold(value as number)}
176+
className="mt-2"
177+
/>
178+
</div>
179+
)}
180+
</div>
181+
182+
{/* Dependencies */}
183+
<div className="mb-4">
184+
<div className="d-flex align-items-center mb-2">
185+
<input
186+
type="checkbox"
187+
className="form-check-input me-2"
188+
checked={enableDependencies}
189+
onChange={(e) => setEnableDependencies(e.target.checked)}
190+
/>
191+
<label className="form-label mb-0">Dependencies</label>
192+
</div>
193+
<p className="text-white small mb-2 ms-4">
194+
If a repository depends on another, it will be linked (this creates direct edges). This shows the actual dependency relationships between projects, such as when one project imports or uses another.
195+
</p>
196+
</div>
197+
198+
{/* Apply Button */}
199+
<div className="mb-3">
200+
<button
201+
className="btn btn-light w-100 text-center"
202+
onClick={() => {
203+
// Here you would implement the logic to create edges based on the selected criteria
204+
console.log("Creating edges with criteria:", {
205+
topicThreshold,
206+
contributorThreshold,
207+
stargazerThreshold,
208+
enableTopicLinking,
209+
enableContributorOverlap,
210+
enableSharedOrganization,
211+
enableCommonStargazers,
212+
enableDependencies
213+
});
214+
}}
215+
>
216+
Apply Edge Creation Rules
217+
</button>
218+
</div>
219+
</div>
220+
</div>
221+
</div>
222+
</section>
223+
);
224+
};
225+
226+
export default EdgePanel;

‎src/views/EditionPanel.tsx‎

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import cx from "classnames";
22
import { keyBy, pull, uniqBy } from "lodash";
33
import React, { FC, JSX, useContext, useMemo } from "react";
4-
import { BiSolidNetworkChart } from "react-icons/bi";
4+
// import { BiSolidNetworkChart } from "react-icons/bi";
55
import { BsPaletteFill, BsShare } from "react-icons/bs";
66
import { FaTimes } from "react-icons/fa";
77
import { MdBubbleChart } from "react-icons/md";
@@ -119,10 +119,10 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
119119
style={{ height: "1em", filter: "invert(1)" }} // Inverts colors (turns black to white)
120120
className="me-1 mb-1"
121121
/>
122-
Welcome to DeepGit
122+
Explore Configuration
123123
</h1>
124124

125-
<p>
125+
{/* <p>
126126
Before sharing your graph online, you can first select various options on how users will{" "}
127127
<strong>read and interrogate</strong> this graph.
128128
</p>
@@ -150,9 +150,9 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
150150
</button>{" "}
151151
button to <strong>share</strong> or <strong>embed</strong> this graph.
152152
</p>
153-
)}
153+
)} */}
154154

155-
<div className="sticky-top py-3 border-bottom bg-dark mb-3">
155+
{/* <div className="sticky-top py-3 border-bottom bg-dark mb-3">
156156
<button
157157
className="btn btn-light w-100 text-center"
158158
onClick={() => {
@@ -164,10 +164,10 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
164164
<BiSolidNetworkChart /> start exploring
165165
</strong>
166166
</button>
167-
</div>
167+
</div> */}
168168

169169
<div className="mb-3">
170-
<h3 className="form-label fs-6 mb-0">Which fields should be actionable?</h3>
170+
<h3 className="form-label fs-6 mb-3">Here is the place that you can set up the dimensions that can use in the explore</h3>
171171

172172
<table className="table">
173173
<thead>
@@ -266,24 +266,7 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
266266
</table>
267267
</div>
268268

269-
<div className="mb-3">
270-
<label className="form-label" htmlFor="hovered-fields-input">
271-
<h3 className="form-label fs-6 mb-0">Which node information should show up on hovered nodes?</h3>
272-
</label>
273-
<Select
274-
{...DEFAULT_SELECT_PROPS}
275-
isMulti
276-
className="text-black"
277-
inputId="hovered-fields-input"
278-
options={subtitleOptions}
279-
value={selectedOptions}
280-
onChange={(v) => setNavState({ ...navState, subtitleFields: v.map((o) => o.field) as string[] })}
281-
isDisabled={subtitleOptions.length < 1}
282-
placeholder="Select fields..."
283-
/>
284-
</div>
285-
286-
<div className="mb-3">
269+
{/* <div className="mb-3">
287270
<label className="form-label" htmlFor="edge-coloring-input">
288271
<h3 className="form-label fs-6 mb-0">How should the edges be colored?</h3>
289272
</label>
@@ -329,7 +312,7 @@ const EditionPanel: FC<{ isExpanded: boolean }> = ({ isExpanded }) => {
329312
},
330313
}}
331314
/>
332-
</div>
315+
</div> */}
333316
</div>
334317
</div>
335318
</div>

‎src/views/GraphView.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
import { useNotifications } from "../lib/notifications";
3939
import ContextPanel from "./ContextPanel";
4040
import EditionPanel from "./EditionPanel";
41+
import EdgePanel from "./EdgePanel";
4142
import EventsController from "./EventsController";
4243
import GraphAppearance from "./GraphAppearance";
4344
import GraphControls from "./GraphControls";
@@ -88,6 +89,7 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
8889
const [computedData, setComputedData] = useState<ComputedData | null>(null);
8990

9091
const [showEditionPanel, setShowEditionPanel] = useState(false); // Add this state
92+
const [showEdgePanel, setShowEdgePanel] = useState(false); // Add edge panel state
9193
// Refresh aggregations and filtered items lists:
9294
useEffect(() => {
9395
if (data) {
@@ -290,6 +292,8 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
290292

291293
showEditionPanel,
292294
setShowEditionPanel,
295+
showEdgePanel,
296+
setShowEdgePanel,
293297

294298
modal: modalName,
295299
openModal: (modal: ModalName) => {
@@ -308,6 +312,7 @@ const GraphView: FC<{ embed?: boolean }> = ({ embed = false }) => {
308312
>
309313
{navState.local && <LocalWarningBanner />}
310314
{showEditionPanel && <EditionPanel isExpanded={true} />}
315+
{showEdgePanel && <EdgePanel isExpanded={true} />}
311316
<main className={cx("graph-view", isPanelExpanded ? "panel-expanded" : "panel-collapsed")} ref={domRoot}>
312317
<div className="wrapper">
313318
<ContextPanel />

0 commit comments

Comments
 (0)