Issue #31 (Selected item more apparent) and #33 (results of query dis…

…played in table)
CodeGat · May 25, 2021 · 6d01ef1 · 6d01ef1
2 parents 6729340 + f452102
commit 6d01ef1
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 58 deletions.
diff --git a/src/App.js b/src/App.js
@@ -23,7 +23,6 @@ class App extends React.Component {
     };
   }
 
-
   /**
    *
    * @param {string} type - whether the object changed was a
@@ -34,6 +33,20 @@ class App extends React.Component {
    * @param {Object} meta - metadata of the selected item.
    */
   handleSelectedItemChange = (type, id, content, isOptional, 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, isOptional: isOptional, meta: meta}});
   }
 
@@ -84,11 +97,12 @@ 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,
-      id: nodeCounter + 1, type: type, content: content, isOptional: isOptional, amalgam: null
+      id: nodeCounter + 1, type: type, content: content, isOptional: isOptional, amalgam: null,
+      isSelected: false
     };
 
     if (iri) newNode.iri = iri;
@@ -124,7 +138,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;
@@ -156,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}`};
@@ -192,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
@@ -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
@@ -189,6 +189,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>
@@ -198,6 +199,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/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
@@ -5,68 +5,68 @@ import "./Canvas.css";
 
 export default class Node extends React.Component {
   static variants = {
-    nodeUnknown: isOpt => ({
+    nodeUnknown: {
       fill: '#0000fe',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt ? 5 :  0,
-      strokeDasharray: 3,
       stroke: '#1e90ff'
-    }),
-    nodeSelectedUnknown: isOpt => ({
+    },
+    nodeSelectedUnknown: {
       fill: '#1e90ff',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt ? 5 :  0,
-      strokeDasharray: 3,
-      stroke: '#59adff'//'#0000fe'
-    }),
-    nodeUri: isOpt => ({
+      stroke: '#59adff'
+    },
+    nodeUri: {
       fill: '#bebebe',
       rx: 50,
       ry: 50,
       height: 100,
       width: 100,
-      strokeWidth: isOpt ? 5 :  0,
-      strokeDasharray: 3,
       stroke: '#4e4e4e'
-    }),
-    nodeLiteral: isOpt => ({
+    },
+    nodeLiteral:{
       fill: '#4e4e4e',
       rx: 0,
       ry: 0,
       height: 100,
       width: 200,
-      strokeWidth: isOpt ? 5 : 0,
-      strokeDasharray: 3,
       stroke: '#bebebe'
-    }),
-    nodeAmalgam: isOpt => ({
+    },
+    nodeAmalgam: {
       fill: '#444444',
       height: 100,
       width: 100,
       rx: 10,
       ry: 10,
-      strokeWidth: isOpt ? 5 : 0,
-      strokeDasharray: 3,
       stroke: '#bebebe'
-    }),
-    nodeUnf: isOpt => ({
+    },
+    nodeUnf: {
       fill: '#0000fe',
-      strokeWidth: isOpt ? 3: 0,
-      strokeDasharray: 3,
       stroke: '#1e90ff',
       width: 40,
       height: 40,
       rx: 70,
       ry: 70
-    })
+    },
+    sel: {
+      strokeWidth: 5,
+      strokeDasharray: 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 +109,27 @@ export default class Node extends React.Component {
   }
 
   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 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';
+    }
+
     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, status]}
+                     transition={{duration: 0.2}} transformTemplate={() => "translateX(0) translateY(0)"}/>
         {type !== 'nodeUnf' &&
           <foreignObject x={x - (Node.labelWidth - currentNodeWidth) / 2}
                          y={y - (Node.labelHeight - currentNodeHeight) / 2}

diff --git a/src/sidebar/QueryExecutor.css b/src/sidebar/QueryExecutor.css
@@ -11,21 +11,42 @@ div.executequery-wrapper {
     bottom: 0;
     left: 0;
     float: left;
+    max-height: 500px;
     height: min-content;
     width: calc(100% - var(--sidebarSize));
     background-color: darkgray;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
 }
 
+.table-container {
+    overflow: auto;
+    height: 450px;
+}
+
+.table-container thead th {
+    position: sticky;
+    top: 0;
+    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; }
+
 .results-header {
     font-family: 'Roboto Condensed', sans-serif;
     font-size: larger;
     padding-left: 20px;
     margin-left: 20px;
     margin-right: 20px;
 }
-.sparql {
+.sparql, td {
     font-family: "Courier New", sans-serif;
     white-space: pre-wrap;
     padding-left: 20px;