Skip to content

Commit 738312a

Browse files
prakriti-solankeyprakriti-solankey
authored
Open popup for schema (#1198)
* backend-changes * highlight recently added val * schema modal
1 parent 5015fe7 commit 738312a

File tree

8 files changed

+405
-160
lines changed

8 files changed

+405
-160
lines changed

Diff for: ‎backend/src/main.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -696,8 +696,8 @@ def get_labels_and_relationtypes(uri, userName, password, database):
696696
end_label not in excluded_labels and
697697
rel_type not in excluded_relationships
698698
):
699-
triples.append(f"{start_label} -[:{rel_type}]-> {end_label}")
700-
return list(set(triples))
699+
triples.append(f"{start_label}-{rel_type}->{end_label}")
700+
return {"triplets" : list(set(triples))}
701701

702702
def manually_cancelled_job(graph, filenames, source_types, merged_dir, uri):
703703

Diff for: ‎frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/NewEntityExtractionSetting.tsx

+26-43
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import { MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
22
import ButtonWithToolTip from '../../../UI/ButtonWithToolTip';
33
import { appLabels, buttonCaptions, getDefaultSchemaExamples, tooltips } from '../../../../utils/Constants';
4-
import { Flex, Typography, useMediaQuery, Tag } from '@neo4j-ndl/react';
4+
import { Flex, Typography, useMediaQuery } from '@neo4j-ndl/react';
55
import { useCredentials } from '../../../../context/UserCredentials';
66
import { useFileContext } from '../../../../context/UsersFiles';
77
import { OptionType, TupleType } from '../../../../types';
88
import { getNodeLabelsAndRelTypes } from '../../../../services/GetNodeLabelsRelTypes';
99
import { showNormalToast } from '../../../../utils/Toasts';
1010
import { useHasSelections } from '../../../../hooks/useHasSelections';
11-
import { Hierarchy1Icon } from '@neo4j-ndl/react/icons';
11+
import PatternContainer from './PatternContainer';
1212
import SchemaViz from '../../../Graph/SchemaViz';
1313
import GraphPattern from './GraphPattern';
1414
import { updateLocalStorage, extractOptions } from '../../../../utils/Utils';
15+
import SchemaSelectionDialog from '../../../UI/SchemaSelectionPopup';
1516

1617
export default function NewEntityExtractionSetting({
1718
view,
@@ -61,9 +62,9 @@ export default function NewEntityExtractionSetting({
6162
try {
6263
const response = await getNodeLabelsAndRelTypes();
6364
setLoading(false);
64-
const schemaData: string[] = response.data.data;
65+
const schemaData: string[] = response.data.data.triplets;
6566
const schemaTuples: TupleType[] = schemaData.map((item: string) => {
66-
const matchResult = item.match(/(.*?)-\[:(.*?)\]->(.*)/);
67+
const matchResult = item.match(/^(.+?)-([A-Z_]+)->(.+)$/);
6768
if (matchResult) {
6869
const [source, rel, target] = matchResult.slice(1).map((s) => s.trim());
6970
return {
@@ -88,8 +89,14 @@ export default function NewEntityExtractionSetting({
8889

8990
const clickHandler: MouseEventHandler<HTMLButtonElement> = useCallback(async () => {
9091
await getOptions();
92+
setSchemaPopupView('loadExistingSchema')
93+
setOpenSchemaPopup(true);
9194
}, [nodeLabelOptions, relationshipTypeOptions]);
9295

96+
const onclosePopup = () => {
97+
setOpenSchemaPopup(false);
98+
}
99+
93100
const handleClear = () => {
94101
setSelectedNodes([]);
95102
setSelectedRels([]);
@@ -139,11 +146,6 @@ export default function NewEntityExtractionSetting({
139146
updateLocalStorage(userCredentials!!, 'selectedNodeLabels', selectedRelPayload);
140147
setSelectedNodes(nodeLabelOptions);
141148
setSelectedRels(relationshipTypeOptions);
142-
143-
console.log('Schema settings saved successfully:', {
144-
nodes: selectedNodePayload,
145-
rels: selectedRelPayload,
146-
});
147149
};
148150

149151
const handleSchemaView = () => {
@@ -237,40 +239,12 @@ export default function NewEntityExtractionSetting({
237239
>
238240
</GraphPattern>
239241
{pattern.length > 0 && (
240-
<div className='h-full'>
241-
<div className='flex align-self-center justify-center border'>
242-
<h5>{appLabels.selectedPatterns}</h5>
243-
</div>
244-
<div className='flex items-start gap-4 mt-4'>
245-
<div className='flex flex-wrap gap-2 patternContainer'>
246-
{pattern.map((pattern) => (
247-
<Tag
248-
key={pattern}
249-
onRemove={() => handleRemovePattern(pattern)}
250-
isRemovable={true}
251-
type='default'
252-
size='medium'
253-
className={`rounded-full px-4 py-1 shadow-sm transition-all duration-300 ${pattern === highlightPattern ? 'animate-highlight' : ''
254-
}`}
255-
>
256-
{pattern}
257-
</Tag>
258-
))}
259-
</div>
260-
<div className='flex-shrink-0 items-end m-auto'>
261-
<ButtonWithToolTip
262-
label={'Graph Schema'}
263-
text={tooltips.visualizeGraph}
264-
placement='top'
265-
fill='outlined'
266-
onClick={handleSchemaView}
267-
className='ml-4'
268-
>
269-
<Hierarchy1Icon />
270-
</ButtonWithToolTip>
271-
</div>
272-
</div>
273-
</div>
242+
<PatternContainer
243+
pattern={pattern}
244+
handleRemove={handleRemovePattern}
245+
handleSchemaView={handleSchemaView}
246+
highlightPattern={highlightPattern ?? ''}
247+
></PatternContainer>
274248
)}
275249
<Flex className='mt-4! mb-2 flex! items-center' flexDirection='row' justifyContent='flex-end'>
276250
<Flex flexDirection='row' gap='4'>
@@ -354,6 +328,15 @@ export default function NewEntityExtractionSetting({
354328
relationshipValues={(relationshipTypeOptions) ?? []}
355329
/>
356330
)}
331+
{
332+
openSchemaPopup && (<SchemaSelectionDialog
333+
open={openSchemaPopup}
334+
onClose={onclosePopup}
335+
pattern={pattern}
336+
handleRemove={handleRemovePattern}
337+
handleSchemaView={handleSchemaView}
338+
></SchemaSelectionDialog>)
339+
}
357340
</div>
358341
);
359342
}

Diff for: ‎frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/PatternContainer.tsx

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import {Tag } from '@neo4j-ndl/react';
2+
import { appLabels, tooltips } from '../../../../utils/Constants';
3+
import ButtonWithToolTip from '../../../UI/ButtonWithToolTip';
4+
import { ExploreIcon } from '@neo4j-ndl/react/icons';
5+
6+
interface PatternContainerProps {
7+
pattern: string[],
8+
handleRemove: (pattern: string) => void,
9+
handleSchemaView: (view?: string) => void,
10+
highlightPattern?:string
11+
}
12+
13+
14+
const PatternContainer = ({pattern, handleRemove, handleSchemaView, highlightPattern}: PatternContainerProps) => {
15+
return (
16+
// <div className='h-full'>
17+
// <div className='flex align-self-center justify-center border'>
18+
// <h5>{appLabels.selectedPatterns}</h5>
19+
// </div>
20+
// <div className='flex items-start gap-4 mt-4'>
21+
// <div className='flex flex-wrap gap-2 patternContainer'>
22+
// {pattern.map((pattern) => (
23+
// <Tag
24+
// key={pattern}
25+
// onRemove={() => handleRemove(pattern)}
26+
// isRemovable={true}
27+
// type='default'
28+
// size='medium'
29+
// className={`rounded-full px-4 py-1 shadow-sm transition-all duration-300 ${pattern === highlightPattern ? 'animate-highlight' : ''
30+
// }`}
31+
// >
32+
// {pattern}
33+
// </Tag>
34+
// ))}
35+
// </div>
36+
// <div className='flex-shrink-0 items-end m-auto'>
37+
// <ButtonWithToolTip
38+
// label={'Graph Schema'}
39+
// text={tooltips.visualizeGraph}
40+
// placement='top'
41+
// fill='outlined'
42+
// onClick={handleSchemaView}
43+
// className='ml-4'
44+
// >
45+
// <Hierarchy1Icon />
46+
// </ButtonWithToolTip>
47+
// </div>
48+
// </div>
49+
// </div>
50+
<div className="h-full">
51+
<div className="flex align-self-center justify-center border">
52+
<h5>{appLabels.selectedPatterns}</h5>
53+
</div>
54+
<div className="flex flex-col gap-4 mt-4">
55+
<div className="relative patternContainer border p-4 rounded-md shadow-sm">
56+
<div className="sticky top-0 right-0 flex justify-end z-10 ">
57+
<ButtonWithToolTip
58+
label={'Graph Schema'}
59+
text={tooltips.visualizeGraph}
60+
placement="top"
61+
fill="outlined"
62+
onClick={handleSchemaView}
63+
>
64+
<ExploreIcon className='n-size-token-7'/>
65+
</ButtonWithToolTip>
66+
</div>
67+
<div className="flex flex-wrap gap-2">
68+
{pattern.map((pattern) => (
69+
<Tag
70+
key={pattern}
71+
onRemove={() => handleRemove(pattern)}
72+
isRemovable={true}
73+
type="default"
74+
size="medium"
75+
className={`rounded-full px-4 py-1 shadow-sm transition-all duration-300 ${pattern === highlightPattern ? 'animate-highlight' : ''
76+
}`}
77+
>
78+
{pattern}
79+
</Tag>
80+
))}
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
)
86+
}
87+
88+
export default PatternContainer;

0 commit comments

Comments
 (0)