Added comments

6 files changed, 138 insertions, 110 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
index fd7c9cf418b..754fd29ff5e 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
@@ -6,6 +6,9 @@ export default function AddPropertyButton({ id }) {
   const { inputs, setInputs, childMap } = useContext(QueryInputContext);
   const [childId, setChildId] = useState(1);
 
+  /**
+   * Add a child to the input that has the provided id
+   */
   const addChildProperty = () => {
     const newInputs = inputs.slice();
     let currentId = id.substring(0, 1);
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
index feb0be7cd57..5bf3cd61807 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
@@ -5,6 +5,10 @@ import OverlayImageButton from '../Buttons/OverlayImageButton';
 export default function AddQueryInput() {
   const { inputs, setInputs, id, setId } = useContext(QueryInputContext);
 
+  /**
+   * Adds a new element to inputs.
+   * @param {Event} e Event that happened.
+   */
   const updateInputs = (e) => {
     e.preventDefault();
     setId((id) => id + 1);
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
index 9aea9f7a89c..483751492ce 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
@@ -42,7 +42,7 @@ export const QueryInputProvider = (prop) => {
     metrics: { name: 'metrics', type: 'Parent', hasChildren: true },
   };
 
-  // Children of the levelZeroParameters that has attributes
+  // Children of the levelZeroParameters that have child attributes
   const childMap = {
     collapse: {
       summary: { name: 'summary', type: 'String', hasChildren: false },
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
index cdcfe1d0408..2f79ddd6073 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -6,16 +6,20 @@ export default function QueryDropdownForm({ choices, id, child = false }) {
   const { inputs, setInputs, levelZeroParameters, childMap } =
     useContext(QueryInputContext);
 
-  // Update the state of the QueryInput to reflect the chosen method
+  /**
+   * Update the state of inputs to reflect the method chosen from the dropdown.
+   * If the prevoiusly chosen method had children they are removed.
+   * @param {Event} e Event containing the new type.
+   */
   const updateType = (e) => {
     e.preventDefault();
     const newType = e.target.value;
     const newInputs = inputs.slice();
+    let currentId = id.substring(0, 1);
+    let index = newInputs.findIndex((element) => element.id === currentId);
     if (child) {
-      let currentId = id.substring(0, 1);
-      let index = newInputs.findIndex((element) => element.id === currentId); // get the index of the root parent
-      let children = newInputs[index].children;
       let parentTypes = newInputs[index].type;
+      let children = newInputs[index].children;
       let childChoices = childMap[parentTypes];
       for (let i = 3; i < id.length; i += 2) {
         currentId = id.substring(0, i);
@@ -30,7 +34,6 @@ export default function QueryDropdownForm({ choices, id, child = false }) {
       children[index].hasChildren = childChoices[newType].hasChildren;
       children[index].children = [];
     } else {
-      const index = newInputs.findIndex((element) => element.id === id);
       newInputs[index].type = newType;
       let hasChildren = levelZeroParameters[newType].hasChildren;
       newInputs[index].hasChildren = hasChildren;
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
index bd5044d1f68..37fb020dc45 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
@@ -11,8 +11,12 @@ export default function QueryInputChild({ id }) {
 
   let index = inputs.findIndex((element) => element.id === id);
   let childArray = inputs[index].children;
-  let currentType = inputs[index].type;
+  let currentTypes = inputs[index].type;
 
+  /**
+   * Update the state of inputs to reflect what is written into the form.
+   * @param {Event} e Event containing the new input.
+   */
   const updateInput = (e) => {
     e.preventDefault();
     let newInputs = inputs.slice();
@@ -20,65 +24,79 @@ export default function QueryInputChild({ id }) {
     let currentId = iterId.substring(0, 1);
     let index = newInputs.findIndex((element) => element.id === currentId);
     let children = newInputs[index].children;
-    for (let i = 3; i < iterId.length; i += 2) {
-      currentId = iterId.substring(0, i);
-      index = children.findIndex((element) => element.id === currentId);
-      children = children[index].children;
-    }
+    const traversedChildren = traverseChildren(iterId, children, '');
+    children = traversedChildren.children;
     index = children.findIndex((element) => element.id === iterId);
     children[index].input = e.target.value;
+    console.log(children[index]);
     setInputs(newInputs);
   };
 
   /**
-   * Returns a placeholder text for a SimpleForm component
-   * @param {the id of the SimpleForm component} id
-   * @returns Placeholder text
+   * Returns a placeholder text for a SimpleForm component.
+   * @param {String} id The id of the SimpleForm component.
+   * @returns {String} The placeholder text
    */
   const setPlaceHolder = (id) => {
     let currentId = id.substring(0, 1);
     let index = inputs.findIndex((element) => element.id === currentId);
-    let currentType = inputs[index].type;
+    let combinedType = inputs[index].type;
     let children = inputs[index].children;
     if (id.length > 3) {
-      for (let i = 3; i < id.length; i += 2) {
-        currentId = id.substring(0, i);
-        index = children.findIndex((element) => element.id === currentId);
-        currentType = currentType + '_' + children[index].type;
-        children = children[index].children;
-      }
-      const currentChoice = childMap[currentType];
+      const traversedChildren = traverseChildren(id, children, combinedType);
+      combinedType = traversedChildren.combinedType;
+      children = traversedChildren.children;
+      const currentChoice = childMap[combinedType];
       index = children.findIndex((element) => element.id === id);
-      currentType = children[index].type;
-      return currentChoice[currentType].type;
+      combinedType = children[index].type;
+      return currentChoice[combinedType].type;
     } else {
-      const currentChoice = childMap[currentType];
+      const currentChoice = childMap[combinedType];
       index = children.findIndex((element) => element.id === id);
-      currentType = children[index].type;
-      return currentChoice[currentType].type;
+      combinedType = children[index].type;
+      return currentChoice[combinedType].type;
     }
   };
 
+  /**
+   * Removes the row with the provided id.
+   * @param {String} id Id of row.
+   */
   const removeRow = (id) => {
     let newInputs = inputs.slice();
     let currentId = id.substring(0, 1);
     let index = newInputs.findIndex((element) => element.id === currentId);
     let children = newInputs[index].children;
+    const traversedChildren = traverseChildren(id, children, '');
+    index = traversedChildren.children.findIndex((element) => element === id);
+    traversedChildren.children.splice(index, 1);
+    setInputs(newInputs);
+  };
+
+  /**
+   * Traverses the children until a child with the provided id is reached.
+   * @param {String} id Id of the innermost child.
+   * @param {Array} children Array containing serveral child objects.
+   * @param {String} combinedType The combined type of all traversed children
+   * @returns {Object} An object containing the children of the child with the provided id and the combined type.
+   */
+  function traverseChildren(id, children, combinedType) {
+    let currentId;
+    let index;
     for (let i = 3; i < id.length; i += 2) {
       currentId = id.substring(0, i);
       index = children.findIndex((element) => element.id === currentId);
+      combinedType = combinedType + '_' + children[index].type;
       children = children[index].children;
     }
-    index = children.findIndex((element) => element === id);
-    children.splice(index, 1);
-    setInputs(newInputs);
-  };
+    return { children: children, combinedType: combinedType };
+  }
 
   const inputList = childArray.map((child) => {
     return (
       <div key={child.id} id={child.id}>
         <QueryDropdownForm
-          choices={childMap[currentType]}
+          choices={childMap[currentTypes]}
           id={child.id}
           child={true}
         />
@@ -110,7 +128,7 @@ export default function QueryInputChild({ id }) {
         </OverlayTrigger>
         <br />
         <Child
-          type={currentType + '_' + child.type}
+          type={currentTypes + '_' + child.type}
           child={child}
           onChange={updateInput}
           placeholder={setPlaceHolder}
diff --git a/client/js/app/src/app/pages/querybuilder/index.jsx b/client/js/app/src/app/pages/querybuilder/index.jsx
index 3feefce5da3..b8cb2ccbe7c 100644
--- a/client/js/app/src/app/pages/querybuilder/index.jsx
+++ b/client/js/app/src/app/pages/querybuilder/index.jsx
@@ -1,80 +1,80 @@
-import './css/agency.css';
-import './css/vespa.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './font-awesome/css/font-awesome.min.css';
+// import './css/agency.css';
+// import './css/vespa.css';
+// import 'bootstrap/dist/css/bootstrap.min.css';
+// import './font-awesome/css/font-awesome.min.css';
 
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import SimpleButton from 'Components/Buttons/SimpleButton';
-import QueryInput from 'Components/Text/QueryInput';
-import SimpleDropDownForm from 'Components/Text/SimpleDropDownForm';
-import SimpleForm from 'Components/Text/SimpleForm';
-import TextBox from 'Components/Text/TextBox';
-import ImageButton from 'Components/Buttons/ImageButton';
-import OverlayImageButton from 'Components/Buttons/OverlayImageButton';
-import AddQueryInput from 'Components/Buttons/AddQueryInputButton';
-import { QueryInputProvider } from 'Components/Contexts/QueryInputContext';
-import SendQuery from './Components/Text/SendQuery';
+// import React from 'react';
+// import ReactDOM from 'react-dom/client';
+// import SimpleButton from 'Components/Buttons/SimpleButton';
+// import QueryInput from 'Components/Text/QueryInput';
+// import SimpleDropDownForm from 'Components/Text/SimpleDropDownForm';
+// import SimpleForm from 'Components/Text/SimpleForm';
+// import TextBox from 'Components/Text/TextBox';
+// import ImageButton from 'Components/Buttons/ImageButton';
+// import OverlayImageButton from 'Components/Buttons/OverlayImageButton';
+// import AddQueryInput from 'Components/Buttons/AddQueryInputButton';
+// import { QueryInputProvider } from 'Components/Contexts/QueryInputContext';
+// import SendQuery from './Components/Text/SendQuery';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+// const root = ReactDOM.createRoot(document.getElementById('root'));
 
-const pasteImage = require('./assets/img/paste.svg').default;
-const copyImage = require('./assets/img/copy.svg').default;
-const refreshImage = require('./assets/img/reload.svg').default;
+// const pasteImage = require('./assets/img/paste.svg').default;
+// const copyImage = require('./assets/img/copy.svg').default;
+// const refreshImage = require('./assets/img/reload.svg').default;
 
-root.render(
-  <>
-    <React.StrictMode>
-      <header>
-        <div className="intro container">
-          <TextBox className={'intro-lead-in'}>Vespa Search Engine</TextBox>
-          <TextBox className={'intro-long'}>
-            Select the method for sending a request and construct a query.
-          </TextBox>
-          <SendQuery />
-          <br />
-          <QueryInputProvider>
-            <div id="request">
-              <QueryInput></QueryInput>
-            </div>
-            <br />
-            <AddQueryInput />
-          </QueryInputProvider>
-          <br />
-          <ImageButton
-            id="pasteJSON"
-            className="pasteJSON"
-            showImage={true}
-            image={pasteImage}
-            style={{ marginTop: '-2px', marginRight: '3px' }}
-          >
-            Paste JSON
-          </ImageButton>
-          <SimpleButton className="showJSON">Show query JSON</SimpleButton>
-          <TextBox className="response">Response</TextBox>
-          <textarea className="responsebox" readOnly cols="70" rows="25" />
-          <OverlayImageButton
-            className="intro-copy"
-            image={copyImage}
-            height="30"
-            width="30"
-            tooltip="Copy"
-          >
-            Copy
-          </OverlayImageButton>
-          <OverlayImageButton
-            className="intro-refresh"
-            image={refreshImage}
-            height="30"
-            width="30"
-            tooltip="Refresh"
-          >
-            Refresh
-          </OverlayImageButton>
-          <br />
-          <br />
-        </div>
-      </header>
-    </React.StrictMode>
-  </>
-);
+// root.render(
+//   <>
+//     <React.StrictMode>
+//       <header>
+//         <div className="intro container">
+//           <TextBox className={'intro-lead-in'}>Vespa Search Engine</TextBox>
+//           <TextBox className={'intro-long'}>
+//             Select the method for sending a request and construct a query.
+//           </TextBox>
+//           <SendQuery />
+//           <br />
+//           <QueryInputProvider>
+//             <div id="request">
+//               <QueryInput></QueryInput>
+//             </div>
+//             <br />
+//             <AddQueryInput />
+//           </QueryInputProvider>
+//           <br />
+//           <ImageButton
+//             id="pasteJSON"
+//             className="pasteJSON"
+//             showImage={true}
+//             image={pasteImage}
+//             style={{ marginTop: '-2px', marginRight: '3px' }}
+//           >
+//             Paste JSON
+//           </ImageButton>
+//           <SimpleButton className="showJSON">Show query JSON</SimpleButton>
+//           <TextBox className="response">Response</TextBox>
+//           <textarea className="responsebox" readOnly cols="70" rows="25" />
+//           <OverlayImageButton
+//             className="intro-copy"
+//             image={copyImage}
+//             height="30"
+//             width="30"
+//             tooltip="Copy"
+//           >
+//             Copy
+//           </OverlayImageButton>
+//           <OverlayImageButton
+//             className="intro-refresh"
+//             image={refreshImage}
+//             height="30"
+//             width="30"
+//             tooltip="Refresh"
+//           >
+//             Refresh
+//           </OverlayImageButton>
+//           <br />
+//           <br />
+//         </div>
+//       </header>
+//     </React.StrictMode>
+//   </>
+// );