Skip to content

Commit 932e604

Browse files
GnaneshKunalGnaneshKunal
committed
Add dark mode colors, track node labels and edge types
1 parent 0379e07 commit 932e604

File tree

3 files changed

+72
-44
lines changed

3 files changed

+72
-44
lines changed

‎redisinsight/ui/src/packages/redisgraph/src/Graph.tsx‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ interface ISelectedEntityProps {
2424

2525
const isDarkTheme = document.body.classList.contains('theme_DARK')
2626

27-
const colorPicker = (COLORS: Utils.IGoodColor[], isDarkTheme: boolean) => {
28-
const color = new Utils.GoodColorPicker(COLORS, isDarkTheme)
27+
const colorPicker = (COLORS: Utils.IGoodColor[]) => {
28+
const color = new Utils.GoodColorPicker(COLORS)
2929
return (label: string) => color.getColor(label)
3030
}
3131

32-
const labelColors = colorPicker(Utils.NODE_COLORS, isDarkTheme)
33-
const edgeColors = colorPicker(Utils.EDGE_COLORS, isDarkTheme)
32+
const labelColors = colorPicker(isDarkTheme ? Utils.NODE_COLORS_DARK : Utils.NODE_COLORS)
33+
const edgeColors = colorPicker(isDarkTheme ? Utils.EDGE_COLORS_DARK : Utils.EDGE_COLORS)
3434

3535
export default function Graph(props: { graphKey: string, data: any[] }) {
3636

@@ -55,14 +55,16 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
5555
errors: [],
5656
}
5757

58-
let nodeLabels = new Set(parsedResponse.labels)
59-
let edgeTypes = new Set(parsedResponse.types)
58+
const [nodeLabels, setNodeLabels] = useState(parsedResponse.labels)
59+
const [edgeTypes, setEdgeTypes] = useState(parsedResponse.types)
6060

6161
const [graphData, setGraphData] = useState(data)
6262

6363
useMemo(async () => {
6464

6565
let newGraphData = graphData
66+
let newNodeLabels: {[key: string]: number} = nodeLabels
67+
let newEdgeTypes: {[key: string]: number} = edgeTypes
6668

6769
if (parsedResponse.nodeIds.length > 0) {
6870
try {
@@ -73,12 +75,9 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
7375
const parsedData = responseParser(resp[0].response)
7476
parsedData.nodes.forEach(n => {
7577
nodeIds.add(n.id)
76-
n.labels.forEach(nodeLabels.add, nodeLabels)
77-
})
78-
79-
parsedData.edges.forEach(e => {
80-
edgeTypes.add(e.type)
78+
n.labels.forEach(l => newNodeLabels[l] = (newNodeLabels[l] + 1) || 1)
8179
})
80+
parsedData.edges.forEach(e => newEdgeTypes[e.type] = (newEdgeTypes[e.type] + 1) || 1)
8281

8382
newGraphData = {
8483
...newGraphData,
@@ -107,12 +106,10 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
107106
const parsedData = responseParser(resp[0].response)
108107
parsedData.nodes.forEach(n => {
109108
nodeIds.add(n.id)
110-
n.labels.forEach(nodeLabels.add, nodeLabels)
111-
})
112-
113-
parsedData.edges.forEach(e => {
114-
edgeTypes.add(e.type)
109+
n.labels.forEach(l => newNodeLabels[l] = (newNodeLabels[l] + 1) || 1)
115110
})
111+
const filteredEdges = parsedData.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target) && !edgeIds.has(e.id)).map(e => ({ ...e, startNode: e.source, endNode: e.target }))
112+
filteredEdges.forEach(e => newEdgeTypes[e.type] = (newEdgeTypes[e.type] + 1) || 1)
116113

117114
setGraphData({
118115
...newGraphData,
@@ -123,10 +120,7 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
123120
data: [{
124121
graph: {
125122
nodes: parsedData.nodes,
126-
/* TODO:
127-
* track newly added edges
128-
*/
129-
relationships: parsedData.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target) && !edgeIds.has(e.id)).map(e => ({ ...e, startNode: e.source, endNode: e.target }))
123+
relationships: filteredEdges,
130124
}
131125
}]
132126
}
@@ -135,6 +129,9 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
135129
}
136130
} catch {}
137131

132+
setNodeLabels(newNodeLabels)
133+
setEdgeTypes(newEdgeTypes)
134+
138135
setStart(true)
139136
}, [])
140137

@@ -167,20 +164,34 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
167164
const data = await globalThis.PluginSDK?.executeRedisCommand(`graph.ro_query "${props.graphKey}" "MATCH (n)-[t]-(m) WHERE id(n)=${node.id} RETURN t, m"`)
168165
if (!Array.isArray(data)) return;
169166
if (data.length < 1 || data[0].status !== 'success') return;
170-
171167
const parsedData = responseParser(data[0].response)
168+
169+
let newNodeLabels = nodeLabels
170+
let newEdgeTypes = edgeTypes
171+
172+
parsedData.nodes.forEach(n => {
173+
nodeIds.add(n.id)
174+
n.labels.forEach(l => newNodeLabels[l] = (newNodeLabels[l] + 1) || 1)
175+
})
176+
const filteredEdges = parsedData.edges.filter(e => !edgeIds.has(e.id)).map(e => ({ ...e, startNode: e.source, endNode: e.target }))
177+
filteredEdges.forEach(e => newEdgeTypes[e.type] = (newEdgeTypes[e.type] + 1) || 1)
178+
172179
graphd3.updateWithGraphData({
173180
results: [{
174181
columns: parsedData.headers,
175182
data: [{
176183
graph: {
177184
nodes: parsedData.nodes,
178-
relationships: parsedData.edges.filter(e => !edgeIds.has(e.id)).map(e => ({ ...e, startNode: e.source, endNode: e.target }))
185+
relationships: filteredEdges,
179186
}
180187
}]
181188
}],
182189
errors: [],
183-
});
190+
})
191+
192+
setNodeLabels(newNodeLabels)
193+
setEdgeTypes(newEdgeTypes)
194+
184195
},
185196
onRelationshipDoubleClick(relationship) {
186197
},
@@ -218,10 +229,10 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
218229
<div className="d3-info">
219230
<div className="graph-legends">
220231
{
221-
parsedResponse.nodes.length > 0 && (
232+
Object.keys(nodeLabels).length > 0 && (
222233
<div className="d3-info-labels">
223234
{
224-
[...nodeLabels].map((item, i) => (
235+
Object.keys(nodeLabels).map((item, i) => (
225236
<div
226237
className="box-node-label"
227238
style={{backgroundColor: labelColors(item).color, color: labelColors(item).textColor}}
@@ -235,10 +246,10 @@ export default function Graph(props: { graphKey: string, data: any[] }) {
235246
)
236247
}
237248
{
238-
parsedResponse.edges.length > 0 && (
249+
Object.keys(edgeTypes).length > 0 && (
239250
<div className="d3-info-labels">
240251
{
241-
[...edgeTypes].map((item, i) => (
252+
Object.keys(edgeTypes).map((item, i) => (
242253
<div
243254
key={item + i.toString()}
244255
className="box-edge-type"

‎redisinsight/ui/src/packages/redisgraph/src/parser.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ function responseParser(data: any) {
4040
let nodeIds: string[] = []
4141
let edgeIds: string[] = []
4242
let edges: IEdge[] = []
43-
let types: string[] = []
44-
let labels: string[] = []
43+
let types: {[key: string]: number} = {}
44+
let labels: {[key: string]: number} = {}
4545
if (data.length === 0) return {
4646
nodes, edges, types, labels
4747
}
@@ -56,7 +56,7 @@ function responseParser(data: any) {
5656
labels: item[1][1],
5757
properties: {}
5858
}
59-
labels = [...item[1][1], ...labels]
59+
labels[item[1][1]] = (labels[item[1][1]] + 1) || 1
6060
const propValues = item[2][1]
6161
propValues.map((x: any) => {
6262
const v = resolveProps(x)
@@ -73,7 +73,7 @@ function responseParser(data: any) {
7373
target: item[3][1].toString(),
7474
properties: {}
7575
}
76-
types.push(item[1][1])
76+
types[item[1][1]] = (types[item[1][1]] + 1) || 1
7777
const propValues = item[4][1]
7878
propValues.map((x: any) => {
7979
const v = resolveProps(x)
@@ -96,9 +96,6 @@ function responseParser(data: any) {
9696
})
9797
})
9898

99-
types = Array.from(new Set(types))
100-
labels = Array.from(new Set(labels))
101-
10299
return {
103100
headers,
104101
nodes,

‎redisinsight/ui/src/packages/redisgraph/src/utils.ts‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,33 @@ function padZero(str) {
111111
return (zeros + str).slice(-len);
112112
}
113113

114+
export const NODE_COLORS_DARK = [
115+
{ color: '#6A1DC3', borderColor: '#6A1DC3', textColor: '#FFFFFF' },
116+
{ color: '#364CFF', borderColor: '#364CFF', textColor: '#FFFFFF' },
117+
{ color: '#008556', borderColor: '#008556', textColor: '#FFFFFF' },
118+
{ color: '#333D4F', borderColor: '#333D4F', textColor: '#FFFFFF' },
119+
{ color: '#9C5C2B', borderColor: '#9C5C2B', textColor: '#FFFFFF' },
120+
{ color: '#A00A6B', borderColor: '#A00A6B', textColor: '#FFFFFF' },
121+
{ color: '#6F7C07', borderColor: '#6F7C07', textColor: '#FFFFFF' },
122+
{ color: '#14708D', borderColor: '#14708D', textColor: '#FFFFFF' },
123+
{ color: '#AA4E4E', borderColor: '#AA4E4E', textColor: '#FFFFFF' },
124+
{ color: '#6E6E6E', borderColor: '#6E6E6E', textColor: '#FFFFFF' },
125+
]
126+
127+
export const EDGE_COLORS_DARK = [
128+
{ color: '#C7C7C7', borderColor: '#C7C7C7', textColor: '#FFFFFF' },
129+
{ color: '#E3AAAA', borderColor: '#E3AAAA', textColor: '#FFFFFF' },
130+
{ color: '#ACCCD7', borderColor: '#ACCCD7', textColor: '#FFFFFF' },
131+
{ color: '#C7CEA8', borderColor: '#C7CEA8', textColor: '#FFFFFF' },
132+
{ color: '#D9A0C6', borderColor: '#D9A0C6', textColor: '#FFFFFF' },
133+
{ color: '#D4BAA7', borderColor: '#D4BAA7', textColor: '#FFFFFF' },
134+
{ color: '#B8C5DB', borderColor: '#B8C5DB', textColor: '#FFFFFF' },
135+
{ color: '#A5D4C3', borderColor: '#A5D4C3', textColor: '#FFFFFF' },
136+
{ color: '#CDDDF8', borderColor: '#CDDDF8', textColor: '#FFFFFF' },
137+
{ color: '#C7B0EA', borderColor: '#C7B0EA', textColor: '#FFFFFF' },
138+
]
139+
140+
114141
export const NODE_COLORS = [
115142
{ color: '#C7B0EA', borderColor: '#C7B0EA', textColor: '#000000' },
116143
{ color: '#CDDDF8', borderColor: '#CDDDF8', textColor: '#000000' },
@@ -159,14 +186,11 @@ export class ColorPicker<T extends IColor> {
159186
// cache for label and its chosen color.
160187
private labelStore: { [keyName: string]: T }
161188

162-
private darkTheme: boolean
163-
164189

165-
constructor(colors: T[], darkTheme: boolean = false) {
190+
constructor(colors: T[]) {
166191
this.colors = [...colors]
167192
this.currentColorStore = [...colors]
168193
this.labelStore = {}
169-
this.darkTheme = darkTheme
170194
}
171195

172196
/*
@@ -189,10 +213,6 @@ export class ColorPicker<T extends IColor> {
189213
// since the color has been taken by `label`, remove it from the current color store.
190214
this.currentColorStore = this.currentColorStore.filter(color => color !== goodColor);
191215

192-
goodColor.color = this.darkTheme ? invertColor(goodColor.color) : goodColor.color
193-
goodColor.textColor = this.darkTheme ? invertColor(goodColor.textColor) : goodColor.textColor
194-
goodColor.borderColor = this.darkTheme ? invertColor(goodColor.borderColor) : goodColor.borderColor
195-
196216
// cache the label and color key value pair.
197217
this.labelStore[label] = goodColor
198218
return goodColor;
@@ -203,7 +223,7 @@ export class ColorPicker<T extends IColor> {
203223
* GoodColorPicker: ColorPicker but only good colors.
204224
*/
205225
export class GoodColorPicker extends ColorPicker<IGoodColor> {
206-
constructor(COLORS: IGoodColor[], darkTheme: boolean = false) {
207-
super(COLORS, darkTheme);
226+
constructor(COLORS: IGoodColor[]) {
227+
super(COLORS);
208228
}
209229
}

0 commit comments

Comments
 (0)