Committing revisited version to main.

src/components/BindingsModal/bindingsModal.module.css

@@ -127,6 +127,7 @@
 }
 
 .addButton {
+    user-select: none;
     background-color: #c22535;
     color: #ffffff;
     border: none;
@@ -290,6 +291,7 @@
 }
 
 .toggleButton {
+    user-select: none;
     background-color: #f3f3f3;
     border: none;
     border-radius: 5px;
@@ -313,7 +315,6 @@
 }
 
 @media (max-width: 768px) {
-
     .bindingBuilder .labelVarname,
     .bindingBuilder .labelCheckbox {
         display: none;

src/components/DataModal/dataModal.js

@@ -273,8 +273,8 @@ function DataModal({ insideData, selectedNode, isDataOpen, setDataOpen, setNode,
                 <div className={DataModalStyles.titleWrapper}>
                     <h2
                         title={insideData[selectedNode.type] ?
-                            `Node '${selectedNode.label}' data properties` :
-                            `${selectedNode.label} has no data properties`}
+                            `Node '${selectedNode.label}' attributes` :
+                            `${selectedNode.label} has no attributes`}
                     >
                         {insideData[selectedNode.type] ? `Node '${selectedNode.label}' data properties` : `${selectedNode.label} has no data properties`}
                     </h2>

src/components/DataModal/dataModal.module.css

@@ -201,6 +201,7 @@
 }
 
 .operatorButton {
+    user-select: none;
     position: absolute;
     right: 0;
     top: 0;

src/components/Dropdown/createNodeItem.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { DropdownMenuItem } from "../Dropdown/dropdown";
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import styles from './createNodeItem.module.css';
+
+function CreateNodeItem({ varKey, graph, classURI, selectedNode, edgeLabel, property, isOptional, isFromInstance, addNode, addEdge }) {
+    // On click, add a node of the selected type with the selected edge targeting it.
+    const handleAddTargetedNode = (e) => {
+        e.stopPropagation();
+        const newNode = addNode(varKey.toUpperCase(), null, varKey, true, graph, classURI, false, false);
+        addEdge(selectedNode.id, newNode.id, edgeLabel, property, isOptional, isFromInstance);
+    }
+
+    return (
+        <DropdownMenuItem onClick={handleAddTargetedNode} disableRipple={true} style={{ padding: 0 }}>
+            <div className={styles.createNodeItem}>
+                <span className={styles.createNodeText}>New {varKey.toUpperCase()}</span>
+                <AddCircleOutlineIcon className={styles.createNodeIcon} />
+            </div>
+        </DropdownMenuItem>
+    )
+}
+
+export default CreateNodeItem;

src/components/Dropdown/createNodeItem.module.css

@@ -0,0 +1,34 @@
+.createNodeItem {
+    padding: 4px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    border: 1px solid #d0d0d0;
+    border-radius: 4px;
+    margin: 2px 10px;
+    box-sizing: border-box;
+    width: calc(100% - 20px);
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+
+.createNodeItem:hover {
+    background-color: #e6e6e6;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.createNodeText {
+    color: #555;
+    font-weight: 400;
+    margin-left: 8px;
+    text-align: left;
+    flex-grow: 1;
+}
+
+.createNodeIcon {
+    color: #555;
+    text-align: left;
+}

src/components/Dropdown/dropdown.js

@@ -58,8 +58,25 @@ export function Dropdown({ trigger, menu, keepopen: keepOpenGlobal, isOpen: cont
     return (
         <>
             {React.cloneElement(trigger, {
-                onClick: isOpen ? handleForceClose : handleOpen,
-                ref: anchorRef,
+                ref: (node) => {
+                    anchorRef.current = node;
+                    if (typeof trigger.ref === 'function')
+                        trigger.ref(node);
+                    else if (trigger.ref)
+                        trigger.ref.current = node;
+                },
+                onClick: (event) => {
+                    if (!isOpen) {
+                        if (typeof trigger.props.onClick === 'function')
+                            trigger.props.onClick(event);
+                        if (event.defaultPrevented)
+                            handleForceClose();
+                        else
+                            handleOpen(event);
+                    } else {
+                        handleForceClose();
+                    }
+                },
             })}
             <Menu PaperProps={{ sx: { minWidth: minWidth ?? 0 } }} anchorEl={isOpen} open={!!isOpen} onClose={handleClose}>
                 {React.Children.map(menu, renderMenu)}

src/components/ValuesItem/valuesItem.js → src/components/Dropdown/valuesItem.js

@@ -6,7 +6,6 @@ import AddIcon from '@mui/icons-material/Add';
 
 // Dropdown option that allows to build an URI values list for a property
 function ValuesItem({ inputRef, uriList, selectedNode, label, property, isOptional, isFromInstance, setUriList, addNode, addEdge, disabled }) {
-    //console.log(disabled)
     const handleKeyDown = (event) => {
         event.stopPropagation();
         if (event.key === 'Enter') {

src/components/ValuesItem/valuesItem.module.css → src/components/Dropdown/valuesItem.module.css

@@ -35,6 +35,7 @@
 }
 
 .uriButton {
+    user-select: none;
     background-color: #c22535;
     border: none;
     color: white;
@@ -55,6 +56,7 @@
 }
 
 .uriAddButton {
+    user-select: none;
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;

src/components/FiltersModal/filtersModal.js

@@ -78,7 +78,6 @@ function FiltersModal({ allNodes, allBindings, isFiltersOpen, setFiltersOpen, fi
         });
         allBindings.forEach(binding => {
             const category = getBindingCategory(binding);
-            // For bindings, you can adjust the label similarly if required
             filterableElements.push({
                 label: binding.label,
                 value: JSON.stringify({

src/components/FiltersModal/filtersModal.module.css

@@ -127,6 +127,7 @@
 }
 
 .addButton {
+    user-select: none;
     background-color: #c22535;
     color: #ffffff;
     border: none;
@@ -263,6 +264,7 @@
 }
 
 .operatorButton {
+    user-select: none;
     height: 100%;
     width: 40px;
     border: none;
@@ -303,6 +305,7 @@
 }
 
 .toggleButton {
+    user-select: none;
     background-color: #f3f3f3;
     border: none;
     border-radius: 5px;

src/components/LandingBackground/landingBackground.js

@@ -25,12 +25,12 @@ const LandingBackground = () => {
         const handleContextLost = (event) => {
             event.preventDefault();
             setContextLost(true);
-            console.log("WebGL context lost. Attempting to restore...");
+            console.log("WebGL context lost. Attempting to restore");
         };
 
         const handleContextRestored = () => {
             setContextLost(false);
-            console.log("WebGL context restored. Reinitializing renderer...");
+            console.log("WebGL context restored. Reinitializing renderer");
             // Reinitialize the renderer here
             if (canvasRef.current) {
                 const renderer = new WebGLRenderer({ canvas: canvasRef.current });

src/components/List/list.js

@@ -32,7 +32,7 @@ function List({ varData, filteredLists, colorList, addNode }) {
                 result.push(
                     elements.map((constraint, idx) => (
                         <ListElement
-                            key={`${getItemFromURI(constraint.uri)}_${idx}`}
+                            key={`${getItemFromURI(constraint.uri)}_${key}_${idx}`}
                             id={constraint.label}
                             data={constraint.uri}
                             type={key}
@@ -47,7 +47,11 @@ function List({ varData, filteredLists, colorList, addNode }) {
             }
         });
 
-        return result;
+        return result.flat().sort((a, b) => {
+            const labelA = a.props.id.toLowerCase();
+            const labelB = b.props.id.toLowerCase();
+            return labelA.localeCompare(labelB);
+        });
     }
 
     return (

src/components/ListElement/listElement.js

@@ -8,6 +8,7 @@ function darken(color, amount) {
     return `#${newRgb.map((c) => c.toString(16).padStart(2, "0")).join("")}`;
 }
 
+
 // Defines each element in both the var and node lists
 function ListElement({ id, data, type, color, isVar, graph, classURI, addNode }) {
     const [isHovered, setIsHovered] = useState(false);
@@ -29,6 +30,7 @@ function ListElement({ id, data, type, color, isVar, graph, classURI, addNode })
 
     const handleClick = (event) => {
         event.preventDefault();
+
         addNode(id, data, type, isVar, graph, classURI, false, false);
     };
 

src/components/ListElement/listElement.module.css

@@ -1,4 +1,5 @@
 .element {
+    user-select: none; 
     transition: background-color 0.2s ease, box-shadow 0.2s ease;
     margin: 1vh;
     padding: 1.2vh;

src/components/QueryButton/queryButton.js

@@ -1,18 +1,16 @@
-import React, { useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { handleQuery } from "../../utils/petitionHandler.js";
 import QueryButtonStyles from "./queryButton.module.css";
 import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
 
-const QueryButton = ({ graphs, activeGraphId, bindings, startingVar, isDistinct, isCount, setResultData }) => {
+const QueryButton = forwardRef(({ graphs, activeGraphId, bindings, startingVar, isDistinct, isCount, setResultData, onValidationError }, ref) => {
     const [isLoading, setIsLoading] = useState(false);
 
     function inputValidator(graphs, startingVar) {
         const somePropIsShown = graphs.find(graph => graph.id === activeGraphId).nodes.some(node => Object.values(node.properties).some(prop => prop.show));
         const startingVarIsEmpty = Object.keys(startingVar)?.length <= 0;
         const someBindingIsShown = bindings.some(binding => binding.showInResults);
-        if (!startingVarIsEmpty || somePropIsShown || someBindingIsShown)
-            return true;
-        return false;
+        return !startingVarIsEmpty || somePropIsShown || someBindingIsShown;
     }
 
     const sendQuery = () => {
@@ -25,20 +23,22 @@ const QueryButton = ({ graphs, activeGraphId, bindings, startingVar, isDistinct,
                     console.log(error);
                     setResultData(null);
                 });
-        }
+        } else
+            onValidationError("No output selected.");
     }
 
     return (
-        <button className={QueryButtonStyles.big_button} onClick={() => sendQuery()} disabled={isLoading}>
-            {isLoading ? (
-                <div className={QueryButtonStyles.loader}></div>) : (
+        <button ref={ref} className={QueryButtonStyles.big_button} onClick={() => {
+            sendQuery();
+        }} disabled={isLoading}>
+            {isLoading ? <div className={QueryButtonStyles.loader}></div> : (
                 <>
                     <span className={QueryButtonStyles.queryText}>Query</span>
                     <PlayCircleOutlineIcon className={QueryButtonStyles.queryIcon} />
                 </>
             )}
         </button>
     );
-};
+})
 
 export default QueryButton;

src/components/QueryButton/queryButton.module.css

@@ -15,6 +15,7 @@
 }
 
 .big_button {
+    user-select: none;
     display: inline-block;
     padding: 2px;
     font-size: 1vw;

src/components/QueryExporter/queryExporter.module.css

@@ -1,4 +1,5 @@
 .file_button {
+    user-select: none;
     padding: 2px;
     display: flex;
     justify-content: center;