75 | );
76 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Visual Cypher Builder 🔨
2 | The **Visual Cypher Builder** is a user-friendly tool that simplifies the process of building graph queries in Neo4j's Cypher language. With an intuitive drag-and-drop interface, it helps users — from beginners to experts — visually construct Cypher queries.
3 |
4 | Whether you're just starting with graph databases or looking for a faster way to build complex queries, this tool bridges the gap between abstract syntax and intuitive design.
5 |
6 | You can try the prototype in your browser:
7 | 👉 [Demo Environment](https://nielsdejong.nl/cypher-builder)
8 |
9 | ## Main Features
10 | #### Build Queries Visually
11 | - Drag-and-drop blocks to create query components such as nodes, relationships, and clauses.
12 | - Rearrange and edit blocks to customize your query.
13 |
14 | #### Smart Wizard Suggestions
15 | - Schema-aware guidance helps you select the next logical block.
16 | - Offers context-sensitive suggestions to streamline query construction.
17 |
18 | #### Templates for Learning
19 | - Explore pre-built queries to understand common Cypher patterns.
20 | - Generate examples dynamically based on your graph schema.
21 |
22 | #### Schema-Aware Design
23 | - Auto-generate nodes, relationships, and properties based on your database schema.
24 | - Real-time sampling to provide accurate suggestions.
25 |
26 |
27 | ## Getting Started
28 | Follow these steps to run the project locally:
29 |
30 | 1. Clone the repository and navigate to the project folder:
31 | ```bash
32 | git clone https://github.com/neo4j-labs/visual-cypher-builder
33 | cd visual-cypher-builder
34 | ```
35 |
36 | 2. Install dependencies:
37 | ```bash
38 | yarn install
39 | ```
40 |
41 | 3. Start the development server:
42 | ```bash
43 | yarn run dev
44 | ```
45 |
46 | 4. Open your browser and navigate to:
47 | [http://localhost:5173/](http://localhost:5173/)
48 |
49 |
50 |
51 | ## Documentation
52 | Check out the blog post:
53 | 👉 [Visual Cypher Builder - Querying Neo4j for Everyone](https://medium.com/p/85cdbcd6dbb1/)
54 |
55 |
56 | ## Feedback & Contributions
57 | We’re eager to hear from you:
58 |
59 | - Join the community forums: [Neo4j Community](https://community.neo4j.com)
60 | - Open an issue or submit a pull request on GitHub.
61 |
62 | **Note:** This project is part of Neo4j Labs, an incubator for experimental tools. While not officially supported, feedback and suggestions are welcome.
63 |
64 |
65 | ## Future Ideas
66 | Ideas for future versions include:
67 | - Advanced patterns with quantified path expressions.
68 | - Live validation and syntax correction.
69 | - Integrated query runner for visualizing results.
70 |
71 |
72 | ## License
73 | This project is licensed under the [Apache 2.0](LICENSE) License.
74 |
75 |
--------------------------------------------------------------------------------
/src/builder/container/TemplateContainer.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | rectSortingStrategy, // Use rectSortingStrategy for wrapping
3 | SortableContext,
4 | } from "@dnd-kit/sortable";
5 | import { BlockComponent } from "../block/Block";
6 |
7 |
8 | const containerStyle = {
9 | background: "#fcfcfc",
10 | padding: 0,
11 | margin: 2,
12 |
13 | width: "calc(100%+28px)", // Full width to allow wrapping
14 | height: "auto", // Dynamic height based on content
15 | flex: 1,
16 | // marginTop: 15,
17 | minHeight: 50, // Fixed height
18 | paddingTop: 5,
19 | paddingLeft: 5,
20 | paddingBottom: 5,
21 | paddingRight: 5,
22 | marginBottom: 0,
23 | marginLeft: '-12px',
24 | marginRight: '-12px',
25 | display: "flex", // Flexbox layout
26 | flexDirection: "row", // Horizontal layout
27 | flexWrap: "wrap", // Allow items to wrap to the next line
28 | rowGap: 5, // Space between items
29 | columnGap: 10, // Space between items
30 | userSelect: "none",
31 | alignItems: "flex-start", // Align items to the top
32 | justifyContent: "flex-start", // Align items to the start horizontally
33 | };
34 |
35 | /**
36 | * A container for rendering a row of items inside the template window.
37 | *
38 | * TemplateContainer is a SortableContext which allows the user to reorder the items in the query block.
39 | * It renders a row of SortableBlock components, representing the query elements.
40 | * It is logically minimal, as blocks in the template window are neither resortable nor interactive.
41 | *
42 | * @param {Object} props
43 | * @param {string | number} [props.id] The id of the container
44 | * @param {Array} [props.containerItems] The items in the container
45 | * @param {Object} [props.elements] The elements in the container
46 | * @param {function} [props.setElement] A function to update the elements in the container
47 | * @param {boolean} [props.dragging] Whether the component is currently being dragged
48 | * @returns {ReactElement}
49 | */
50 | export default function TemplateContainer(props: { onClick?: any; id?: any; containerItems?: any; elements?: any; setElement: any; dragging: boolean }) {
51 | const { id, containerItems, elements, setElement } = props;
52 | return (
53 |
59 | {/* @ts-ignore */}
60 |
71 |
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/src/builder/sortable/SortableBlock.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { useSortable } from "@dnd-kit/sortable";
3 | import { CSS } from "@dnd-kit/utilities";
4 | import { BlockComponent } from "../block/Block";
5 |
6 |
7 | /**
8 | * A SortableBlock is a block that can be rearranged in a list by dragging it.
9 | * It takes the following props:
10 | * - onClick: a function that is called when the block is clicked.
11 | * - onShiftClick: a function that is called when the block is clicked with the shift key.
12 | * - id: an identifier for the block.
13 | * - element: the block element.
14 | * - schema: the schema of the block.
15 | * - variables: the variables of the block.
16 | * - hasTooltip: whether the block should render a tooltip.
17 | * - setElement: a function that is called when the element of the block changes.
18 | * - interactive: whether the block is interactive.
19 | * The block will trigger an animation when clicked.
20 | * The position of the animation is handled by the root level component.
21 | * The block will also change its style when it is being dragged (opacity, margin left).
22 | * The block will also change its z-index when it is being dragged to be on top of other blocks.
23 | */
24 | export default function SortableBlock(props: { onClick: any; onShiftClick: any; id?: any; element?: any; schema: any, variables: any; hasTooltip: boolean; setElement: any; interactive: boolean }) {
25 | const { id, element, hasTooltip, onClick, onShiftClick, schema, variables, interactive, setElement } = props;
26 | const [isMoving, setIsMoving] = useState(false);
27 | const [smoothing, setSmoothing] = useState(false);
28 | const [inFocus, setInFocus] = useState(false);
29 |
30 | //
31 | if (element?.animated && !isMoving) {
32 | setIsMoving(true);
33 | // This is a workaround to prevent the animation from being triggered again
34 | setTimeout(() => {
35 | setIsMoving(false);
36 | setSmoothing(false);
37 | }, 0.1);
38 | // After 250 allow for regular smooth rearrangement of the tile again
39 | setTimeout(() => {
40 | setSmoothing(true);
41 | }, 275);
42 | }
43 | const transformStyle = {
44 | transform: `translate(
45 | ${element?.animated ? element?.animationDeltaX : 0}px,
46 | ${element?.animated ? element?.animationDeltaY : 0}px)`,
47 | transition: "transform 0.275s ease",
48 | };
49 |
50 | const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
51 | useSortable({
52 | id
53 | });
54 |
55 |
56 | const style = {
57 | ...transformStyle,
58 | opacity: isDragging ? 0.5 : 1,
59 | // marginLeft: isDragging ? "2px" : "0px",
60 | transform: !smoothing ? transformStyle.transform : CSS.Translate.toString(transform),
61 | transition: !smoothing ? transformStyle.transition : transition,
62 | zIndex: inFocus ? 99 : 0 // Workaround to always put focused block on top.
63 | };
64 |
65 | return (
66 |
{
72 | // If an element is clicked, we trigger an animation.
73 | // The position of the animation is handled by the root level component.
74 | // The transformStyle represents the temporary style for the transformation animation.
75 | if (onShiftClick && e.shiftKey) {
76 | onShiftClick(id, e.currentTarget.getBoundingClientRect(), () => { })
77 | } else {
78 | onClick(id, e.currentTarget.getBoundingClientRect(), () => { })
79 | }
80 | }}
81 |
82 | >
83 | {/* /TODO can we remove the placeholder item from each row now? */}
84 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/src/builder/container/SideContainer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useDroppable } from "@dnd-kit/core";
3 | import {
4 | rectSortingStrategy, // Use rectSortingStrategy for wrapping
5 | SortableContext,
6 | } from "@dnd-kit/sortable";
7 | import SortableBlock from "../sortable/SortableBlock";
8 | import { BlockComponent } from "../block/Block";
9 |
10 |
11 | const containerStyle = {
12 | background: "#fcfcfc",
13 | padding: 0,
14 | margin: 2,
15 | width: "calc(100%+28px)", // Full width to allow wrapping
16 | height: "auto", // Dynamic height based on content
17 | flex: 1,
18 | // marginTop: 15,
19 | minHeight: 50, // Fixed height
20 | paddingTop: 5,
21 | paddingLeft: 5,
22 | paddingBottom: 5,
23 | paddingRight: 5,
24 | marginBottom: 0,
25 | marginLeft: '-12px',
26 | marginRight: '-12px',
27 | display: "flex", // Flexbox layout
28 | flexDirection: "row", // Horizontal layout
29 | flexWrap: "wrap", // Allow items to wrap to the next line
30 | rowGap: 5, // Space between items
31 | columnGap: 10, // Space between items
32 | userSelect: "none",
33 | alignItems: "flex-start", // Align items to the top
34 | justifyContent: "flex-start", // Align items to the start horizontally
35 | };
36 |
37 | /**
38 | * A container for rendering a row of items inside the sidebar of blocks.
39 | *
40 | * SideContainer is a SortableContext which allows the user to reorder the items in the sidebar.
41 | * It renders a row of SortableBlock components, representing the query elements.
42 | *
43 | * @param {Object} props
44 | * @param {string | number} [props.id] The id of the container
45 | * @param {Array} [props.containerItems] The items in the container
46 | * @param {Object} [props.elements] The elements in the container
47 | * @param {function} [props.setElement] A function to update the elements in the container
48 | * @param {function} [props.onClick] A function to call when an item in the container is clicked
49 | * @param {boolean} [props.dragging] Whether the component is currently being dragged
50 | */
51 | export default function SideContainer(props: { onClick?: any; id?: any; containerItems?: any; elements?: any; setElement: any; dragging: boolean }) {
52 | const { id, containerItems, elements, setElement } = props;
53 |
54 | const [hovering, setHovering] = React.useState(false);
55 | const { setNodeRef } = useDroppable({
56 | id,
57 | });
58 |
59 | return (
60 |
66 | {/* @ts-ignore */}
67 |
setHovering(true)} onMouseOut={() => setHovering(false)}>
69 | {containerItems.length == 0 ? 'Add patterns to show suggestions here...' : ''}
70 | {containerItems?.map((itemId: string | number) => {
71 | // This is an optimization trick. We only render the 'grabbable' block if the user is hovering over the container.
72 | if (hovering) {
73 | return setElement(itemId, element)}
79 | interactive={false}
80 | onClick={props.onClick}
81 | onShiftClick={undefined}
82 | schema={undefined}
83 | variables={undefined}
84 | />
85 | } else {
86 | return { }}
94 | interactive={false}
95 | />
96 | }
97 | }
98 |
99 |
100 | )}
101 |
102 |
103 |
104 | );
105 | }
106 |
--------------------------------------------------------------------------------
/src/builder/editor/CodeEditor.tsx:
--------------------------------------------------------------------------------
1 | import "@neo4j-cypher/codemirror/css/cypher-codemirror.css";
2 | import { CypherEditor, CypherEditorProps } from '@neo4j-cypher/react-codemirror';
3 | import { FOOTER_CONTAINER_COUNT, SIDEBAR_CONTAINER_COUNT } from "../logic/BuilderLogic";
4 | import { BlockType } from "../block/BlockType";
5 |
6 | /**
7 | * A CodeMirror component that renders a read-only cypher query in a Monaco-like interface.
8 | *
9 | * This component is used to display the final rendered query in the main query builder interface.
10 | *
11 | * @param {Object} props The component props.
12 | * @param {string} props.cypher The Cypher query to render.
13 | */
14 | export default function CodeEditor(props: { cypher: string }) {
15 | const editorProps: CypherEditorProps = { autocomplete: false, lineWrapping: true, value: props.cypher, readOnly: true, style: { fontSize: 18, lineHeight: 40, verticalAlign: 'center' } };
16 | return (
17 |
18 | );
19 | }
20 |
21 |
22 | /**
23 | * Generate a Cypher query from a list of containers and elements.
24 | *
25 | * The containers contain the blocks that the user has dragged and dropped into the query builder.
26 | * The elements are the properties of the blocks.
27 | *
28 | * The function will iterate over the containers and elements, and generate a Cypher query based on the content.
29 | *
30 | * @param {any[]} items The containers.
31 | * @param {any} elements The properties of the blocks.
32 | * @param {number} skip The number of containers to skip. Defaults to the number of containers in the sidebar and footer.
33 | * @returns {string} The generated Cypher query.
34 | */
35 | export function generateCypher(items: any, elements: any, skip = SIDEBAR_CONTAINER_COUNT + FOOTER_CONTAINER_COUNT) {
36 | let displayText = '';
37 | let lastClause = undefined;
38 |
39 | items.slice(skip).forEach((container: any, index: any) => {
40 | let line = '';
41 | container.forEach((item: any, itemIndex: number) => {
42 | const type = elements[item]?.type;
43 | const components = BlockType[type]?.components || [];
44 | const textArray = elements[item]?.text || [];
45 |
46 | if (type == 'CLAUSE') {
47 | // Clause is always a single text element.
48 | // We remember the last clause so we can do some conditional rendering.
49 | lastClause = textArray[0];
50 | }
51 |
52 | textArray.forEach((text: any, index: number) => {
53 | // No dependencies, always render
54 | if (!components[index]?.dependson) {
55 | line += text;
56 | }
57 | // Has a dependency on an index, only render if that index is not empty. i.e. the ':' in (n:Node).
58 | if (components[index]?.dependson && textArray[components[index]?.dependson] !== '') {
59 | line += text;
60 | }
61 | });
62 |
63 | // Add comma between elements in the return and with clauses, but not between elements in other clauses.
64 | const nextItem = container[itemIndex + 1];
65 | const nextType = elements[nextItem]?.type;
66 | if (
67 | (lastClause == 'RETURN' || lastClause == 'WITH' || lastClause == 'ORDER BY') &&
68 | (nextType == 'VARIABLE' || nextType == 'COMPARISON' || nextType == 'STRING_COMPARISON' || nextType == 'NULL_COMPARISON' || nextType == 'FUNCTION') &&
69 | (type !== 'CLAUSE' && type !== 'OPERATOR' && type !== 'BRACKET')
70 | ) {
71 | line += ',';
72 | }
73 |
74 | // Always add a space after each block.
75 | if (type !== 'OPERATOR' && nextType !== 'OPERATOR') {
76 | line += ' ';
77 | }
78 |
79 |
80 | });
81 | displayText += line;
82 |
83 | // Add a newline to all but the last container.
84 | if (index < items.slice(skip).length - 1) {
85 | displayText += '\n';
86 | }
87 | });
88 |
89 | // NIcely format nodes connected to rels
90 | // @ts-ignore
91 | displayText = displayText.replaceAll(') -[', ')-[');
92 | // @ts-ignore
93 | displayText = displayText.replaceAll(') <-[', ')<-[');
94 | // @ts-ignore
95 | displayText = displayText.replaceAll(']-> (', ']->(');
96 | // @ts-ignore
97 | displayText = displayText.replaceAll(']- (', ']-(');
98 |
99 | // Nicely format nodes and nodes
100 | // @ts-ignore
101 | displayText = displayText.replaceAll(') (', '), (');
102 | return displayText;
103 | }
104 |
105 |
--------------------------------------------------------------------------------
/src/builder/logic/DefinitionsLogic.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { BlockType } from "../block/BlockType";
3 |
4 | /**
5 | * Sanitizes a value so that it can be safely inserted into a Cypher string.
6 | * If the value is an object, it will be converted to a string and wrapped in
7 | * single quotes. Otherwise, the value is returned as is.
8 | * @param {any} value The value to sanitize
9 | * @returns {any} The sanitized value
10 | */
11 | function sanitize(value: any) {
12 | if (typeof value === 'object') {
13 | return "'" + value.toString() + "'";
14 | }
15 | return value;
16 | }
17 |
18 | export function insertNodeDefinition(elements: any, alias: string, label: string) {
19 | const id = crypto.randomUUID();
20 | const text = ['(', alias, ':', label, ')'];
21 | elements[id] = {
22 | type: 'NODE',
23 | text: text
24 | };
25 | return id;
26 | }
27 |
28 | export function insertRelationshipDefinition(elements: any, alias: string, type: string, direction: string = '') {
29 |
30 | const id = crypto.randomUUID();
31 | const text = ['-', '[', alias, ':', type, ']', '-'];
32 | if (direction == 'INCOMING') {
33 | text[0] = '<-';
34 | }
35 | if (direction == 'OUTGOING') {
36 | text[6] = '->';
37 | }
38 | elements[id] = {
39 | type: 'RELATIONSHIP',
40 | text: text
41 | };
42 | return id;
43 | }
44 |
45 | export function insertComparisonDefinition(elements: any, var1: string, var2: string, comparison: string = '=') {
46 | const id = crypto.randomUUID();
47 | const text = [sanitize(var1), ' ' + comparison + ' ', sanitize(var2)];
48 | elements[id] = {
49 | type: 'COMPARISON',
50 | text: text
51 | };
52 | return id;
53 | }
54 |
55 | export function insertStringComparisonDefinition(elements: any, var1: string, var2: string, comparison = ' CONTAINS ') {
56 | const id = crypto.randomUUID();
57 | const text = [sanitize(var1), comparison, sanitize(var2)];
58 | elements[id] = {
59 | type: 'STRING_COMPARISON',
60 | text: text
61 | };
62 | return id;
63 | }
64 |
65 | export function insertNullComparisonDefinition(elements: any, var1: string) {
66 | const id = crypto.randomUUID();
67 | const text = [sanitize(var1), ' IS NULL '];
68 | elements[id] = {
69 | type: 'NULL_COMPARISON',
70 | text: text
71 | };
72 | return id;
73 | }
74 |
75 | export function insertVariableDefinition(elements: any, variable: string) {
76 | const id = crypto.randomUUID();
77 | const text = [sanitize(variable)];
78 | elements[id] = {
79 | type: 'VARIABLE',
80 | text: text
81 | };
82 | return id;
83 | }
84 |
85 | export function insertTransformationDefinition(elements: any, variable: string, value = '') {
86 | const id = crypto.randomUUID();
87 | const text = [sanitize(variable), value];
88 | elements[id] = {
89 | type: 'TRANSFORMER',
90 | text: text
91 | };
92 | return id;
93 | }
94 |
95 |
96 | export function insertClauseDefinition(elements: any, clause: string) {
97 | const id = crypto.randomUUID();
98 | const text = [clause];
99 | elements[id] = {
100 | type: 'CLAUSE',
101 | text: text
102 | };
103 | return id;
104 | }
105 |
106 | export function insertOperatorDefinition(elements: any, clause: string) {
107 | const id = crypto.randomUUID();
108 | const text = [clause];
109 | elements[id] = {
110 | type: 'OPERATOR',
111 | text: text
112 | };
113 | return id;
114 | }
115 |
116 | export function insertBracketDefinition(elements: any, clause: string) {
117 | const id = crypto.randomUUID();
118 | const text = [clause];
119 | elements[id] = {
120 | type: 'BRACKET',
121 | text: text
122 | };
123 | return id;
124 | }
125 |
126 | export function createElementsDefinition(words: any[], properties?: any) {
127 | const elements = {};
128 | words.map((word: any) => {
129 | const id = crypto.randomUUID();
130 | const components = BlockType[properties?.type]?.components ?? [];
131 |
132 | const text = components.map((component: any) => {
133 | if (component.type === 'fixed' || component.type === 'select') {
134 | return component.text;
135 | } else if (component.type === 'name') {
136 | return word;
137 | }
138 | })
139 | elements[id] = {
140 | type: properties?.type,
141 | text: text
142 | };
143 | });
144 | return elements;
145 | }
146 |
147 | export function insertFunctionDefinition(elements: any, name: string, alias: string = '') {
148 | const id = crypto.randomUUID();
149 | const text = [name, '(', alias, ')'];
150 | elements[id] = {
151 | type: 'FUNCTION',
152 | text: text
153 | };
154 | return id;
155 | }
--------------------------------------------------------------------------------
/src/application/Tutorial.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { Dialog, Button } from "@neo4j-ndl/react";
3 | import { CursorArrowRaysIconOutline, CursorArrowRaysIconSolid, CursorArrowRippleIconSolid, LightBulbIconOutline, WrenchScrewdriverIconSolid } from "@neo4j-ndl/react/icons";
4 |
5 | /**
6 | * A modal that appears when the user opens the application for the first time,
7 | * explaining the main features of the application.
8 | * It can also be opened inside the header.
9 | *
10 | * @param {Object} props - The props for this component.
11 | * @prop {boolean} isOpen - Whether the tutorial is open.
12 | * @prop {boolean} connected - Whether the user is currently connected to a database.
13 | * @prop {function} setIsOpen - A function to close the tutorial.
14 | * @prop {function} setConnectionOpen - A function to open the connection modal.
15 | * @prop {function} setConnected - A function to set the connected state.
16 | * @prop {function} setConnection - A function to set the connection state.
17 | */
18 | export default function Tutorial(props: { isOpen: boolean, connected: boolean, setIsOpen: any, setConnectionOpen: any, setConnected: any, setConnection: any }) {
19 | const { isOpen, connected, setIsOpen, setConnectionOpen, setConnected, setConnection } = props;
20 | const handleClose = () => setIsOpen(false);
21 |
22 | return (
23 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/application/Application.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import Builder from "../builder/Builder";
3 | import Header from "./Header";
4 | import Tutorial from "./Tutorial";
5 | import ConnectionModal from "../connection/ConnectionModal";
6 | import { setDriver } from "../connection/Driver";
7 | import SamplingModal from "../builder/sampling/SamplingModal";
8 |
9 | /**
10 | * This component renders the main application, consisting of a header, a query
11 | * builder, and a footer. It also handles the state of the connection to the Neo4j
12 | * instance and the sampling modal.
13 | *
14 | * @returns The JSX element representing the application.
15 | */
16 | export default function Application() {
17 |
18 | const [tutorialIsOpen, setTutorialIsOpen] = useState(() => {
19 | // Initialize state from localStorage if available
20 | const savedTutorialIsOpen = localStorage.getItem("tutorial");
21 | return savedTutorialIsOpen ? false : true;
22 | });
23 | const [connected, setConnected] = useState(false);
24 | const [connection, setConnection] = useState(() => {
25 | // Initialize state from localStorage if available
26 | const savedConnection = localStorage.getItem("connection");
27 | return savedConnection ? JSON.parse(savedConnection) : {};
28 | });
29 | const [connectionModalIsOpen, setConnectionModalIsOpen] = useState(false);
30 | const [samplingModalIsOpen, setSamplingModalIsOpen] = useState(false);
31 |
32 | const [schema, setSchema] = useState({});
33 | const [queryTemplates, setQueryTemplates] = useState([]);
34 |
35 | const styles = {
36 | container: {
37 | display: "flex",
38 | flexDirection: "column",
39 | height: "100vh", // Full height of the viewport
40 | margin: 0,
41 | },
42 | header: {
43 | // height: "100px", // Fixed height for the header
44 | backgroundColor: "#f4f4f4",
45 | },
46 | main: {
47 | flex: 1, // Makes this element fill the remaining space
48 | backgroundColor: "#ddd",
49 | // overflow: "hidden", // Adds scrollbars if content is too tall
50 | },
51 | };
52 |
53 |
54 | // Store the active connecting in localstorage if it changes.
55 | useEffect(() => {
56 | localStorage.setItem("connection", JSON.stringify(connection));
57 | }, [connection]);
58 |
59 | // If a new Neo4j connection is made, refresh the sample schema.
60 | useEffect(() => {
61 | if (connected) {
62 | setSamplingModalIsOpen(true);
63 | }
64 | }, [connected]);
65 |
66 | // Save tutorial state to localStorage.
67 | useEffect(() => {
68 | localStorage.setItem("tutorial", JSON.stringify(tutorialIsOpen));
69 | }, [tutorialIsOpen]);
70 |
71 | // Attempt to establish a connection when the component mounts
72 | useEffect(() => {
73 | const initializeConnection = async () => {
74 | if (connection.uri && connection.user && connection.password) {
75 | const connectionURI = `${connection.protocol}://${connection.uri}:${connection.port}`;
76 | const isConnected = await setDriver(connectionURI, connection.user, connection.password);
77 | setConnected(isConnected);
78 | if (!isConnected) {
79 | setConnectionModalIsOpen(true);
80 | }
81 | } else {
82 |
83 | }
84 | };
85 | initializeConnection();
86 | }, []);
87 |
88 | return (
89 |
136 | );
137 | }
138 |
--------------------------------------------------------------------------------
/src/builder/block/components/BlockOption.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { Select } from "@neo4j-ndl/react";
3 |
4 | /**
5 | * A component that renders a dropdown select, or a non-interactive text label, depending on the value of `interactive`.
6 | * The component is used to render a part of a query block.
7 | * The component is supposed to be used in a `BlockComponent`.
8 | * @param {object} props - The component props.
9 | * @param {any[]} props.options - The options of the select.
10 | * @param {any} props.value - The value of the select.
11 | * @param {(newValue: string) => void} props.setValue - The function to call when the value of the select changes.
12 | * @param {(focus: boolean) => void} props.setInFocus - The function to call when the component is focused.
13 | * @param {boolean} props.interactive - Whether the component is interactive.
14 | * @param {object} [props.style] - The style of the component.
15 | */
16 | export function BlockOption(props: { options: any[], value: any, setValue: (newValue: string) => void, setInFocus: (focus: boolean) => void, interactive: boolean, style?: any }) {
17 | const { options, value, setValue, interactive, style } = props;
18 | const baseOptions = options.map(option => ({ label: option, value: option }));
19 |
20 | // If the element is not rendered interactively, it's a 'fake' selector. This is for optimization reasons.
21 | if (!interactive) {
22 | return
40 | {value ? value : '...'}
41 |
42 | } else {
43 |
44 | // If it is interactive, render the normal selector.
45 | return