From a6125217f1079e3833914664324a33b6b3b16939 Mon Sep 17 00:00:00 2001 From: Prakriti Solankey <156313631+prakriti-solankey@users.noreply.github.com> Date: Wed, 3 Jul 2024 17:58:50 +0000 Subject: [PATCH 1/4] loading Graph --- frontend/src/components/FileTable.tsx | 22 +++++++++---------- .../src/components/Graph/GraphViewModal.tsx | 10 +++++++-- frontend/src/utils/Utils.ts | 5 ----- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/FileTable.tsx b/frontend/src/components/FileTable.tsx index d590450c6..fb7b4b4fb 100644 --- a/frontend/src/components/FileTable.tsx +++ b/frontend/src/components/FileTable.tsx @@ -321,7 +321,7 @@ const FileTable: React.FC = ({ isExpanded, connectionStatus, set text='Graph' size='large' label='Graph view' - disabled={!(info.getValue() === 'Completed' || info.getValue() == 'Cancelled')} + disabled={((info.getValue() === 'New' || info.row.original.NodesCount === 0 || info.getValue() === 'New' || info.getValue() === 'Uploading'))} clean onClick={() => onInspect(info?.row?.original?.name as string)} > @@ -362,14 +362,14 @@ const FileTable: React.FC = ({ isExpanded, connectionStatus, set item?.fileSource === 's3 bucket' && localStorage.getItem('accesskey') === item?.awsAccessKeyId ? item?.status : item?.fileSource === 'local file' - ? item?.status - : item?.status === 'Completed' || item.status === 'Failed' - ? item?.status - : item?.fileSource == 'Wikipedia' || - item?.fileSource == 'youtube' || - item?.fileSource == 'gcs bucket' - ? item?.status - : 'N/A', + ? item?.status + : item?.status === 'Completed' || item.status === 'Failed' + ? item?.status + : item?.fileSource == 'Wikipedia' || + item?.fileSource == 'youtube' || + item?.fileSource == 'gcs bucket' + ? item?.status + : 'N/A', model: item?.model ?? model, id: uuidv4(), source_url: item?.url != 'None' && item?.url != '' ? item.url : '', @@ -382,8 +382,8 @@ const FileTable: React.FC = ({ isExpanded, connectionStatus, set language: item?.language ?? '', processingProgress: item?.processed_chunk != undefined && - item?.total_chunks != undefined && - !isNaN(Math.floor((item?.processed_chunk / item?.total_chunks) * 100)) + item?.total_chunks != undefined && + !isNaN(Math.floor((item?.processed_chunk / item?.total_chunks) * 100)) ? Math.floor((item?.processed_chunk / item?.total_chunks) * 100) : undefined, // total_pages: item?.total_pages ?? 0, diff --git a/frontend/src/components/Graph/GraphViewModal.tsx b/frontend/src/components/Graph/GraphViewModal.tsx index 82daf35b7..c32c13994 100644 --- a/frontend/src/components/Graph/GraphViewModal.tsx +++ b/frontend/src/components/Graph/GraphViewModal.tsx @@ -207,6 +207,12 @@ const GraphViewModal: React.FunctionComponent = ({ setRelationships(filteredRelations); setNewScheme(filteredScheme); } + // else{ + // const node = allNodes.filter((node) => node.labels.includes('Document')); + // setNodes(node); + // setAllRelationships([]); + // setNewScheme({Document:scheme.Document}); + // } } const handleDropdownChange = (selectedOption: OptionType | null | void) => { @@ -278,14 +284,14 @@ const GraphViewModal: React.FunctionComponent = ({ nvlCallbacks={nvlCallbacks} /> - - + )} diff --git a/frontend/src/utils/Utils.ts b/frontend/src/utils/Utils.ts index 651e2f150..40e9998bd 100644 --- a/frontend/src/utils/Utils.ts +++ b/frontend/src/utils/Utils.ts @@ -2,10 +2,6 @@ import { calcWordColor } from '@neo4j-devtools/word-color'; import type { Node, Relationship } from '@neo4j-nvl/base'; import { GraphType, Messages, Scheme } from '../types'; -type PartialLabelNode = Partial & { - labels: string; -}; - // Get the Url export const url = () => { let url = window.location.href.replace('5173', '8000'); @@ -174,7 +170,6 @@ export const filterData = ( allNodes: Node[], allRelationships: Relationship[], scheme: Scheme, - // selectedDropdown:string ) => { let filteredNodes: Node[] = []; let filteredRelations: Relationship[] = []; From 70274d497f9f5fa31234a09c9c6160886877466c Mon Sep 17 00:00:00 2001 From: Prakriti Solankey <156313631+prakriti-solankey@users.noreply.github.com> Date: Thu, 4 Jul 2024 12:50:44 +0000 Subject: [PATCH 2/4] refresh check --- frontend/src/components/Content.tsx | 11 +++ .../src/components/Graph/GraphViewModal.tsx | 91 +++++++++++-------- frontend/src/utils/Constants.ts | 33 +++---- 3 files changed, 82 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/Content.tsx b/frontend/src/components/Content.tsx index 6b9e279ba..4347e2132 100644 --- a/frontend/src/components/Content.tsx +++ b/frontend/src/components/Content.tsx @@ -309,6 +309,11 @@ const Content: React.FC = ({ [selectedRows] ); + const nodesNotZeroCheck = useMemo( + () => selectedRows.filter((f) => JSON.parse(f).nodeCount !== 0).length, + [selectedRows] + ); + const dropdowncheck = useMemo(() => !filesData.some((f) => f.status === 'New'), [filesData]); const disableCheck = useMemo( @@ -518,6 +523,12 @@ const Content: React.FC = ({ localStorage.setItem('isSchema', JSON.stringify(true)); }; + + const processingCheck = () => { + filesData.find((f) => f.processingProgress && f.processingProgress > 10) + } + + console.log('processingCheck', processingCheck()); return ( <> {alertDetails.showAlert && ( diff --git a/frontend/src/components/Graph/GraphViewModal.tsx b/frontend/src/components/Graph/GraphViewModal.tsx index c32c13994..30c12a92e 100644 --- a/frontend/src/components/Graph/GraphViewModal.tsx +++ b/frontend/src/components/Graph/GraphViewModal.tsx @@ -19,13 +19,13 @@ import { LegendsChip } from './LegendsChip'; import graphQueryAPI from '../../services/GraphQuery'; import { entityGraph, + graphQuery, graphView, intitalGraphType, knowledgeGraph, lexicalGraph, mouseEventCallbacks, nvlOptions, - queryMap, } from '../../utils/Constants'; import { useFileContext } from '../../context/UsersFiles'; // import CheckboxSelection from './CheckboxSelection'; @@ -62,12 +62,15 @@ const GraphViewModal: React.FunctionComponent = ({ // } // setGraphType(newGraphSelected); // }; + const handleZoomToFit = () => { nvlRef.current?.fit( allNodes.map((node) => node.id), {} ); }; + + // Destroy the component useEffect(() => { const timeoutId = setTimeout(() => { handleZoomToFit(); @@ -83,7 +86,8 @@ const GraphViewModal: React.FunctionComponent = ({ setAllRelationships([]); }; }, []); - const graphQuery: string = queryMap.DocChunkEntities; + + // To get nodes and relations on basis of view const fetchData = useCallback(async () => { try { const nodeRelationshipData = @@ -100,6 +104,34 @@ const GraphViewModal: React.FunctionComponent = ({ } }, [viewPoint, selectedRows, graphQuery, inspectedName, userCredentials]); + // Api call to get the nodes and relations + const graphApi = () => { + fetchData() + .then((result) => { + if (result && result.data.data.nodes.length > 0) { + const neoNodes = result.data.data.nodes.map((f: Node) => f); + const neoRels = result.data.data.relationships.map((f: Relationship) => f); + const { finalNodes, finalRels, schemeVal } = processGraphData(neoNodes, neoRels); + setAllNodes(finalNodes); + setAllRelationships(finalRels); + setScheme(schemeVal); + setNodes(finalNodes); + setRelationships(finalRels); + setNewScheme(schemeVal); + setLoading(false); + } else { + setLoading(false); + setStatus('danger'); + setStatusMessage(`Unable to retrieve document graph for ${inspectedName}`); + } + }) + .catch((error: any) => { + setLoading(false); + setStatus('danger'); + setStatusMessage(error.message); + }); + } + useEffect(() => { if (open) { setLoading(true); @@ -113,36 +145,11 @@ const GraphViewModal: React.FunctionComponent = ({ setNewScheme(schemeVal); setLoading(false); } else { - fetchData() - .then((result) => { - if (result && result.data.data.nodes.length > 0) { - const neoNodes = result.data.data.nodes.map((f: Node) => f); - const neoRels = result.data.data.relationships.map((f: Relationship) => f); - const { finalNodes, finalRels, schemeVal } = processGraphData(neoNodes, neoRels); - setAllNodes(finalNodes); - setAllRelationships(finalRels); - setScheme(schemeVal); - setNodes(finalNodes); - setRelationships(finalRels); - setNewScheme(schemeVal); - setLoading(false); - } else { - setLoading(false); - setStatus('danger'); - setStatusMessage(`Unable to retrieve document graph for ${inspectedName}`); - } - }) - .catch((error: any) => { - setLoading(false); - setStatus('danger'); - setStatusMessage(error.message); - }); + graphApi(); } } }, [open]); - console.log('nodes', nodes); - if (!open) { return <>; } @@ -151,7 +158,9 @@ const GraphViewModal: React.FunctionComponent = ({ viewPoint === 'showGraphView' || viewPoint === 'chatInfoView' ? 'Generated Graph' : `Inspect Generated Graph from ${inspectedName}`; + const checkBoxView = viewPoint !== 'chatInfoView'; + const nvlCallbacks = { onLayoutComputing(isComputing: boolean) { if (!isComputing) { @@ -159,16 +168,25 @@ const GraphViewModal: React.FunctionComponent = ({ } }, }; + + //To handle the current zoom in function of graph const handleZoomIn = () => { nvlRef.current?.setZoom(nvlRef.current.getScale() * 1.3); }; + + //To handle the current zoom out function of graph const handleZoomOut = () => { nvlRef.current?.setZoom(nvlRef.current.getScale() * 0.7); }; + + //Refresh the graph with nodes and relations if file is processing const handleRefresh = () => { - // fetchData(); - console.log('hello'); + setLoading(true); + setGraphType(intitalGraphType); + graphApi(); }; + + // when modal closes reset all states to default const onClose = () => { setStatus('unknown'); setStatusMessage(''); @@ -178,6 +196,8 @@ const GraphViewModal: React.FunctionComponent = ({ setNodes([]); setRelationships([]); }; + + // sort the legends in with Chunk and Document always the first two values const legendCheck = Object.keys(newScheme).sort((a, b) => { if (a === 'Document' || a === 'Chunk') { return -1; @@ -187,6 +207,7 @@ const GraphViewModal: React.FunctionComponent = ({ return a.localeCompare(b); }); + // setting the default dropdown values const getDropdownDefaultValue = () => { if (graphType.includes('Document') && graphType.includes('Chunk') && graphType.includes('Entities')) { return knowledgeGraph; @@ -200,6 +221,7 @@ const GraphViewModal: React.FunctionComponent = ({ return ''; }; + // Make a function call to store the nodes and relations in their states const initGraph = (graphType: GraphType[], finalNodes: Node[], finalRels: Relationship[], schemeVal: Scheme) => { if (allNodes.length > 0 && allRelationships.length > 0) { const { filteredNodes, filteredRelations, filteredScheme } = filterData(graphType, finalNodes, finalRels, schemeVal); @@ -207,14 +229,9 @@ const GraphViewModal: React.FunctionComponent = ({ setRelationships(filteredRelations); setNewScheme(filteredScheme); } - // else{ - // const node = allNodes.filter((node) => node.labels.includes('Document')); - // setNodes(node); - // setAllRelationships([]); - // setNewScheme({Document:scheme.Document}); - // } } + //handle dropdown value change and call the init graph method const handleDropdownChange = (selectedOption: OptionType | null | void) => { if (selectedOption?.value) { const selectedValue = selectedOption.value; @@ -284,7 +301,7 @@ const GraphViewModal: React.FunctionComponent = ({ nvlCallbacks={nvlCallbacks} /> - {(nodes.length === 0 && viewPoint !== 'chatInfoView') && ( Date: Thu, 4 Jul 2024 17:29:50 +0000 Subject: [PATCH 3/4] show graph check --- frontend/src/components/Content.tsx | 22 +++++++++---------- frontend/src/components/Dropdown.tsx | 5 +++++ frontend/src/components/FileTable.tsx | 2 +- .../src/components/Graph/GraphViewModal.tsx | 16 ++++++++------ frontend/src/types.ts | 1 + 5 files changed, 26 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/Content.tsx b/frontend/src/components/Content.tsx index 4347e2132..b4e7653e5 100644 --- a/frontend/src/components/Content.tsx +++ b/frontend/src/components/Content.tsx @@ -309,11 +309,6 @@ const Content: React.FC = ({ [selectedRows] ); - const nodesNotZeroCheck = useMemo( - () => selectedRows.filter((f) => JSON.parse(f).nodeCount !== 0).length, - [selectedRows] - ); - const dropdowncheck = useMemo(() => !filesData.some((f) => f.status === 'New'), [filesData]); const disableCheck = useMemo( @@ -326,6 +321,14 @@ const Content: React.FC = ({ [selectedfileslength, completedfileNo] ); + + + const processingCheck = () => { + const processingFiles = filesData.some(file => file.status === 'Processing'); + const selectedRowProcessing = selectedRows.some(row => filesData.some(file => file.name === row && file.status === 'Processing')); + return processingFiles || selectedRowProcessing; + } + const filesForProcessing = useMemo(() => { let newstatusfiles: CustomFile[] = []; if (selectedRows.length) { @@ -522,13 +525,6 @@ const Content: React.FC = ({ }); localStorage.setItem('isSchema', JSON.stringify(true)); }; - - - const processingCheck = () => { - filesData.find((f) => f.processingProgress && f.processingProgress > 10) - } - - console.log('processingCheck', processingCheck()); return ( <> {alertDetails.showAlert && ( @@ -627,6 +623,7 @@ const Content: React.FC = ({ placeholder='Select LLM Model' defaultValue={defaultLLM} view='ContentView' + isDisabled={false} /> = ({ open={openGraphView} setGraphViewOpen={setOpenGraphView} viewPoint={viewPoint} + processingCheck={processingCheck()} /> ); diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx index 9ee0c4088..8a5b0fca8 100644 --- a/frontend/src/components/Dropdown.tsx +++ b/frontend/src/components/Dropdown.tsx @@ -2,12 +2,14 @@ import { Dropdown } from '@neo4j-ndl/react'; import { DropdownProps, OptionType } from '../types'; import { useMemo } from 'react'; import { capitalize } from '../utils/Utils'; + interface ReusableDropdownProps extends DropdownProps { options: string[]; placeholder?: string; defaultValue?: string; children?: React.ReactNode; view?: 'ContentView' | 'GraphView'; + isDisabled: boolean; } const DropdownComponent: React.FC = ({ options, @@ -16,6 +18,7 @@ const DropdownComponent: React.FC = ({ onSelect, children, view, + isDisabled }) => { const handleChange = (selectedOption: OptionType | null | void) => { onSelect(selectedOption); @@ -38,9 +41,11 @@ const DropdownComponent: React.FC = ({ placeholder: placeholder || 'Select an option', defaultValue: defaultValue ? { label: capitalize(defaultValue), value: defaultValue } : undefined, menuPlacement: 'auto', + isDisabled: isDisabled }} size='medium' fluid + /> {children} diff --git a/frontend/src/components/FileTable.tsx b/frontend/src/components/FileTable.tsx index fb7b4b4fb..2365ee15d 100644 --- a/frontend/src/components/FileTable.tsx +++ b/frontend/src/components/FileTable.tsx @@ -321,7 +321,7 @@ const FileTable: React.FC = ({ isExpanded, connectionStatus, set text='Graph' size='large' label='Graph view' - disabled={((info.getValue() === 'New' || info.row.original.NodesCount === 0 || info.getValue() === 'New' || info.getValue() === 'Uploading'))} + disabled={((info.getValue() === 'New' || info.getValue() === 'Uploading'))} clean onClick={() => onInspect(info?.row?.original?.name as string)} > diff --git a/frontend/src/components/Graph/GraphViewModal.tsx b/frontend/src/components/Graph/GraphViewModal.tsx index 30c12a92e..709b9457f 100644 --- a/frontend/src/components/Graph/GraphViewModal.tsx +++ b/frontend/src/components/Graph/GraphViewModal.tsx @@ -37,6 +37,7 @@ const GraphViewModal: React.FunctionComponent = ({ viewPoint, nodeValues, relationshipValues, + processingCheck }) => { const nvlRef = useRef(null); const [nodes, setNodes] = useState([]); @@ -122,7 +123,7 @@ const GraphViewModal: React.FunctionComponent = ({ } else { setLoading(false); setStatus('danger'); - setStatusMessage(`Unable to retrieve document graph for ${inspectedName}`); + setStatusMessage(`No Nodes and Relations for the ${inspectedName} file`); } }) .catch((error: any) => { @@ -158,8 +159,8 @@ const GraphViewModal: React.FunctionComponent = ({ viewPoint === 'showGraphView' || viewPoint === 'chatInfoView' ? 'Generated Graph' : `Inspect Generated Graph from ${inspectedName}`; - - const checkBoxView = viewPoint !== 'chatInfoView'; + + const dropDownView = viewPoint !== 'chatInfoView'; const nvlCallbacks = { onLayoutComputing(isComputing: boolean) { @@ -169,7 +170,7 @@ const GraphViewModal: React.FunctionComponent = ({ }, }; - //To handle the current zoom in function of graph + //To handle the current zoom in function of graph const handleZoomIn = () => { nvlRef.current?.setZoom(nvlRef.current.getScale() * 1.3); }; @@ -183,7 +184,7 @@ const GraphViewModal: React.FunctionComponent = ({ const handleRefresh = () => { setLoading(true); setGraphType(intitalGraphType); - graphApi(); + graphApi(); }; // when modal closes reset all states to default @@ -266,12 +267,13 @@ const GraphViewModal: React.FunctionComponent = ({ {/* {checkBoxView && ( )} */} - {checkBoxView && ()} @@ -301,7 +303,7 @@ const GraphViewModal: React.FunctionComponent = ({ nvlCallbacks={nvlCallbacks} /> - {viewPoint !== 'chatInfoView' && ( Date: Thu, 4 Jul 2024 17:32:41 +0000 Subject: [PATCH 4/4] lint fix --- frontend/src/components/Content.tsx | 28 ++++---- frontend/src/components/Dropdown.tsx | 5 +- frontend/src/components/FileTable.tsx | 22 +++--- .../src/components/Graph/GraphViewModal.tsx | 71 +++++++++++-------- frontend/src/utils/Constants.ts | 30 ++++---- frontend/src/utils/Utils.ts | 5 +- 6 files changed, 85 insertions(+), 76 deletions(-) diff --git a/frontend/src/components/Content.tsx b/frontend/src/components/Content.tsx index b4e7653e5..6c77dde2c 100644 --- a/frontend/src/components/Content.tsx +++ b/frontend/src/components/Content.tsx @@ -271,8 +271,9 @@ const Content: React.FC = ({ const handleOpenGraphClick = () => { const bloomUrl = process.env.BLOOM_URL; const uriCoded = userCredentials?.uri.replace(/:\d+$/, ''); - const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${userCredentials?.port ?? '7687' - }`; + const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${ + userCredentials?.port ?? '7687' + }`; const encodedURL = encodeURIComponent(connectURL); const replacedUrl = bloomUrl?.replace('{CONNECT_URL}', encodedURL); window.open(replacedUrl, '_blank'); @@ -282,10 +283,10 @@ const Content: React.FC = ({ isLeftExpanded && isRightExpanded ? 'contentWithExpansion' : isRightExpanded - ? 'contentWithChatBot' - : !isLeftExpanded && !isRightExpanded - ? 'w-[calc(100%-128px)]' - : 'contentWithDropzoneExpansion'; + ? 'contentWithChatBot' + : !isLeftExpanded && !isRightExpanded + ? 'w-[calc(100%-128px)]' + : 'contentWithDropzoneExpansion'; const handleGraphView = () => { setOpenGraphView(true); @@ -321,13 +322,13 @@ const Content: React.FC = ({ [selectedfileslength, completedfileNo] ); - - const processingCheck = () => { - const processingFiles = filesData.some(file => file.status === 'Processing'); - const selectedRowProcessing = selectedRows.some(row => filesData.some(file => file.name === row && file.status === 'Processing')); + const processingFiles = filesData.some((file) => file.status === 'Processing'); + const selectedRowProcessing = selectedRows.some((row) => + filesData.some((file) => file.name === row && file.status === 'Processing') + ); return processingFiles || selectedRowProcessing; - } + }; const filesForProcessing = useMemo(() => { let newstatusfiles: CustomFile[] = []; @@ -612,8 +613,9 @@ const Content: React.FC = ({ }} > diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx index 8a5b0fca8..467eedfe8 100644 --- a/frontend/src/components/Dropdown.tsx +++ b/frontend/src/components/Dropdown.tsx @@ -18,7 +18,7 @@ const DropdownComponent: React.FC = ({ onSelect, children, view, - isDisabled + isDisabled, }) => { const handleChange = (selectedOption: OptionType | null | void) => { onSelect(selectedOption); @@ -41,11 +41,10 @@ const DropdownComponent: React.FC = ({ placeholder: placeholder || 'Select an option', defaultValue: defaultValue ? { label: capitalize(defaultValue), value: defaultValue } : undefined, menuPlacement: 'auto', - isDisabled: isDisabled + isDisabled: isDisabled, }} size='medium' fluid - /> {children} diff --git a/frontend/src/components/FileTable.tsx b/frontend/src/components/FileTable.tsx index 2365ee15d..3403d0d4f 100644 --- a/frontend/src/components/FileTable.tsx +++ b/frontend/src/components/FileTable.tsx @@ -321,7 +321,7 @@ const FileTable: React.FC = ({ isExpanded, connectionStatus, set text='Graph' size='large' label='Graph view' - disabled={((info.getValue() === 'New' || info.getValue() === 'Uploading'))} + disabled={info.getValue() === 'New' || info.getValue() === 'Uploading'} clean onClick={() => onInspect(info?.row?.original?.name as string)} > @@ -362,14 +362,14 @@ const FileTable: React.FC = ({ isExpanded, connectionStatus, set item?.fileSource === 's3 bucket' && localStorage.getItem('accesskey') === item?.awsAccessKeyId ? item?.status : item?.fileSource === 'local file' - ? item?.status - : item?.status === 'Completed' || item.status === 'Failed' - ? item?.status - : item?.fileSource == 'Wikipedia' || - item?.fileSource == 'youtube' || - item?.fileSource == 'gcs bucket' - ? item?.status - : 'N/A', + ? item?.status + : item?.status === 'Completed' || item.status === 'Failed' + ? item?.status + : item?.fileSource == 'Wikipedia' || + item?.fileSource == 'youtube' || + item?.fileSource == 'gcs bucket' + ? item?.status + : 'N/A', model: item?.model ?? model, id: uuidv4(), source_url: item?.url != 'None' && item?.url != '' ? item.url : '', @@ -382,8 +382,8 @@ const FileTable: React.FC = ({ isExpanded, connectionStatus, set language: item?.language ?? '', processingProgress: item?.processed_chunk != undefined && - item?.total_chunks != undefined && - !isNaN(Math.floor((item?.processed_chunk / item?.total_chunks) * 100)) + item?.total_chunks != undefined && + !isNaN(Math.floor((item?.processed_chunk / item?.total_chunks) * 100)) ? Math.floor((item?.processed_chunk / item?.total_chunks) * 100) : undefined, // total_pages: item?.total_pages ?? 0, diff --git a/frontend/src/components/Graph/GraphViewModal.tsx b/frontend/src/components/Graph/GraphViewModal.tsx index 709b9457f..e9cf210c8 100644 --- a/frontend/src/components/Graph/GraphViewModal.tsx +++ b/frontend/src/components/Graph/GraphViewModal.tsx @@ -37,7 +37,7 @@ const GraphViewModal: React.FunctionComponent = ({ viewPoint, nodeValues, relationshipValues, - processingCheck + processingCheck, }) => { const nvlRef = useRef(null); const [nodes, setNodes] = useState([]); @@ -88,16 +88,16 @@ const GraphViewModal: React.FunctionComponent = ({ }; }, []); - // To get nodes and relations on basis of view + // To get nodes and relations on basis of view const fetchData = useCallback(async () => { try { const nodeRelationshipData = viewPoint === 'showGraphView' ? await graphQueryAPI( - userCredentials as UserCredentials, - graphQuery, - selectedRows.map((f) => JSON.parse(f).name) - ) + userCredentials as UserCredentials, + graphQuery, + selectedRows.map((f) => JSON.parse(f).name) + ) : await graphQueryAPI(userCredentials as UserCredentials, graphQuery, [inspectedName ?? '']); return nodeRelationshipData; } catch (error: any) { @@ -105,7 +105,7 @@ const GraphViewModal: React.FunctionComponent = ({ } }, [viewPoint, selectedRows, graphQuery, inspectedName, userCredentials]); - // Api call to get the nodes and relations + // Api call to get the nodes and relations const graphApi = () => { fetchData() .then((result) => { @@ -131,7 +131,7 @@ const GraphViewModal: React.FunctionComponent = ({ setStatus('danger'); setStatusMessage(error.message); }); - } + }; useEffect(() => { if (open) { @@ -170,17 +170,17 @@ const GraphViewModal: React.FunctionComponent = ({ }, }; - //To handle the current zoom in function of graph + // To handle the current zoom in function of graph const handleZoomIn = () => { nvlRef.current?.setZoom(nvlRef.current.getScale() * 1.3); }; - //To handle the current zoom out function of graph + // To handle the current zoom out function of graph const handleZoomOut = () => { nvlRef.current?.setZoom(nvlRef.current.getScale() * 0.7); }; - //Refresh the graph with nodes and relations if file is processing + // Refresh the graph with nodes and relations if file is processing const handleRefresh = () => { setLoading(true); setGraphType(intitalGraphType); @@ -198,7 +198,7 @@ const GraphViewModal: React.FunctionComponent = ({ setRelationships([]); }; - // sort the legends in with Chunk and Document always the first two values + // sort the legends in with Chunk and Document always the first two values const legendCheck = Object.keys(newScheme).sort((a, b) => { if (a === 'Document' || a === 'Chunk') { return -1; @@ -225,14 +225,19 @@ const GraphViewModal: React.FunctionComponent = ({ // Make a function call to store the nodes and relations in their states const initGraph = (graphType: GraphType[], finalNodes: Node[], finalRels: Relationship[], schemeVal: Scheme) => { if (allNodes.length > 0 && allRelationships.length > 0) { - const { filteredNodes, filteredRelations, filteredScheme } = filterData(graphType, finalNodes, finalRels, schemeVal); + const { filteredNodes, filteredRelations, filteredScheme } = filterData( + graphType, + finalNodes, + finalRels, + schemeVal + ); setNodes(filteredNodes); setRelationships(filteredRelations); setNewScheme(filteredScheme); } - } + }; - //handle dropdown value change and call the init graph method + // handle dropdown value change and call the init graph method const handleDropdownChange = (selectedOption: OptionType | null | void) => { if (selectedOption?.value) { const selectedValue = selectedOption.value; @@ -267,14 +272,16 @@ const GraphViewModal: React.FunctionComponent = ({ {/* {checkBoxView && ( )} */} - {dropDownView && ()} + {dropDownView && ( + + )} @@ -303,14 +310,16 @@ const GraphViewModal: React.FunctionComponent = ({ nvlCallbacks={nvlCallbacks} /> - {(viewPoint !== 'chatInfoView' && processingCheck) && ( - - )} + {viewPoint !== 'chatInfoView' && processingCheck && ( + + + + )} diff --git a/frontend/src/utils/Constants.ts b/frontend/src/utils/Constants.ts index b02af11eb..7586524cf 100644 --- a/frontend/src/utils/Constants.ts +++ b/frontend/src/utils/Constants.ts @@ -37,25 +37,25 @@ export const llms = process.env?.LLM_MODELS?.trim() != '' ? process.env.LLM_MODELS?.split(',') : [ - 'diffbot', - 'openai-gpt-3.5', - 'openai-gpt-4o', - 'gemini-1.0-pro', - 'gemini-1.5-pro', - 'LLM_MODEL_CONFIG_azure-ai-gpt-35', - 'LLM_MODEL_CONFIG_azure-ai-gpt-4o', - 'LLM_MODEL_CONFIG_ollama_llama3', - 'LLM_MODEL_CONFIG_groq-llama3-70b', - 'LLM_MODEL_CONFIG_anthropic-claude-3-5-sonnet', - 'LLM_MODEL_CONFIG_fireworks-llama-v3-70b', - 'LLM_MODEL_CONFIG_bedrock-claude-3-5-sonnet' - ]; + 'diffbot', + 'openai-gpt-3.5', + 'openai-gpt-4o', + 'gemini-1.0-pro', + 'gemini-1.5-pro', + 'LLM_MODEL_CONFIG_azure-ai-gpt-35', + 'LLM_MODEL_CONFIG_azure-ai-gpt-4o', + 'LLM_MODEL_CONFIG_ollama_llama3', + 'LLM_MODEL_CONFIG_groq-llama3-70b', + 'LLM_MODEL_CONFIG_anthropic-claude-3-5-sonnet', + 'LLM_MODEL_CONFIG_fireworks-llama-v3-70b', + 'LLM_MODEL_CONFIG_bedrock-claude-3-5-sonnet', + ]; export const defaultLLM = llms?.includes('openai-gpt-3.5') ? 'openai-gpt-3.5' : llms?.includes('gemini-1.0-pro') - ? 'gemini-1.0-pro' - : 'diffbot'; + ? 'gemini-1.0-pro' + : 'diffbot'; export const chunkSize = process.env.CHUNK_SIZE ? parseInt(process.env.CHUNK_SIZE) : 1 * 1024 * 1024; export const timeperpage = process.env.TIME_PER_PAGE ? parseInt(process.env.TIME_PER_PAGE) : 50; diff --git a/frontend/src/utils/Utils.ts b/frontend/src/utils/Utils.ts index 40e9998bd..0f62160b6 100644 --- a/frontend/src/utils/Utils.ts +++ b/frontend/src/utils/Utils.ts @@ -169,7 +169,7 @@ export const filterData = ( graphType: GraphType[], allNodes: Node[], allRelationships: Relationship[], - scheme: Scheme, + scheme: Scheme ) => { let filteredNodes: Node[] = []; let filteredRelations: Relationship[] = []; @@ -190,7 +190,6 @@ export const filterData = ( acc[key] = scheme[key]; return acc; }, {} as Scheme); - } else if (!graphType.includes('Document') && !graphType.includes('Entities') && graphType.includes('Chunk')) { // Only Chunk filteredNodes = allNodes.filter((node) => node.labels.includes('Chunk')); @@ -211,7 +210,7 @@ export const filterData = ( filteredRelations = allRelationships.filter((rel) => ['PART_OF', 'FIRST_CHUNK', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption) ); - filteredScheme = {Document: scheme.Document, Chunk:scheme.Chunk}; + filteredScheme = { Document: scheme.Document, Chunk: scheme.Chunk }; } else if (!graphType.includes('Document') && graphType.includes('Entities') && graphType.includes('Chunk')) { // Chunk + Entity filteredNodes = allNodes.filter((node) => !node.labels.includes('Document'));