Skip to content

Commit 4aecdd0

Browse files
prakriti-solankeyprakriti-solankey
authored
legends check
1 parent 5f1e8fa commit 4aecdd0

File tree

3 files changed

+84
-43
lines changed

3 files changed

+84
-43
lines changed

‎frontend/src/App.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,4 +190,18 @@
190190
padding: 20px;
191191
align-items: center;
192192
justify-content: center;
193+
}
194+
195+
.legend{
196+
display: inline-block;
197+
min-width: 0px;
198+
cursor: pointer;
199+
border-radius: 12px;
200+
padding: 2px 8px;
201+
font-size: var(--font-size-label);
202+
font-weight: var(--font-weight-bold);
203+
letter-spacing: 0;
204+
line-height: 1.25rem;
205+
width:max-content;
206+
height:30px
193207
}

‎frontend/src/components/GraphViewModal.tsx‎

Lines changed: 68 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1-
import { Banner, Checkbox, Dialog, IconButton, IconButtonArray, LoadingSpinner, TextInput } from '@neo4j-ndl/react';
1+
import {
2+
Banner,
3+
Checkbox,
4+
Dialog,
5+
Flex,
6+
IconButton,
7+
IconButtonArray,
8+
LoadingSpinner,
9+
TextInput,
10+
} from '@neo4j-ndl/react';
211
import { useEffect, useRef, useState } from 'react';
312
import { GraphType, GraphViewModalProps } from '../types';
413
import { InteractiveNvlWrapper } from '@neo4j-nvl/react';
514
import NVL, { NvlOptions } from '@neo4j-nvl/core';
615
// import { driver } from '../utils/Driver';
716
import type { Node, Relationship } from '@neo4j-nvl/core';
17+
818
import {
919
FitToScreenIcon,
1020
MagnifyingGlassMinusIconOutline,
@@ -43,6 +53,7 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
4353
const [statusMessage, setStatusMessage] = useState<string>('');
4454
const [docLimit, setDocLimit] = useState<string>('3');
4555
const { driver } = useCredentials();
56+
const [scheme, setScheme] = useState<Scheme>({});
4657

4758
const handleCheckboxChange = (graph: GraphType) => {
4859
const currentIndex = graphType.indexOf(graph);
@@ -98,21 +109,21 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
98109
graphType.length === 3
99110
? queryMap.DocChunkEntities
100111
: graphType.includes('Entities') && graphType.includes('Chunks')
101-
? queryMap.ChunksEntities
102-
: graphType.includes('Entities') && graphType.includes('Document')
103-
? queryMap.DocEntities
104-
: graphType.includes('Document') && graphType.includes('Chunks')
105-
? queryMap.DocChunks
106-
: graphType.includes('Entities') && graphType.length === 1
107-
? queryMap.Entities
108-
: graphType.includes('Chunks') && graphType.length === 1
109-
? queryMap.Chunks
110-
: queryMap.Document;
112+
? queryMap.ChunksEntities
113+
: graphType.includes('Entities') && graphType.includes('Document')
114+
? queryMap.DocEntities
115+
: graphType.includes('Document') && graphType.includes('Chunks')
116+
? queryMap.DocChunks
117+
: graphType.includes('Entities') && graphType.length === 1
118+
? queryMap.Entities
119+
: graphType.includes('Chunks') && graphType.length === 1
120+
? queryMap.Chunks
121+
: queryMap.Document;
111122
if (viewPoint === 'showGraphView') {
112123
queryToRun = constructQuery(newCheck, documentNo);
113124
console.log('inside If QueryToRun', queryToRun);
114125
} else {
115-
queryToRun = constructDocQuery(newCheck, inspectedName);
126+
queryToRun = constructDocQuery(newCheck);
116127
console.log('outside QueryToRun', queryToRun);
117128
}
118129
const session = driver?.session();
@@ -128,19 +139,17 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
128139

129140
// Infer color schema dynamically
130141
let iterator = 0;
131-
const scheme: Scheme = {};
142+
const schemeVal: Scheme = {};
132143

133144
neo4jNodes.forEach((node) => {
134145
const labels = node.map((f: any) => f.labels);
135-
136146
labels.forEach((label: any) => {
137-
if (scheme[label] == undefined) {
138-
scheme[label] = colors[iterator % colors.length];
147+
if (schemeVal[label] == undefined) {
148+
schemeVal[label] = colors[iterator % colors.length];
139149
iterator += 1;
140150
}
141151
});
142152
});
143-
144153
const newNodes = neo4jNodes.map((n) => {
145154
const totalNodes = n.map((g: any) => {
146155
return {
@@ -149,8 +158,8 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
149158
captionAlign: 'bottom',
150159
iconAlign: 'bottom',
151160
captionHtml: <b>Test</b>,
152-
caption: getNodeCaption(g),
153-
color: scheme[g.labels[0]],
161+
caption: `${g.labels}: ${getNodeCaption(g)}`,
162+
color: scheme[g.labels],
154163
icon: getIcon(g),
155164
};
156165
});
@@ -171,6 +180,7 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
171180
const finalRels = newRels.flat();
172181
setNodes(finalNodes);
173182
setRelationships(finalRels);
183+
setScheme(schemeVal);
174184
setLoading(false);
175185
console.log('nodes', nodes);
176186
console.log('relations', relationships);
@@ -299,28 +309,45 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
299309
</div>
300310
) : (
301311
<>
302-
<InteractiveNvlWrapper
303-
nodes={nodes}
304-
rels={relationships}
305-
nvlOptions={nvlOptions}
306-
ref={nvlRef}
307-
mouseEventCallbacks={{ ...mouseEventCallbacks }}
308-
interactionOptions={{
309-
selectOnClick: true,
310-
}}
311-
nvlCallbacks={nvlCallbacks}
312-
/>
313-
<IconButtonArray orientation='vertical' floating className='absolute bottom-4 right-4'>
314-
<ButtonWithToolTip text='Zoom in' onClick={handleZoomIn}>
315-
<MagnifyingGlassPlusIconOutline />
316-
</ButtonWithToolTip>
317-
<ButtonWithToolTip text='Zoom out' onClick={handleZoomOut}>
318-
<MagnifyingGlassMinusIconOutline />
319-
</ButtonWithToolTip>
320-
<ButtonWithToolTip text='Zoom to fit' onClick={handleZoomToFit}>
321-
<FitToScreenIcon />
322-
</ButtonWithToolTip>
323-
</IconButtonArray>
312+
<Flex
313+
flexDirection='row'
314+
justifyContent='space-between'
315+
style={{ height: '100%', padding: '20px' }}
316+
317+
>
318+
<div style={{ display: 'flex', flex: '0.2', flexWrap: 'wrap', padding: '15px', gap: '8px', backgroundColor: 'white', height: 'max-content' }}>
319+
{Object.keys(scheme).map((key) => (
320+
<div className='legend' key={scheme.key} style={{ backgroundColor: `${scheme[key]}` }}>
321+
{scheme.key}
322+
{key}
323+
</div>
324+
))}
325+
</div>
326+
<div style={{ flex: '0.8' }}>
327+
<InteractiveNvlWrapper
328+
nodes={nodes}
329+
rels={relationships}
330+
nvlOptions={nvlOptions}
331+
ref={nvlRef}
332+
mouseEventCallbacks={{ ...mouseEventCallbacks }}
333+
interactionOptions={{
334+
selectOnClick: true,
335+
}}
336+
nvlCallbacks={nvlCallbacks}
337+
/>
338+
<IconButtonArray orientation='vertical' floating className='absolute bottom-4 right-4'>
339+
<ButtonWithToolTip text='Zoom in' onClick={handleZoomIn}>
340+
<MagnifyingGlassPlusIconOutline />
341+
</ButtonWithToolTip>
342+
<ButtonWithToolTip text='Zoom out' onClick={handleZoomOut}>
343+
<MagnifyingGlassMinusIconOutline />
344+
</ButtonWithToolTip>
345+
<ButtonWithToolTip text='Zoom to fit' onClick={handleZoomToFit}>
346+
<FitToScreenIcon />
347+
</ButtonWithToolTip>
348+
</IconButtonArray>
349+
</div>
350+
</Flex>
324351
</>
325352
)}
326353
</div>

‎frontend/src/utils/Utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,10 +92,10 @@ export const constructQuery = (queryTochange: string, docLimit: string) => {
9292
RETURN nodes, rels`;
9393
};
9494

95-
export const constructDocQuery = (queryTochange: string, inspectedName: string) => {
95+
export const constructDocQuery = (queryTochange: string) => {
9696
return `
9797
MATCH docs = (d:Document {status:'Completed'})
98-
WHERE d.fileName = '${inspectedName}'
98+
WHERE d.fileName = $document_name
9999
WITH docs, d ORDER BY d.createdAt DESC
100100
OPTIONAL MATCH chunks=(d)<-[:PART_OF]-(c:Chunk)
101101
WITH []

0 commit comments

Comments
 (0)