From c2e7f79d217a4ea7febe64222f95c93394ed91ef Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <tommy.gatti@outlook.com>
Date: Wed, 5 May 2021 22:37:22 +1000
Subject: [PATCH 01/11] handling selected item change now modified each items
 isSelected state

---
 src/App.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index c473ca2..be0ceaf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,7 +22,6 @@ class App extends React.Component {
     };
   }
 
-
   /**
    *
    * @param {string} type - whether the object changed was a
@@ -32,6 +31,20 @@ class App extends React.Component {
    * @param {Object} meta - metadata of the selected item.
    */
   handleSelectedItemChange = (type, id, content, meta) => {
+    const { selected } = this.state;
+
+    // set our old selected item to unselected
+    if (selected.type.startsWith('node')) {
+      this.changeNodeState(selected.id, {isSelected: false});
+    } else {
+      this.changeEdgeState(selected.id, {isSelected: false});
+    }
+    // and set our new one to selected!
+    if (type.startsWith('node')) {
+      this.changeNodeState(id, {isSelected: true});
+    } else {
+      this.changeEdgeState(id, {isSelected: true});
+    }
     this.setState({selected: {type: type, id: id, content: content, meta: meta}});
   }
 
@@ -79,14 +92,14 @@ class App extends React.Component {
    * @param {string} [iri] - optional iri for nodes that have type 'nodeUri'
    * @returns {number} - id of node just created.
    */
-    //todo: add iri to created nodes so it's in the graph!! And edges too! so queryExecutor can do it's thing!
   createNode = (x, y, type, content, iri) => {
     const { nodeCounter } = this.state;
     const variant = Node.variants[type](false);
     const newNode = {
       x: x - variant.width / 2, y: y - variant.height / 2,
       midX: x, midY: y,
-      id: nodeCounter + 1, type: type, content: content, isOptional: false, amalgam: null
+      id: nodeCounter + 1, type: type, content: content, isOptional: false, amalgam: null,
+      isSelected: false
     };
 
     if (iri) newNode.iri = iri;
@@ -122,7 +135,8 @@ class App extends React.Component {
       type: content === '?' ? 'edgeUnknown' : 'edgeKnown', isOptional: false,
       subject: {id: subjectId, intersectX: subjectPos.midX, intersectY: subjectPos.midY},
       object: {},
-      complete: false
+      complete: false,
+      isSelected: false
     }
 
     if (iri) newEdge.iri = iri;

From 2c4ece1cd5c49b248d2cd86606d18b12b53730ce Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <tommy.gatti@outlook.com>
Date: Thu, 6 May 2021 10:53:06 +1000
Subject: [PATCH 02/11] Edge now has isSelected property

---
 src/canvas/Canvas.js | 2 ++
 src/canvas/Node.js   | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index e7ce082..eef89c8 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -184,6 +184,7 @@ export default class Canvas extends React.Component {
               {edges.map(edge =>
                 <Edge id={edge.id} key={edge.id} type={edge.type} isOptional={edge.isOptional} content={edge.content}
                       subject={edge.subject} object={edge.object} tempEdge={tempEdge} complete={edge.complete}
+                      isSelected={edge.isSelected}
                       onChangeEdgeState={this.props.changeEdgeState}
                       onSelectedItemChange={this.handleElementChange}/>)}
             </AnimatePresence>
@@ -193,6 +194,7 @@ export default class Canvas extends React.Component {
               {nodes.map(node =>
                 <Node id={node.id} key={node.id} x={node.x} y={node.y} midX={node.midX} midY={node.midY}
                       type={node.type} content={node.content} isOptional={node.isOptional} amalgam={node.amalgam}
+                      isSelected={node.isSelected}
                       onChangeNodeState={this.props.changeNodeState}
                       onSelectedItemChange={this.handleElementChange} />)}
             </AnimatePresence>
diff --git a/src/canvas/Node.js b/src/canvas/Node.js
index d6525b5..061bb0c 100644
--- a/src/canvas/Node.js
+++ b/src/canvas/Node.js
@@ -105,9 +105,8 @@ export default class Node extends React.Component {
     this.props.onChangeNodeState(id, {content: changedText, type: changedType});
   }
 
-  //todo: selectedItemViewer checkbox for selected?
   render(){
-    const { type, isOptional, content, x, y, amalgam } = this.props;
+    const { type, isOptional, content, x, y, amalgam, isSelected } = this.props;
 
     const variant = Node.variants[type](isOptional);
     const currentNodeWidth = variant.width;

From 1279e8cb6a3587d92f046a85b3cffb3af5630e01 Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Sun, 23 May 2021 21:31:36 +1000
Subject: [PATCH 03/11] Added isSelected to Edge and Node

---
 src/canvas/Edge.js | 17 +++++++++++++----
 src/canvas/Node.js | 43 ++++++++++++++++++++++---------------------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/canvas/Edge.js b/src/canvas/Edge.js
index 9147f82..0f9fba1 100644
--- a/src/canvas/Edge.js
+++ b/src/canvas/Edge.js
@@ -4,7 +4,7 @@ import "./Canvas.css";
 import "./Edge.css";
 
 export default class Edge extends React.Component {
-  static variants = {
+  static pathVariants = {
     edgeUnknown: isOpt => ({
       stroke: '#8e9094',
       strokeWidth: 3,
@@ -18,6 +18,14 @@ export default class Edge extends React.Component {
       opacity: 1
     })
   };
+  static inputVariants = {
+    selected: {
+      border: 'solid 2px black'
+    },
+    unselected: {
+      border: 'solid 0 black'
+    }
+  };
   static labelHeight = 30;
   static labelWidth = 175;
 
@@ -46,7 +54,7 @@ export default class Edge extends React.Component {
   }
 
   render() {
-    const { subject, object, type, isOptional, content, tempEdge, complete } = this.props;
+    const { subject, object, type, isOptional, content, tempEdge, complete, isSelected } = this.props;
     const objectIntersectX = complete ? object.intersectX : tempEdge.x; 
     const objectIntersectY = complete ? object.intersectY : tempEdge.y;
     
@@ -63,12 +71,13 @@ export default class Edge extends React.Component {
     return (
       <g>
         <motion.path d={pathDef} markerEnd={"url(#arrow)"}
-                     variants={Edge.variants}
+                     variants={Edge.pathVariants}
                      initial={'edgeUnknown'}
                      animate={type} custom={isOptional}
                      exit={{opacity: 0}} />
         <foreignObject x={labelX} y={labelY} width={Edge.labelWidth} height={Edge.labelHeight}>
-          <input className={"edgeLabel"} value={content}
+          <motion.input className={"edgeLabel"} value={content}
+                        initial={false} variants={Edge.inputVariants} animate={isSelected ? 'selected' : 'unselected'}
                         onChange={this.handleChangedText}
                         onBlur={this.handleEntryExit}
                         onClick={(e) => {
diff --git a/src/canvas/Node.js b/src/canvas/Node.js
index 4beac12..d8ddfb8 100644
--- a/src/canvas/Node.js
+++ b/src/canvas/Node.js
@@ -5,60 +5,60 @@ import "./Canvas.css";
 
 export default class Node extends React.Component {
   static variants = {
-    nodeUnknown: isOpt => ({
+    nodeUnknown: ({isOpt, isSelected}) => ({
       fill: '#0000fe',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt ? 5 :  0,
-      strokeDasharray: 3,
+      strokeWidth: isOpt || isSelected ? 5 :  0,
+      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#1e90ff'
     }),
-    nodeSelectedUnknown: isOpt => ({
+    nodeSelectedUnknown: ({isOpt, isSelected}) => ({
       fill: '#1e90ff',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt ? 5 :  0,
-      strokeDasharray: 3,
-      stroke: '#59adff'//'#0000fe'
+      strokeWidth: isOpt || isSelected ? 5 :  0,
+      strokeDasharray: isSelected ? 0 : 3,
+      stroke: '#59adff'
     }),
-    nodeUri: isOpt => ({
+    nodeUri: ({isOpt, isSelected}) => ({
       fill: '#bebebe',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt ? 5 :  0,
-      strokeDasharray: 3,
+      strokeWidth: isOpt || isSelected ? 5 :  0,
+      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#4e4e4e'
     }),
-    nodeLiteral: isOpt => ({
+    nodeLiteral: ({isOpt, isSelected}) => ({
       fill: '#4e4e4e',
       rx: 0,
       ry: 0,
       height: 100,
       width: 200,
-      strokeWidth: isOpt ? 5 : 0,
-      strokeDasharray: 3,
+      strokeWidth: isOpt || isSelected ? 5 : 0,
+      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#bebebe'
     }),
-    nodeAmalgam: isOpt => ({
+    nodeAmalgam: ({isOpt, isSelected}) => ({
       fill: '#444444',
       height: 100,
       width: 100,
       rx: 10,
       ry: 10,
-      strokeWidth: isOpt ? 5 : 0,
-      strokeDasharray: 3,
+      strokeWidth: isOpt || isSelected ? 5 : 0,
+      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#bebebe'
     }),
-    nodeUnf: isOpt => ({
+    nodeUnf: ({isOpt, isSelected}) => ({
       fill: '#0000fe',
-      strokeWidth: isOpt ? 3: 0,
-      strokeDasharray: 3,
+      strokeWidth: isOpt || isSelected ? 3: 0,
+      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#1e90ff',
       width: 40,
       height: 40,
@@ -118,8 +118,9 @@ export default class Node extends React.Component {
     return (
       <motion.g whileHover={{scale: 1.2}} initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}}>
         <motion.rect x={x} y={y} onClickCapture={this.handleEntryExit}
-                     variants={Node.variants} initial={false} animate={type} custom={isOptional}
-                     transition={{duration: 0.5}} transformTemplate={() => "translateX(0) translateY(0)"}/>
+                     variants={Node.variants} initial={false} animate={type}
+                     custom={{isOpt: isOptional, isSelected: isSelected}}
+                     transition={{duration: 0.2}} transformTemplate={() => "translateX(0) translateY(0)"}/>
         {type !== 'nodeUnf' &&
           <foreignObject x={x - (Node.labelWidth - currentNodeWidth) / 2}
                          y={y - (Node.labelHeight - currentNodeHeight) / 2}

From 37480e1fe9e8bfd30c70694c6d396693b523504b Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 00:23:12 +1000
Subject: [PATCH 04/11] Added viewers for SPARQL and Result

---
 src/sidebar/QueryExecutor.css |  7 +++-
 src/sidebar/QueryExecutor.js  | 77 +++++++++++++++++++++++++++--------
 2 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/src/sidebar/QueryExecutor.css b/src/sidebar/QueryExecutor.css
index 2292a36..90c78a0 100644
--- a/src/sidebar/QueryExecutor.css
+++ b/src/sidebar/QueryExecutor.css
@@ -11,6 +11,7 @@ div.executequery-wrapper {
     bottom: 0;
     left: 0;
     float: left;
+    max-height: 500px;
     height: min-content;
     width: calc(100% - var(--sidebarSize));
     background-color: darkgray;
@@ -18,6 +19,10 @@ div.executequery-wrapper {
     border-top-right-radius: 15px;
 }
 
+.table-container {
+    overflow: auto;
+}
+
 .results-header {
     font-family: 'Roboto Condensed', sans-serif;
     font-size: larger;
@@ -25,7 +30,7 @@ div.executequery-wrapper {
     margin-left: 20px;
     margin-right: 20px;
 }
-.sparql {
+.sparql, td {
     font-family: "Courier New", sans-serif;
     white-space: pre-wrap;
     padding-left: 20px;
diff --git a/src/sidebar/QueryExecutor.js b/src/sidebar/QueryExecutor.js
index 1dd44a3..dde517d 100644
--- a/src/sidebar/QueryExecutor.js
+++ b/src/sidebar/QueryExecutor.js
@@ -14,6 +14,9 @@ export default class ExecuteQuerySection extends React.Component {
     super(props);
     this.state = {
       query: '',
+      result: null,
+      queryGenerated: false,
+      queryExecuted: false,
       gettingCanvasState: false,
       convertingGraphToSparql: false,
       error: null
@@ -37,12 +40,7 @@ export default class ExecuteQuerySection extends React.Component {
         return;
       }
 
-      submitQuery(sparqlQueryString).then(
-        response => console.log(response.results.bindings),
-        error => console.warn(error)
-      )
-
-      this.setState({query: sparqlQueryString, error: null, convertingGraphToSparql: false});
+      this.setState({query: sparqlQueryString, error: null, queryGenerated: true, convertingGraphToSparql: false});
     }
   }
 
@@ -106,8 +104,6 @@ export default class ExecuteQuerySection extends React.Component {
     const whereClause = this.whereClause(unknownNodes, unknownEdges);
     const orderingClause = this.orderingClause();
 
-    console.log(selectClause + whereClause);
-
     return `${selectClause}\n${whereClause}\n${orderingClause}`;
   }
 
@@ -160,16 +156,27 @@ export default class ExecuteQuerySection extends React.Component {
   }
 
   checkRequestCanvasState = () => {
-    const { gettingCanvasState, convertingGraphToSparql } = this.state;
+    const { query, gettingCanvasState, convertingGraphToSparql, queryGenerated } = this.state;
+
+    if (queryGenerated) {
+      this.setState({queryGenerated: false, queryExecuted: true});
 
-    if (!gettingCanvasState && !convertingGraphToSparql) {
-      this.setState({gettingCanvasState: true});
+      submitQuery(query).then(
+        response => this.setState({result: response}),
+        error => this.setState({error: error})
+      );
+    } else if (!gettingCanvasState && !convertingGraphToSparql) {
+      this.setState({gettingCanvasState: true, queryGenerated: false, queryExecuted: false});
       this.props.requestCanvasState();
     }
   }
 
   render() {
-    const { query, gettingCanvasState, convertingGraphToSparql, error } = this.state;
+    const {
+      query, result,
+      queryGenerated, queryExecuted,
+      gettingCanvasState, convertingGraphToSparql, error
+    } = this.state;
     const animation = gettingCanvasState || convertingGraphToSparql ? 'loading' : 'ready';
 
     return (
@@ -177,20 +184,23 @@ export default class ExecuteQuerySection extends React.Component {
         <div className={'executequery-wrapper'}>
           <motion.div className={'button'} variants={ExecuteQuerySection.variants} inital={false} animate={animation}
                       onClick={this.checkRequestCanvasState}>
-            <p>Execute Query</p>
+            <p>{queryGenerated ? 'Execute' : 'Generate'} Query</p>
           </motion.div>
           {gettingCanvasState && <p>Getting Canvas State...</p>}
           {convertingGraphToSparql && <p>Converting Graph to SPARQL...</p>}
           {error && <p className={'small error'}>{error}</p>}
         </div>
-        {query !== '' && <QueryResultsViewer query={query} />}
+        {(queryGenerated || queryExecuted) &&
+          <QueryViewerWrapper query={query} result={result} generated={queryGenerated} executed={queryExecuted} />
+        }
       </div>
 
     );
   }
 }
 
-function QueryResultsViewer(props) {
+function QueryViewerWrapper(props) {
+  const { query, result, generated, executed } = props;
   const [ isOpen, setIsOpen ] = useState(true);
   const toggleViewer = () => setIsOpen(!isOpen);
 
@@ -198,11 +208,46 @@ function QueryResultsViewer(props) {
     <motion.div className='results-container'
                 initial={{height: 0}} animate={{height: isOpen ? 'min-content' : '50px'}}>
       <p className='results-header button' onClick={() => toggleViewer()}>Results Viewer</p>
-      <p className='sparql'>{props.query}</p>
+      {generated && <QueryViewer query={query} />}
+      {executed && result && <ResultViewer result={result} />}
     </motion.div>
   );
 }
 
+function QueryViewer(props) {
+  return (
+    <p className='sparql'>{props.query}</p>
+  );
+}
+
+function ResultViewer(props) {
+  const selectedVars = props.result.head.vars;
+  const results = props.result.results.bindings
+
+  return (
+    <div >
+      <table className='table-container'>
+        <thead>
+          <tr>
+            {selectedVars.map((selectedVar, ix) =>
+              <th key={ix}>{selectedVar}</th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {results.map((result, ix) =>
+            <tr key={ix}>
+              {Object.keys(result).map((key, ix) =>
+                <td key={ix}>{result[key].value}</td>
+              )}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 class ErrorMessages {
   static noSelectedUnknowns = "Query failed: There are no nodes selected to display as results. Click on a " +
     "node and then click the 'Show in results' button to have it come up in the query, then try again.";

From e603fb5f88c41f501ba4f55648df477df42e44a9 Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 00:31:00 +1000
Subject: [PATCH 05/11] Can now scroll on table!

---
 src/sidebar/QueryExecutor.css |  1 +
 src/sidebar/QueryExecutor.js  | 34 ++++++++++++++++------------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/sidebar/QueryExecutor.css b/src/sidebar/QueryExecutor.css
index 90c78a0..a7a46d7 100644
--- a/src/sidebar/QueryExecutor.css
+++ b/src/sidebar/QueryExecutor.css
@@ -8,6 +8,7 @@ div.executequery-wrapper {
 
 .results-container {
     position: fixed;
+    overflow: auto;
     bottom: 0;
     left: 0;
     float: left;
diff --git a/src/sidebar/QueryExecutor.js b/src/sidebar/QueryExecutor.js
index dde517d..c0532f1 100644
--- a/src/sidebar/QueryExecutor.js
+++ b/src/sidebar/QueryExecutor.js
@@ -225,26 +225,24 @@ function ResultViewer(props) {
   const results = props.result.results.bindings
 
   return (
-    <div >
-      <table className='table-container'>
-        <thead>
-          <tr>
-            {selectedVars.map((selectedVar, ix) =>
-              <th key={ix}>{selectedVar}</th>
+    <table className='table-container'>
+      <thead>
+        <tr>
+          {selectedVars.map((selectedVar, ix) =>
+            <th key={ix}>{selectedVar}</th>
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {results.map((result, ix) =>
+          <tr key={ix}>
+            {Object.keys(result).map((key, ix) =>
+              <td key={ix}>{result[key].value}</td>
             )}
           </tr>
-        </thead>
-        <tbody>
-          {results.map((result, ix) =>
-            <tr key={ix}>
-              {Object.keys(result).map((key, ix) =>
-                <td key={ix}>{result[key].value}</td>
-              )}
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
+        )}
+      </tbody>
+    </table>
   );
 }
 

From 507188f96e5952c050dc0b8a98d08f253ed73e02 Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 00:54:11 +1000
Subject: [PATCH 06/11] Table improvements

---
 src/sidebar/QueryExecutor.css | 13 ++++++++++++-
 src/sidebar/QueryExecutor.js  | 34 ++++++++++++++++++----------------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/sidebar/QueryExecutor.css b/src/sidebar/QueryExecutor.css
index a7a46d7..9c74755 100644
--- a/src/sidebar/QueryExecutor.css
+++ b/src/sidebar/QueryExecutor.css
@@ -8,7 +8,6 @@ div.executequery-wrapper {
 
 .results-container {
     position: fixed;
-    overflow: auto;
     bottom: 0;
     left: 0;
     float: left;
@@ -22,8 +21,20 @@ div.executequery-wrapper {
 
 .table-container {
     overflow: auto;
+    width: 100%;
+    height: 500px;
 }
 
+.table-container thead th {
+    position: sticky;
+    top: 0;
+    z-index: 0;
+}
+
+.table-container table  { border-collapse: collapse; width: 100%; }
+.table-container th, td { padding: 8px 16px; }
+.table-container th     { background: darkgrey; }
+
 .results-header {
     font-family: 'Roboto Condensed', sans-serif;
     font-size: larger;
diff --git a/src/sidebar/QueryExecutor.js b/src/sidebar/QueryExecutor.js
index c0532f1..76e1a00 100644
--- a/src/sidebar/QueryExecutor.js
+++ b/src/sidebar/QueryExecutor.js
@@ -225,24 +225,26 @@ function ResultViewer(props) {
   const results = props.result.results.bindings
 
   return (
-    <table className='table-container'>
-      <thead>
-        <tr>
-          {selectedVars.map((selectedVar, ix) =>
-            <th key={ix}>{selectedVar}</th>
-          )}
-        </tr>
-      </thead>
-      <tbody>
-        {results.map((result, ix) =>
-          <tr key={ix}>
-            {Object.keys(result).map((key, ix) =>
-              <td key={ix}>{result[key].value}</td>
+    <div className='table-container'>
+      <table>
+        <thead>
+          <tr>
+            {selectedVars.map((selectedVar, ix) =>
+              <th key={ix}>{selectedVar}</th>
             )}
           </tr>
-        )}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {results.map((result, ix) =>
+            <tr key={ix}>
+              {Object.keys(result).map((key, ix) =>
+                <td key={ix}>{result[key].value}</td>
+              )}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
   );
 }
 

From 2487660f0b25e0a63e7bced605595566210fde0e Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 00:58:46 +1000
Subject: [PATCH 07/11] Fixed reversal of table headers when compared to their
 cells

---
 src/sidebar/QueryExecutor.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sidebar/QueryExecutor.js b/src/sidebar/QueryExecutor.js
index 76e1a00..df8949f 100644
--- a/src/sidebar/QueryExecutor.js
+++ b/src/sidebar/QueryExecutor.js
@@ -222,7 +222,7 @@ function QueryViewer(props) {
 
 function ResultViewer(props) {
   const selectedVars = props.result.head.vars;
-  const results = props.result.results.bindings
+  const results = props.result.results.bindings;
 
   return (
     <div className='table-container'>
@@ -237,7 +237,7 @@ function ResultViewer(props) {
         <tbody>
           {results.map((result, ix) =>
             <tr key={ix}>
-              {Object.keys(result).map((key, ix) =>
+              {selectedVars.map((key, ix) =>
                 <td key={ix}>{result[key].value}</td>
               )}
             </tr>

From 6497f3662c0d8045e9282265666d84deec86b149 Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 01:07:59 +1000
Subject: [PATCH 08/11] Made table view smaller

---
 src/sidebar/QueryExecutor.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/sidebar/QueryExecutor.css b/src/sidebar/QueryExecutor.css
index 9c74755..80fda59 100644
--- a/src/sidebar/QueryExecutor.css
+++ b/src/sidebar/QueryExecutor.css
@@ -21,8 +21,7 @@ div.executequery-wrapper {
 
 .table-container {
     overflow: auto;
-    width: 100%;
-    height: 500px;
+    height: 450px;
 }
 
 .table-container thead th {
@@ -31,6 +30,11 @@ div.executequery-wrapper {
     z-index: 0;
 }
 
+.table-container tbody th {
+    position: sticky;
+    left: 0;
+}
+
 .table-container table  { border-collapse: collapse; width: 100%; }
 .table-container th, td { padding: 8px 16px; }
 .table-container th     { background: darkgrey; }

From ef8b9efe79f8ff4a8168d9a50efbcd9035acb6c4 Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 02:18:20 +1000
Subject: [PATCH 09/11] Removed custom type from Node and it's references -
 doesn't seem to be any problems with lagging animation anymore!

---
 src/App.js           |  6 ++--
 src/canvas/Canvas.js |  2 +-
 src/canvas/Node.js   | 72 ++++++++++++++++++++++++++------------------
 3 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4c44d6f..0c0cfce 100644
--- a/src/App.js
+++ b/src/App.js
@@ -97,7 +97,7 @@ class App extends React.Component {
    */
   createNode = (x, y, type, content, isOptional, iri) => {
     const { nodeCounter } = this.state;
-    const variant = Node.variants[type](false);
+    const variant = Node.variants[type];
     const newNode = {
       x: x - variant.width / 2, y: y - variant.height / 2,
       midX: x, midY: y,
@@ -171,7 +171,7 @@ class App extends React.Component {
     const edge = edges.find(edge => !edge.complete);
 
     const subject = nodes.find(node => node.id === edge.subject.id);
-    const objectVariant = Node.variants[objectType](false);
+    const objectVariant = Node.variants[objectType];
 
     const objectShape = {...objectVariant, x: objectPos.x, y: objectPos.y};
     const pathDef = {d: `M${subject.midX} ${subject.midY} L${objectPos.midX} ${objectPos.midY}`};
@@ -207,7 +207,7 @@ class App extends React.Component {
   updateEdgeIntersections = (edgeToUpdate, objectNode) => {
     const subX = edgeToUpdate.subject.intersectX;
     const subY = edgeToUpdate.subject.intersectY;
-    const nodeVariant = Node.variants['nodeUri'](false);
+    const nodeVariant = Node.variants['nodeUri'];
     const updatedObjectNodeX = objectNode.x + nodeVariant.width / 2;
     const updatedObjectNodeY = objectNode.y + nodeVariant.height / 2;
 
diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index 7436fb3..afba851 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -160,7 +160,7 @@ export default class Canvas extends React.Component {
     if (event.defaultPrevented) return;
     if (tempEdge.completing){ // we'll complete the edge with a new, unfinished Node as object
       const newNodeId = this.props.createNode(event.clientX, event.clientY, 'nodeUnf', "", false, null);
-      const variant = Node.variants['nodeUnf'](false);
+      const variant = Node.variants['nodeUnf'];
       const newNodePos = {
         x: event.clientX - variant.width / 2, y: event.clientY - variant.height / 2,
         midX: event.clientX, midY: event.clientY
diff --git a/src/canvas/Node.js b/src/canvas/Node.js
index d8ddfb8..c4016ce 100644
--- a/src/canvas/Node.js
+++ b/src/canvas/Node.js
@@ -5,68 +5,71 @@ import "./Canvas.css";
 
 export default class Node extends React.Component {
   static variants = {
-    nodeUnknown: ({isOpt, isSelected}) => ({
+    nodeUnknown: {
       fill: '#0000fe',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt || isSelected ? 5 :  0,
-      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#1e90ff'
-    }),
-    nodeSelectedUnknown: ({isOpt, isSelected}) => ({
+    },
+    nodeSelectedUnknown: {
       fill: '#1e90ff',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt || isSelected ? 5 :  0,
-      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#59adff'
-    }),
-    nodeUri: ({isOpt, isSelected}) => ({
+    },
+    nodeUri: {
       fill: '#bebebe',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt || isSelected ? 5 :  0,
-      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#4e4e4e'
-    }),
-    nodeLiteral: ({isOpt, isSelected}) => ({
+    },
+    nodeLiteral:{
       fill: '#4e4e4e',
       rx: 0,
       ry: 0,
       height: 100,
       width: 200,
-      strokeWidth: isOpt || isSelected ? 5 : 0,
-      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#bebebe'
-    }),
-    nodeAmalgam: ({isOpt, isSelected}) => ({
+    },
+    nodeAmalgam: {
       fill: '#444444',
       height: 100,
       width: 100,
       rx: 10,
       ry: 10,
-      strokeWidth: isOpt || isSelected ? 5 : 0,
-      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#bebebe'
-    }),
-    nodeUnf: ({isOpt, isSelected}) => ({
+    },
+    nodeUnf: {
       fill: '#0000fe',
-      strokeWidth: isOpt || isSelected ? 3: 0,
-      strokeDasharray: isSelected ? 0 : 3,
       stroke: '#1e90ff',
       width: 40,
       height: 40,
       rx: 70,
       ry: 70
-    })
+    },
+    sel: {
+      strokeWidth: 5,
+      strokeDasharray: 0,
+      // transition: {
+      //   duration: 0
+      // }
+    },
+    opt: {
+      strokeWidth: 5,
+      strokeDasharray: 3
+    },
+    no: {
+      strokeWidth: 0,
+      strokeDasharray: 0,
+    },
   };
-  static nodeHeight = 100;
+
   static nodeWidth = 100;
   static unfWidth = 40;
   static unfHeight = 40;
@@ -109,17 +112,28 @@ export default class Node extends React.Component {
   }
 
   render(){
-    const { type, isOptional, content, x, y, amalgam, isSelected } = this.props;
+    const { id, type, isOptional, content, x, y, amalgam, isSelected } = this.props;
 
-    const variant = Node.variants[type](isOptional);
+    const variant = Node.variants[type];
     const currentNodeWidth = variant.width;
     const currentNodeHeight = variant.height;
 
+    let status;
+    if (isSelected){
+      status = 'sel';
+    } else if (isOptional) {
+      status = 'opt';
+    } else {
+      status = 'no';
+    }
+    console.log(`${id} opt ${isOptional} sel ${isSelected}`);
+
     return (
       <motion.g whileHover={{scale: 1.2}} initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}}>
         <motion.rect x={x} y={y} onClickCapture={this.handleEntryExit}
-                     variants={Node.variants} initial={false} animate={type}
-                     custom={{isOpt: isOptional, isSelected: isSelected}}
+                     variants={Node.variants}
+                     initial={false} animate={[type, status]}
+                     custom={{isOptional: false, isSelected: false}}
                      transition={{duration: 0.2}} transformTemplate={() => "translateX(0) translateY(0)"}/>
         {type !== 'nodeUnf' &&
           <foreignObject x={x - (Node.labelWidth - currentNodeWidth) / 2}

From 236b12cbf3df2c6493390a2e46982e4b76e37430 Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 02:24:11 +1000
Subject: [PATCH 10/11] removed logs

---
 src/canvas/Node.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/canvas/Node.js b/src/canvas/Node.js
index c4016ce..b89dc02 100644
--- a/src/canvas/Node.js
+++ b/src/canvas/Node.js
@@ -55,10 +55,7 @@ export default class Node extends React.Component {
     },
     sel: {
       strokeWidth: 5,
-      strokeDasharray: 0,
-      // transition: {
-      //   duration: 0
-      // }
+      strokeDasharray: 0
     },
     opt: {
       strokeWidth: 5,
@@ -66,7 +63,7 @@ export default class Node extends React.Component {
     },
     no: {
       strokeWidth: 0,
-      strokeDasharray: 0,
+      strokeDasharray: 0
     },
   };
 
@@ -126,14 +123,12 @@ export default class Node extends React.Component {
     } else {
       status = 'no';
     }
-    console.log(`${id} opt ${isOptional} sel ${isSelected}`);
 
     return (
       <motion.g whileHover={{scale: 1.2}} initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}}>
         <motion.rect x={x} y={y} onClickCapture={this.handleEntryExit}
                      variants={Node.variants}
                      initial={false} animate={[type, status]}
-                     custom={{isOptional: false, isSelected: false}}
                      transition={{duration: 0.2}} transformTemplate={() => "translateX(0) translateY(0)"}/>
         {type !== 'nodeUnf' &&
           <foreignObject x={x - (Node.labelWidth - currentNodeWidth) / 2}

From f4521026cb3dc631bcf7aa5e522f3c23c906e66f Mon Sep 17 00:00:00 2001
From: Tommy Phoenix Gatti <u6044453@anu.edu.au>
Date: Wed, 26 May 2021 02:24:26 +1000
Subject: [PATCH 11/11] removed logs

---
 src/canvas/Node.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/canvas/Node.js b/src/canvas/Node.js
index b89dc02..55046e8 100644
--- a/src/canvas/Node.js
+++ b/src/canvas/Node.js
@@ -109,7 +109,7 @@ export default class Node extends React.Component {
   }
 
   render(){
-    const { id, type, isOptional, content, x, y, amalgam, isSelected } = this.props;
+    const { type, isOptional, content, x, y, amalgam, isSelected } = this.props;
 
     const variant = Node.variants[type];
     const currentNodeWidth = variant.width;