{
openTextSchema={openTextSchema}
openLoadSchema={openLoadSchema}
openPredefinedSchema={openPredefinedSchema}
+ openDataImporterSchema={openDataImporterSchema}
showEnhancementDialog={showEnhancementDialog}
toggleEnhancementDialog={toggleEnhancementDialog}
setOpenConnection={setOpenConnection}
@@ -671,6 +733,7 @@ const PageLayout: React.FC = () => {
openTextSchema={openTextSchema}
openLoadSchema={openLoadSchema}
openPredefinedSchema={openPredefinedSchema}
+ openDataImporterSchema={openDataImporterSchema}
showEnhancementDialog={showEnhancementDialog}
toggleEnhancementDialog={toggleEnhancementDialog}
setOpenConnection={setOpenConnection}
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/DataImporter.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/DataImporter.tsx
new file mode 100644
index 000000000..061b3af4e
--- /dev/null
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/DataImporter.tsx
@@ -0,0 +1,179 @@
+import { Button, Dialog } from '@neo4j-ndl/react';
+import { useState } from 'react';
+import { OptionType, TupleType } from '../../../../types';
+import { extractOptions, updateSourceTargetTypeOptions } from '../../../../utils/Utils';
+import { useFileContext } from '../../../../context/UsersFiles';
+import ImporterInput from './ImporterInput';
+import SchemaViz from '../../../Graph/SchemaViz';
+import PatternContainer from './PatternContainer';
+import UploadJsonData from './UploadJsonData';
+
+interface DataImporterDialogProps {
+ open: boolean;
+ onClose: () => void;
+ onApply: (
+ patterns: string[],
+ nodeLabels: OptionType[],
+ relationshipLabels: OptionType[],
+ updatedSource: OptionType[],
+ updatedTarget: OptionType[],
+ updatedType: OptionType[]
+ ) => void;
+}
+
+const DataImporterSchemaDialog = ({ open, onClose, onApply }: DataImporterDialogProps) => {
+ const {
+ importerPattern,
+ setImporterPattern,
+ importerNodes,
+ setImporterNodes,
+ importerRels,
+ setImporterRels,
+ sourceOptions,
+ setSourceOptions,
+ targetOptions,
+ setTargetOptions,
+ typeOptions,
+ setTypeOptions,
+ } = useFileContext();
+
+ const [openGraphView, setOpenGraphView] = useState
(false);
+ const [viewPoint, setViewPoint] = useState('');
+ const handleCancel = () => {
+ onClose();
+ setImporterPattern([]);
+ setImporterNodes([]);
+ setImporterRels([]);
+ };
+
+ const handleImporterCheck = async () => {
+ const [newSourceOptions, newTargetOptions, newTypeOptions] = await updateSourceTargetTypeOptions({
+ patterns: importerPattern.map((label) => ({ label, value: label })),
+ currentSourceOptions: sourceOptions,
+ currentTargetOptions: targetOptions,
+ currentTypeOptions: typeOptions,
+ setSourceOptions,
+ setTargetOptions,
+ setTypeOptions,
+ });
+ onApply(importerPattern, importerNodes, importerRels, newSourceOptions, newTargetOptions, newTypeOptions);
+ onClose();
+ };
+
+ const handleRemovePattern = (patternToRemove: string) => {
+ const updatedPatterns = importerPattern.filter((p) => p !== patternToRemove);
+ if (updatedPatterns.length === 0) {
+ setImporterPattern([]);
+ setImporterNodes([]);
+ setImporterRels([]);
+ return;
+ }
+ const updatedTuples: TupleType[] = updatedPatterns
+ .map((item: string) => {
+ const matchResult = item.match(/^(.+?)-\[:([A-Z_]+)\]->(.+)$/);
+ if (matchResult) {
+ const [source, rel, target] = matchResult.slice(1).map((s) => s.trim());
+ return {
+ value: `${source},${rel},${target}`,
+ label: `${source} -[:${rel}]-> ${target}`,
+ source,
+ target,
+ type: rel,
+ };
+ }
+ return null;
+ })
+ .filter(Boolean) as TupleType[];
+ const { nodeLabelOptions, relationshipTypeOptions } = extractOptions(updatedTuples);
+ setImporterPattern(updatedPatterns);
+ setImporterNodes(nodeLabelOptions);
+ setImporterRels(relationshipTypeOptions);
+ };
+
+ const handleSchemaView = () => {
+ setOpenGraphView(true);
+ setViewPoint('showSchemaView');
+ };
+
+ return (
+ <>
+
+ {openGraphView && (
+
+ )}
+
+ );
+};
+
+export default DataImporterSchemaDialog;
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/GraphPattern.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/GraphPattern.tsx
index 1d05a9852..b6d9bd982 100644
--- a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/GraphPattern.tsx
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/GraphPattern.tsx
@@ -2,8 +2,9 @@ import React, { useState, useRef, useEffect } from 'react';
import { Select } from '@neo4j-ndl/react';
import ButtonWithToolTip from '../../../UI/ButtonWithToolTip';
import { OptionType, TupleCreationProps } from '../../../../types';
-import { appLabels, LOCAL_KEYS } from '../../../../utils/Constants';
+import { appLabels } from '../../../../utils/Constants';
import { useFileContext } from '../../../../context/UsersFiles';
+import { useCredentials } from '../../../../context/UserCredentials';
interface IErrorState {
showError: boolean;
errorMessage: string;
@@ -15,8 +16,16 @@ const GraphPattern: React.FC = ({
onPatternChange,
onAddPattern,
}) => {
- const { sourceOptions, setSourceOptions, typeOptions, setTypeOptions, targetOptions, setTargetOptions } =
- useFileContext();
+ const {
+ sourceOptions,
+ setSourceOptions,
+ typeOptions,
+ setTypeOptions,
+ targetOptions,
+ setTargetOptions,
+ setSelectedRels,
+ selectedRels,
+ } = useFileContext();
const [inputValues, setInputValues] = useState<{ source: string; type: string; target: string }>({
source: '',
type: '',
@@ -28,19 +37,41 @@ const GraphPattern: React.FC = ({
target: { showError: false, errorMessage: '' },
});
const sourceRef = useRef(null);
+ const { userCredentials } = useCredentials();
useEffect(() => {
- const savedSources = JSON.parse(localStorage.getItem('customSourceOptions') ?? 'null');
- const savedTypes = JSON.parse(localStorage.getItem('customTypeOptions') ?? 'null');
- const savedTargets = JSON.parse(localStorage.getItem('customTargetOptions') ?? 'null');
- if (savedSources) {
- setSourceOptions(savedSources);
- }
- if (savedTypes) {
- setTypeOptions(savedTypes);
+ const isGlobalStateSet =
+ selectedRels.length > 0 || sourceOptions.length > 0 || typeOptions.length > 0 || targetOptions.length > 0;
+ if (isGlobalStateSet) {
+ return;
}
- if (savedTargets) {
- setTargetOptions(savedTargets);
+ const selectedNodeRelsStr = localStorage.getItem('selectedRelationshipLabels');
+ if (selectedNodeRelsStr != null) {
+ const selectedGraphOptions = JSON.parse(selectedNodeRelsStr);
+ if (userCredentials?.uri === selectedGraphOptions.db) {
+ const rels = selectedGraphOptions.selectedOptions;
+ const sourceSet = new Set();
+ const typeSet = new Set();
+ const targetSet = new Set();
+ const mappedRels = rels.map((rel: { value: string }) => {
+ const [sourceVal, typeVal, targetVal] = rel.value.split(',');
+ sourceSet.add(sourceVal);
+ typeSet.add(typeVal);
+ targetSet.add(targetVal);
+ return {
+ source: { value: sourceVal, label: sourceVal },
+ type: { value: typeVal, label: typeVal },
+ target: { value: targetVal, label: targetVal },
+ };
+ });
+ const savedSources: OptionType[] = Array.from(sourceSet).map((val) => ({ value: val, label: val }));
+ const savedTypes: OptionType[] = Array.from(typeSet).map((val) => ({ value: val, label: val }));
+ const savedTargets: OptionType[] = Array.from(targetSet).map((val) => ({ value: val, label: val }));
+ setSelectedRels(mappedRels);
+ setSourceOptions(savedSources);
+ setTypeOptions(savedTypes);
+ setTargetOptions(savedTargets);
+ }
}
}, []);
@@ -92,9 +123,6 @@ const GraphPattern: React.FC = ({
const handleAddPattern = () => {
onAddPattern();
- localStorage.setItem(LOCAL_KEYS.source, JSON.stringify(sourceOptions));
- localStorage.setItem(LOCAL_KEYS.type, JSON.stringify(typeOptions));
- localStorage.setItem(LOCAL_KEYS.target, JSON.stringify(targetOptions));
setTimeout(() => {
const selectInput = sourceRef.current?.querySelector('input');
selectInput?.focus();
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/ImporterInput.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/ImporterInput.tsx
new file mode 100644
index 000000000..35b8e95a9
--- /dev/null
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/ImporterInput.tsx
@@ -0,0 +1,12 @@
+import { Box, TextLink } from '@neo4j-ndl/react';
+
+const ImporterInput = () => {
+ return (
+
+
+ Aura Data Models
+
+
+ );
+};
+export default ImporterInput;
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/LoadExistingSchema.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/LoadExistingSchema.tsx
index 76b823763..54d62107c 100644
--- a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/LoadExistingSchema.tsx
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/LoadExistingSchema.tsx
@@ -36,6 +36,7 @@ const LoadDBSchemaDialog = ({ open, onClose, onApply }: LoadDBSchemaDialogProps)
} = useFileContext();
const [openGraphView, setOpenGraphView] = useState(false);
const [viewPoint, setViewPoint] = useState('');
+ const [message, setMessage] = useState('');
useEffect(() => {
if (open) {
@@ -48,6 +49,13 @@ const LoadDBSchemaDialog = ({ open, onClose, onApply }: LoadDBSchemaDialogProps)
try {
const response = await getNodeLabelsAndRelTypes();
const schemaData: string[] = response.data.data.triplets;
+ if (!schemaData || schemaData.length === 0) {
+ setDbNodes([]);
+ setDbRels([]);
+ setDbPattern([]);
+ setMessage('No data found');
+ return;
+ }
const schemaTuples: TupleType[] = schemaData
.map((item: string) => {
const matchResult = item.match(/^(.+?)-([A-Z_]+)->(.+)$/);
@@ -142,6 +150,7 @@ const LoadDBSchemaDialog = ({ open, onClose, onApply }: LoadDBSchemaDialogProps)
onCancel={handleCancel}
nodes={dbNodes}
rels={dbRels}
+ message={message}
/>
{openGraphView && (
>;
combinedRels: OptionType[];
setCombinedRels: Dispatch>;
+ openDataImporterSchema: () => void;
}) {
const {
setSelectedRels,
@@ -70,6 +72,10 @@ export default function NewEntityExtractionSetting({
setPreDefinedRels,
preDefinedPattern,
setPreDefinedPattern,
+ setImporterNodes,
+ setImporterRels,
+ setImporterPattern,
+ importerPattern,
} = useFileContext();
const { userCredentials } = useCredentials();
const [openGraphView, setOpenGraphView] = useState(false);
@@ -122,6 +128,10 @@ export default function NewEntityExtractionSetting({
updateLocalStorage(userCredentials!, 'selectedRelationshipLabels', []);
updateLocalStorage(userCredentials!, 'selectedPattern', []);
showNormalToast(`Successfully Removed the Schema settings`);
+ // Importer clear
+ setImporterNodes([]);
+ setImporterRels([]);
+ setImporterPattern([]);
};
const handleFinalApply = (pattern: string[], nodeLables: OptionType[], relationshipLabels: OptionType[]) => {
@@ -234,12 +244,6 @@ export default function NewEntityExtractionSetting({
};
const handleRemovePattern = (patternToRemove: string) => {
- const match = patternToRemove.match(/(.*?) -\[:(.*?)\]-> (.*)/);
- if (!match) {
- return;
- }
- const [, source, type, target] = match.map((s) => s.trim());
-
if (userDefinedPattern.includes(patternToRemove)) {
updateStore(userDefinedPattern, patternToRemove, setUserDefinedPattern, setUserDefinedNodes, setUserDefinedRels);
}
@@ -252,9 +256,30 @@ export default function NewEntityExtractionSetting({
if (schemaTextPattern.includes(patternToRemove)) {
updateStore(schemaTextPattern, patternToRemove, setSchemaTextPattern, setSchemaValNodes, setSchemaValRels);
}
- setCombinedPatterns((prev) => prev.filter((p) => p !== patternToRemove));
- setCombinedNodes((prev) => prev.filter((n) => n.value !== source && n.value !== target));
- setCombinedRels((prev) => prev.filter((r) => r.value !== type));
+ if (importerPattern.includes(patternToRemove)) {
+ updateStore(importerPattern, patternToRemove, setImporterPattern, setImporterNodes, setImporterRels);
+ }
+ const updatedCombinedPatterns = combinedPatterns.filter((p) => p !== patternToRemove);
+ setCombinedPatterns(updatedCombinedPatterns);
+ const updatedTuples: TupleType[] = updatedCombinedPatterns
+ .map((item) => {
+ const parts = item.match(/(.*?) -\[:(.*?)\]-> (.*)/);
+ if (!parts) {
+ return null;
+ }
+ const [src, rel, tgt] = parts.slice(1).map((s) => s.trim());
+ return {
+ value: `${src},${rel},${tgt}`,
+ label: `${src} -[:${rel}]-> ${tgt}`,
+ source: src,
+ target: tgt,
+ type: rel,
+ };
+ })
+ .filter(Boolean) as TupleType[];
+ const { nodeLabelOptions, relationshipTypeOptions } = extractOptions(updatedTuples);
+ setCombinedNodes(nodeLabelOptions);
+ setCombinedRels(relationshipTypeOptions);
setTupleOptions((prev) => prev.filter((t) => t.label !== patternToRemove));
};
@@ -288,6 +313,16 @@ export default function NewEntityExtractionSetting({
openLoadSchema();
}, []);
+ const onDataImporterSchemaCLick: MouseEventHandler = useCallback(async () => {
+ if (view === 'Dialog' && onClose != undefined) {
+ onClose();
+ }
+ if (view === 'Tabs' && closeEnhanceGraphSchemaDialog != undefined) {
+ closeEnhanceGraphSchemaDialog();
+ }
+ openDataImporterSchema();
+ }, []);
+
return (
@@ -363,6 +398,14 @@ export default function NewEntityExtractionSetting({
}
onClick={onSchemaFromTextCLick}
/>
+
+ Data Importer JSON
+
+ }
+ onClick={onDataImporterSchemaCLick}
+ />
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/UploadJsonData.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/UploadJsonData.tsx
new file mode 100644
index 000000000..535133244
--- /dev/null
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/UploadJsonData.tsx
@@ -0,0 +1,104 @@
+import { Dropzone, Flex, Typography } from '@neo4j-ndl/react';
+import { useState } from 'react';
+import { IconButtonWithToolTip } from '../../../UI/IconButtonToolTip';
+import { InformationCircleIconOutline } from '@neo4j-ndl/react/icons';
+import { showErrorToast } from '../../../../utils/Toasts';
+import { buttonCaptions } from '../../../../utils/Constants';
+import Loader from '../../../../utils/Loader';
+
+interface GraphSchema {
+ nodeLabels: any[];
+ relationshipTypes: any[];
+ relationshipObjectTypes: any[];
+ nodeObjectTypes: any[];
+}
+interface UploadJsonDataProps {
+ onSchemaExtracted: (schema: GraphSchema) => void;
+}
+const UploadJsonData = ({ onSchemaExtracted }: UploadJsonDataProps) => {
+ const [isLoading, setIsLoading] = useState(false);
+ const onDropHandler = async (files: Partial[]) => {
+ const file = files[0];
+ if (!file) {
+ return;
+ }
+ setIsLoading(true);
+ try {
+ const fileReader = new FileReader();
+ fileReader.onload = (event) => {
+ try {
+ const jsonText = event.target?.result as string;
+ const parsed = JSON.parse(jsonText);
+ const graphSchema = parsed?.dataModel?.graphSchemaRepresentation?.graphSchema;
+ if (
+ graphSchema &&
+ Array.isArray(graphSchema.nodeLabels) &&
+ Array.isArray(graphSchema.relationshipTypes) &&
+ Array.isArray(graphSchema.relationshipObjectTypes) &&
+ Array.isArray(graphSchema.nodeObjectTypes)
+ ) {
+ onSchemaExtracted({
+ nodeLabels: graphSchema.nodeLabels,
+ relationshipTypes: graphSchema.relationshipTypes,
+ relationshipObjectTypes: graphSchema.relationshipObjectTypes,
+ nodeObjectTypes: graphSchema.nodeObjectTypes,
+ });
+ } else {
+ showErrorToast('Invalid graphSchema format');
+ }
+ } catch (err) {
+ console.error(err);
+ showErrorToast('Failed to parse JSON file.');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+ fileReader.readAsText(file as File);
+ } catch (err) {
+ console.error(err);
+ showErrorToast('Error reading file.');
+ setIsLoading(false);
+ }
+ };
+ return (
+ }
+ isTesting={true}
+ className='bg-none! dropzoneContainer'
+ supportedFilesDescription={
+
+
+ {buttonCaptions.importDropzoneSpan}
+
+
+
+ JSON (.json)
+
+
+ }
+ >
+
+
+
+
+
+ }
+ dropZoneOptions={{
+ accept: {
+ 'application/json': ['.json'],
+ },
+ onDrop: onDropHandler,
+ onDropRejected: (e) => {
+ if (e.length) {
+ showErrorToast('Failed To Upload, Unsupported file extension.');
+ }
+ },
+ }}
+ />
+ );
+};
+export default UploadJsonData;
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx
index 46114f765..61de6ab91 100644
--- a/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx
@@ -50,6 +50,10 @@ export default function GraphEnhancementDialog({
setPreDefinedPattern,
setSelectedPreDefOption,
allPatterns,
+ setDataImporterSchemaDialog,
+ setImporterNodes,
+ setImporterPattern,
+ setImporterRels,
} = useFileContext();
const isTablet = useMediaQuery(`(min-width:${breakpoints.xs}) and (max-width: ${breakpoints.lg})`);
@@ -85,7 +89,14 @@ export default function GraphEnhancementDialog({
setPreDefinedNodes([]);
setPreDefinedRels([]);
setPreDefinedPattern([]);
+ // combined Nodes and rels
+ setCombinedNodes([]);
+ setCombinedRels([]);
setCombinedPatterns([]);
+ // Data Importer
+ setImporterNodes([]);
+ setImporterPattern([]);
+ setImporterRels([]);
setSelectedPreDefOption(null);
onClose();
};
@@ -193,6 +204,9 @@ export default function GraphEnhancementDialog({
setCombinedNodes={setCombinedNodes}
combinedRels={combinedRels}
setCombinedRels={setCombinedRels}
+ openDataImporterSchema={() => {
+ setDataImporterSchemaDialog({ triggeredFrom: 'enhancementtab', show: true });
+ }}
/>
diff --git a/frontend/src/components/UI/SchemaSelectionPopup.tsx b/frontend/src/components/UI/SchemaSelectionPopup.tsx
index 6612ced37..94aa04cd1 100644
--- a/frontend/src/components/UI/SchemaSelectionPopup.tsx
+++ b/frontend/src/components/UI/SchemaSelectionPopup.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Button, LoadingSpinner } from '@neo4j-ndl/react';
+import { Dialog, Button, LoadingSpinner, Typography } from '@neo4j-ndl/react';
import PatternContainer from '../Popups/GraphEnhancementDialog/EnitityExtraction/PatternContainer';
import { SchemaSelectionProps } from '../../types';
@@ -14,6 +14,7 @@ const SchemaSelectionDialog = ({
highlightPattern,
onApply,
onCancel,
+ message,
}: SchemaSelectionProps) => {
return (