Skip to content

Commit 3a93615

Browse files
prakriti-solankeyprakriti-solankey
authored
Refresh handle (#502)
* loading Graph * refresh check * show graph check * lint fix
1 parent da564e7 commit 3a93615

File tree

7 files changed

+117
-72
lines changed

7 files changed

+117
-72
lines changed

‎frontend/src/components/Content.tsx‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -271,8 +271,9 @@ const Content: React.FC<ContentProps> = ({
271271
const handleOpenGraphClick = () => {
272272
const bloomUrl = process.env.BLOOM_URL;
273273
const uriCoded = userCredentials?.uri.replace(/:\d+$/, '');
274-
const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${userCredentials?.port ?? '7687'
275-
}`;
274+
const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${
275+
userCredentials?.port ?? '7687'
276+
}`;
276277
const encodedURL = encodeURIComponent(connectURL);
277278
const replacedUrl = bloomUrl?.replace('{CONNECT_URL}', encodedURL);
278279
window.open(replacedUrl, '_blank');
@@ -282,10 +283,10 @@ const Content: React.FC<ContentProps> = ({
282283
isLeftExpanded && isRightExpanded
283284
? 'contentWithExpansion'
284285
: isRightExpanded
285-
? 'contentWithChatBot'
286-
: !isLeftExpanded && !isRightExpanded
287-
? 'w-[calc(100%-128px)]'
288-
: 'contentWithDropzoneExpansion';
286+
? 'contentWithChatBot'
287+
: !isLeftExpanded && !isRightExpanded
288+
? 'w-[calc(100%-128px)]'
289+
: 'contentWithDropzoneExpansion';
289290

290291
const handleGraphView = () => {
291292
setOpenGraphView(true);
@@ -321,6 +322,14 @@ const Content: React.FC<ContentProps> = ({
321322
[selectedfileslength, completedfileNo]
322323
);
323324

325+
const processingCheck = () => {
326+
const processingFiles = filesData.some((file) => file.status === 'Processing');
327+
const selectedRowProcessing = selectedRows.some((row) =>
328+
filesData.some((file) => file.name === row && file.status === 'Processing')
329+
);
330+
return processingFiles || selectedRowProcessing;
331+
};
332+
324333
const filesForProcessing = useMemo(() => {
325334
let newstatusfiles: CustomFile[] = [];
326335
if (selectedRows.length) {
@@ -517,7 +526,6 @@ const Content: React.FC<ContentProps> = ({
517526
});
518527
localStorage.setItem('isSchema', JSON.stringify(true));
519528
};
520-
521529
return (
522530
<>
523531
{alertDetails.showAlert && (
@@ -605,8 +613,9 @@ const Content: React.FC<ContentProps> = ({
605613
}}
606614
></FileTable>
607615
<Flex
608-
className={`${!isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
609-
} p-2.5 absolute bottom-4 mt-1.5 self-start`}
616+
className={`${
617+
!isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
618+
} p-2.5 absolute bottom-4 mt-1.5 self-start`}
610619
justifyContent='space-between'
611620
flexDirection='row'
612621
>
@@ -616,6 +625,7 @@ const Content: React.FC<ContentProps> = ({
616625
placeholder='Select LLM Model'
617626
defaultValue={defaultLLM}
618627
view='ContentView'
628+
isDisabled={false}
619629
/>
620630
<Flex flexDirection='row' gap='4' className='self-end'>
621631
<ButtonWithToolTip
@@ -676,6 +686,7 @@ const Content: React.FC<ContentProps> = ({
676686
open={openGraphView}
677687
setGraphViewOpen={setOpenGraphView}
678688
viewPoint={viewPoint}
689+
processingCheck={processingCheck()}
679690
/>
680691
</>
681692
);

‎frontend/src/components/Dropdown.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import { Dropdown } from '@neo4j-ndl/react';
22
import { DropdownProps, OptionType } from '../types';
33
import { useMemo } from 'react';
44
import { capitalize } from '../utils/Utils';
5+
56
interface ReusableDropdownProps extends DropdownProps {
67
options: string[];
78
placeholder?: string;
89
defaultValue?: string;
910
children?: React.ReactNode;
1011
view?: 'ContentView' | 'GraphView';
12+
isDisabled: boolean;
1113
}
1214
const DropdownComponent: React.FC<ReusableDropdownProps> = ({
1315
options,
@@ -16,6 +18,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
1618
onSelect,
1719
children,
1820
view,
21+
isDisabled,
1922
}) => {
2023
const handleChange = (selectedOption: OptionType | null | void) => {
2124
onSelect(selectedOption);
@@ -38,6 +41,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
3841
placeholder: placeholder || 'Select an option',
3942
defaultValue: defaultValue ? { label: capitalize(defaultValue), value: defaultValue } : undefined,
4043
menuPlacement: 'auto',
44+
isDisabled: isDisabled,
4145
}}
4246
size='medium'
4347
fluid

‎frontend/src/components/FileTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
321321
text='Graph'
322322
size='large'
323323
label='Graph view'
324-
disabled={!(info.getValue() === 'Completed' || info.getValue() == 'Cancelled')}
324+
disabled={info.getValue() === 'New' || info.getValue() === 'Uploading'}
325325
clean
326326
onClick={() => onInspect(info?.row?.original?.name as string)}
327327
>

‎frontend/src/components/Graph/GraphViewModal.tsx‎

Lines changed: 86 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ import { LegendsChip } from './LegendsChip';
1919
import graphQueryAPI from '../../services/GraphQuery';
2020
import {
2121
entityGraph,
22+
graphQuery,
2223
graphView,
2324
intitalGraphType,
2425
knowledgeGraph,
2526
lexicalGraph,
2627
mouseEventCallbacks,
2728
nvlOptions,
28-
queryMap,
2929
} from '../../utils/Constants';
3030
import { useFileContext } from '../../context/UsersFiles';
3131
// import CheckboxSelection from './CheckboxSelection';
@@ -37,6 +37,7 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
3737
viewPoint,
3838
nodeValues,
3939
relationshipValues,
40+
processingCheck,
4041
}) => {
4142
const nvlRef = useRef<NVL>(null);
4243
const [nodes, setNodes] = useState<Node[]>([]);
@@ -62,12 +63,15 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
6263
// }
6364
// setGraphType(newGraphSelected);
6465
// };
66+
6567
const handleZoomToFit = () => {
6668
nvlRef.current?.fit(
6769
allNodes.map((node) => node.id),
6870
{}
6971
);
7072
};
73+
74+
// Destroy the component
7175
useEffect(() => {
7276
const timeoutId = setTimeout(() => {
7377
handleZoomToFit();
@@ -83,23 +87,52 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
8387
setAllRelationships([]);
8488
};
8589
}, []);
86-
const graphQuery: string = queryMap.DocChunkEntities;
90+
91+
// To get nodes and relations on basis of view
8792
const fetchData = useCallback(async () => {
8893
try {
8994
const nodeRelationshipData =
9095
viewPoint === 'showGraphView'
9196
? await graphQueryAPI(
92-
userCredentials as UserCredentials,
93-
graphQuery,
94-
selectedRows.map((f) => JSON.parse(f).name)
95-
)
97+
userCredentials as UserCredentials,
98+
graphQuery,
99+
selectedRows.map((f) => JSON.parse(f).name)
100+
)
96101
: await graphQueryAPI(userCredentials as UserCredentials, graphQuery, [inspectedName ?? '']);
97102
return nodeRelationshipData;
98103
} catch (error: any) {
99104
console.log(error);
100105
}
101106
}, [viewPoint, selectedRows, graphQuery, inspectedName, userCredentials]);
102107

108+
// Api call to get the nodes and relations
109+
const graphApi = () => {
110+
fetchData()
111+
.then((result) => {
112+
if (result && result.data.data.nodes.length > 0) {
113+
const neoNodes = result.data.data.nodes.map((f: Node) => f);
114+
const neoRels = result.data.data.relationships.map((f: Relationship) => f);
115+
const { finalNodes, finalRels, schemeVal } = processGraphData(neoNodes, neoRels);
116+
setAllNodes(finalNodes);
117+
setAllRelationships(finalRels);
118+
setScheme(schemeVal);
119+
setNodes(finalNodes);
120+
setRelationships(finalRels);
121+
setNewScheme(schemeVal);
122+
setLoading(false);
123+
} else {
124+
setLoading(false);
125+
setStatus('danger');
126+
setStatusMessage(`No Nodes and Relations for the ${inspectedName} file`);
127+
}
128+
})
129+
.catch((error: any) => {
130+
setLoading(false);
131+
setStatus('danger');
132+
setStatusMessage(error.message);
133+
});
134+
};
135+
103136
useEffect(() => {
104137
if (open) {
105138
setLoading(true);
@@ -113,36 +146,11 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
113146
setNewScheme(schemeVal);
114147
setLoading(false);
115148
} else {
116-
fetchData()
117-
.then((result) => {
118-
if (result && result.data.data.nodes.length > 0) {
119-
const neoNodes = result.data.data.nodes.map((f: Node) => f);
120-
const neoRels = result.data.data.relationships.map((f: Relationship) => f);
121-
const { finalNodes, finalRels, schemeVal } = processGraphData(neoNodes, neoRels);
122-
setAllNodes(finalNodes);
123-
setAllRelationships(finalRels);
124-
setScheme(schemeVal);
125-
setNodes(finalNodes);
126-
setRelationships(finalRels);
127-
setNewScheme(schemeVal);
128-
setLoading(false);
129-
} else {
130-
setLoading(false);
131-
setStatus('danger');
132-
setStatusMessage(`Unable to retrieve document graph for ${inspectedName}`);
133-
}
134-
})
135-
.catch((error: any) => {
136-
setLoading(false);
137-
setStatus('danger');
138-
setStatusMessage(error.message);
139-
});
149+
graphApi();
140150
}
141151
}
142152
}, [open]);
143153

144-
console.log('nodes', nodes);
145-
146154
if (!open) {
147155
return <></>;
148156
}
@@ -151,24 +159,35 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
151159
viewPoint === 'showGraphView' || viewPoint === 'chatInfoView'
152160
? 'Generated Graph'
153161
: `Inspect Generated Graph from ${inspectedName}`;
154-
const checkBoxView = viewPoint !== 'chatInfoView';
162+
163+
const dropDownView = viewPoint !== 'chatInfoView';
164+
155165
const nvlCallbacks = {
156166
onLayoutComputing(isComputing: boolean) {
157167
if (!isComputing) {
158168
handleZoomToFit();
159169
}
160170
},
161171
};
172+
173+
// To handle the current zoom in function of graph
162174
const handleZoomIn = () => {
163175
nvlRef.current?.setZoom(nvlRef.current.getScale() * 1.3);
164176
};
177+
178+
// To handle the current zoom out function of graph
165179
const handleZoomOut = () => {
166180
nvlRef.current?.setZoom(nvlRef.current.getScale() * 0.7);
167181
};
182+
183+
// Refresh the graph with nodes and relations if file is processing
168184
const handleRefresh = () => {
169-
// fetchData();
170-
console.log('hello');
185+
setLoading(true);
186+
setGraphType(intitalGraphType);
187+
graphApi();
171188
};
189+
190+
// when modal closes reset all states to default
172191
const onClose = () => {
173192
setStatus('unknown');
174193
setStatusMessage('');
@@ -178,6 +197,8 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
178197
setNodes([]);
179198
setRelationships([]);
180199
};
200+
201+
// sort the legends in with Chunk and Document always the first two values
181202
const legendCheck = Object.keys(newScheme).sort((a, b) => {
182203
if (a === 'Document' || a === 'Chunk') {
183204
return -1;
@@ -187,6 +208,7 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
187208
return a.localeCompare(b);
188209
});
189210

211+
// setting the default dropdown values
190212
const getDropdownDefaultValue = () => {
191213
if (graphType.includes('Document') && graphType.includes('Chunk') && graphType.includes('Entities')) {
192214
return knowledgeGraph;
@@ -200,15 +222,22 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
200222
return '';
201223
};
202224

225+
// Make a function call to store the nodes and relations in their states
203226
const initGraph = (graphType: GraphType[], finalNodes: Node[], finalRels: Relationship[], schemeVal: Scheme) => {
204227
if (allNodes.length > 0 && allRelationships.length > 0) {
205-
const { filteredNodes, filteredRelations, filteredScheme } = filterData(graphType, finalNodes, finalRels, schemeVal);
228+
const { filteredNodes, filteredRelations, filteredScheme } = filterData(
229+
graphType,
230+
finalNodes,
231+
finalRels,
232+
schemeVal
233+
);
206234
setNodes(filteredNodes);
207235
setRelationships(filteredRelations);
208236
setNewScheme(filteredScheme);
209237
}
210-
}
238+
};
211239

240+
// handle dropdown value change and call the init graph method
212241
const handleDropdownChange = (selectedOption: OptionType | null | void) => {
213242
if (selectedOption?.value) {
214243
const selectedValue = selectedOption.value;
@@ -243,13 +272,16 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
243272
{/* {checkBoxView && (
244273
<CheckboxSelection graphType={graphType} loading={loading} handleChange={handleCheckboxChange} />
245274
)} */}
246-
{checkBoxView && (<DropdownComponent
247-
onSelect={handleDropdownChange}
248-
options={graphView}
249-
placeholder='Select Graph Type'
250-
defaultValue={getDropdownDefaultValue()}
251-
view='GraphView'
252-
/>)}
275+
{dropDownView && (
276+
<DropdownComponent
277+
onSelect={handleDropdownChange}
278+
options={graphView}
279+
placeholder='Select Graph Type'
280+
defaultValue={getDropdownDefaultValue()}
281+
view='GraphView'
282+
isDisabled={nodes.length === 0 || allNodes.length === 0}
283+
/>
284+
)}
253285
</Flex>
254286
</Dialog.Header>
255287
<Dialog.Content className='flex flex-col n-gap-token-4 w-full grow overflow-auto border border-palette-neutral-border-weak'>
@@ -278,14 +310,16 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
278310
nvlCallbacks={nvlCallbacks}
279311
/>
280312
<IconButtonArray orientation='vertical' floating className='absolute bottom-4 right-4'>
281-
<IconButtonWithToolTip
282-
label='Refresh'
283-
text='Refresh graph'
284-
onClick={handleRefresh}
285-
placement='left'
286-
>
287-
<ArrowPathIconOutline />
288-
</IconButtonWithToolTip>
313+
{viewPoint !== 'chatInfoView' && processingCheck && (
314+
<IconButtonWithToolTip
315+
label='Refresh'
316+
text='Refresh graph'
317+
onClick={handleRefresh}
318+
placement='left'
319+
>
320+
<ArrowPathIconOutline />
321+
</IconButtonWithToolTip>
322+
)}
289323
<IconButtonWithToolTip label='Zoomin' text='Zoom in' onClick={handleZoomIn} placement='left'>
290324
<MagnifyingGlassPlusIconOutline />
291325
</IconButtonWithToolTip>

‎frontend/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,7 @@ export interface GraphViewModalProps {
246246
viewPoint: string;
247247
nodeValues?: Node[];
248248
relationshipValues?: Relationship[];
249+
processingCheck?: boolean;
249250
}
250251

251252
export type GraphType = 'Document' | 'Entities' | 'Chunk';

0 commit comments

Comments
 (0)