Skip to content

Commit 4d4caf2

Browse files
florianbgtflorianbgt
committed
change styles
1 parent ea80744 commit 4d4caf2

File tree

2 files changed

+66
-61
lines changed
  • packages/app/src/helpers/cytoscape

2 files changed

+66
-61
lines changed

‎packages/app/src/helpers/cytoscape/fileDependencyVisualizer/index.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,14 @@ export class FileDependencyVisualizer {
118118
);
119119
this.cy.add(elements);
120120

121-
const currentFileNode = this.cy.nodes().filter(
121+
const allNodes = this.cy.nodes();
122+
123+
const currentFileNode = allNodes.filter(
122124
`node[fileName="${this.fileId}"]`,
123125
);
126+
127+
allNodes.addClass("symbol");
124128
currentFileNode.addClass("collapsed");
125-
currentFileNode.addClass("symbol");
126129

127130
const stylesheet = getCytoscapeStylesheet(
128131
this.targetMetric,
@@ -287,7 +290,6 @@ export class FileDependencyVisualizer {
287290
this.cy.batch(() => {
288291
// remove all, clean state
289292
allElements.removeClass([
290-
"symbol",
291293
"collapsed",
292294
"expanded",
293295
"selected",
@@ -300,11 +302,9 @@ export class FileDependencyVisualizer {
300302
backgroundElements.addClass("background");
301303

302304
connectedNodes.addClass("collapsed");
303-
connectedNodes.addClass("symbol");
304305

305306
selectedNode.addClass("expanded");
306307
selectedNode.addClass("selected");
307-
selectedNode.addClass("symbol");
308308

309309
dependencyEdges.addClass("dependency");
310310
dependentEdges.addClass("dependent");
@@ -317,7 +317,6 @@ export class FileDependencyVisualizer {
317317
`node[fileName="${this.fileId}"]`,
318318
);
319319
fileNodes.addClass("collapsed");
320-
fileNodes.addClass("symbol");
321320
}
322321
});
323322

‎packages/app/src/helpers/cytoscape/styles/index.ts‎

Lines changed: 61 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,16 @@ interface CytoscapeStyles {
1717
colors: {
1818
text: {
1919
default: string;
20+
selected: string;
21+
external: string;
2022
};
2123
background: {
24+
default: string;
25+
highlighted: string;
26+
selected: string;
27+
external: string;
28+
};
29+
border: {
2230
default: string;
2331
severity: {
2432
0: string;
@@ -29,11 +37,6 @@ interface CytoscapeStyles {
2937
5: string;
3038
};
3139
};
32-
border: {
33-
default: string;
34-
highlighted: string;
35-
selected: string;
36-
};
3740
};
3841
width: {
3942
default: number;
@@ -54,37 +57,40 @@ interface CytoscapeStyles {
5457
}
5558

5659
function getSeverityColor(styles: CytoscapeStyles, level: number) {
57-
const severityLevels = styles.node.colors.background.severity;
60+
const severityLevels = styles.node.colors.border.severity;
5861
const targetColor = level in severityLevels
5962
? severityLevels[level as keyof typeof severityLevels]
6063
: undefined;
6164

62-
return targetColor || styles.node.colors.background.default;
65+
return targetColor || styles.node.colors.border.default;
6366
}
6467

6568
function getCytoscapeStyles(theme: "light" | "dark" = "light") {
6669
return {
6770
node: {
6871
colors: {
6972
text: {
70-
default: theme === "light" ? "#1a1a1a" : "#ffffff",
73+
default: theme === "light" ? "#3B0764" : "#FFFFFF",
74+
selected: theme === "light" ? "#FFFFFF" : "#3B0764",
75+
external: theme === "light" ? "#3B0764" : "#FFFFFF",
7176
},
7277
background: {
73-
default: theme === "light" ? "#ffffff" : "#1a1a1a",
78+
default: theme === "light" ? "#F3E8FF" : "#6D28D9",
79+
selected: theme === "light" ? "#A259D9" : "#CBA6F7",
80+
external: theme === "light" ? "#F1F5F9" : "#334155",
81+
highlighted: theme === "light" ? "#eab308" : "#facc15",
82+
},
83+
border: {
84+
default: theme === "light" ? "#A259D9" : "#CBA6F7",
7485
severity: {
75-
0: theme === "light" ? "#16a34a" : "#4ade80",
86+
0: theme === "light" ? "#A259D9" : "#CBA6F7",
7687
1: theme === "light" ? "#65a30d" : "#a3e635",
7788
2: theme === "light" ? "#ca8a04" : "#facc15",
7889
3: theme === "light" ? "#d97706" : "#fbbf24",
7990
4: theme === "light" ? "#ea580c" : "#fb923c",
8091
5: theme === "light" ? "#dc2626" : "#f87171",
8192
},
8293
},
83-
border: {
84-
default: theme === "light" ? "#1a1a1a" : "#ffffff",
85-
highlighted: theme === "light" ? "#6366f1" : "#818cf8",
86-
selected: theme === "light" ? "#059669" : "#10b981",
87-
},
8894
},
8995
width: {
9096
default: 5,
@@ -119,17 +125,20 @@ export function getCytoscapeStylesheet(
119125
"text-wrap": "wrap",
120126
color: styles.node.colors.text.default,
121127
"border-width": styles.node.width.default,
122-
"border-color": styles.node.colors.border.default,
123-
"background-color": (node: NodeSingular) => {
128+
"border-color": (node: NodeSingular) => {
124129
const data = node.data() as NapiNodeData;
125130
if (targetMetric) {
126131
return getSeverityColor(styles, data.metricsSeverity[targetMetric]);
127132
}
128-
return styles.node.colors.background.default;
133+
return styles.node.colors.border.default;
129134
},
135+
"background-color": styles.node.colors.background.default,
130136
shape: "ellipse",
131137
"text-valign": "center",
132138
"text-halign": "center",
139+
"width": 20,
140+
"height": 20,
141+
opacity: 0.9,
133142
},
134143
},
135144
{
@@ -140,46 +149,42 @@ export function getCytoscapeStylesheet(
140149
},
141150
{
142151
selector: "node.symbol",
143-
"border-color": (node: NodeSingular) => {
144-
const data = node.data() as SymbolNapiNodeData;
145-
if (data.isExternal) {
146-
return styles.node.colors.border.default;
147-
}
148-
return styles.node.colors.border.default;
149-
},
150152
style: {
153+
"background-color": (node: NodeSingular) => {
154+
const data = node.data() as SymbolNapiNodeData;
155+
return data.isExternal
156+
? styles.node.colors.background.external
157+
: styles.node.colors.background.default;
158+
},
159+
"color": (node: NodeSingular) => {
160+
const data = node.data() as SymbolNapiNodeData;
161+
return data.isExternal
162+
? styles.node.colors.text.external
163+
: styles.node.colors.text.default;
164+
},
151165
shape: (node: NodeSingular) => {
152166
const data = node.data() as SymbolNapiNodeData;
153-
154-
if (data.isExternal) {
155-
return "octagon";
156-
}
157-
158-
if (data.symbolType === classSymbolType) {
159-
return "hexagon";
160-
}
161-
if (data.symbolType === functionSymbolType) {
162-
return "triangle";
163-
}
164-
if (data.symbolType === variableSymbolType) {
165-
return "ellipse";
166-
}
167-
if (data.symbolType === structSymbolType) {
168-
return "hexagon";
169-
}
170-
if (data.symbolType === enumSymbolType) {
171-
return "hexagon";
172-
}
173-
if (data.symbolType === interfaceSymbolType) {
174-
return "hexagon";
175-
}
176-
if (data.symbolType === recordSymbolType) {
177-
return "hexagon";
178-
}
179-
if (data.symbolType === delegateSymbolType) {
180-
return "hexagon";
167+
if (data.isExternal) return "octagon";
168+
switch (data.symbolType) {
169+
case classSymbolType:
170+
case interfaceSymbolType:
171+
case structSymbolType:
172+
case enumSymbolType:
173+
case recordSymbolType:
174+
return "hexagon";
175+
case functionSymbolType:
176+
case delegateSymbolType:
177+
return "roundrectangle";
178+
case variableSymbolType:
179+
return "ellipse";
180+
default:
181+
return "ellipse";
181182
}
182183
},
184+
"border-style": (node: NodeSingular) => {
185+
const data = node.data() as SymbolNapiNodeData;
186+
return data.isExternal ? "dashed" : "solid";
187+
},
183188
},
184189
},
185190
{
@@ -204,13 +209,14 @@ export function getCytoscapeStylesheet(
204209
selector: "node.highlighted",
205210
style: {
206211
"border-width": styles.node.width.highlighted,
207-
"border-color": styles.node.colors.border.highlighted,
212+
"background-color": styles.node.colors.background.highlighted,
208213
},
209214
},
210215
{
211216
selector: "node.selected",
212217
style: {
213-
"border-color": styles.node.colors.border.selected,
218+
"background-color": styles.node.colors.background.selected,
219+
"color": styles.node.colors.text.selected,
214220
},
215221
},
216222

0 commit comments

Comments
 (0)