Fixes Issues #35 (help) and adds optionals

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liberal-sydney-sparql-ui",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "private": true,
   "homepage": "https://lmb.cdhr.anu.edu.au/explorer",
   "dependencies": {

src/App.js

@@ -11,7 +11,7 @@ class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      selected: {type: '', id: '', content: '', meta: ''},
+      selected: {type: '', id: '', content: '', isOptional: false, meta: ''},
       transferredSuggestion: {exists: false},
       lastReferencedUnknown: -1,
       lastReferencedUnknownAwaitingClass: false,
@@ -30,10 +30,11 @@ class App extends React.Component {
    *          node (specified by it's variant), edge or datatype.
    * @param {number} id - id of the given changed object.
    * @param {string} content - the changed input of the object.
+   * @param {boolean} isOptional - is the object SPARQL OPTIONAL?
    * @param {Object} meta - metadata of the selected item.
    */
-  handleSelectedItemChange = (type, id, content, meta) => {
-    this.setState({selected: {type: type, id: id, content: content, meta: meta}});
+  handleSelectedItemChange = (type, id, content, isOptional, meta) => {
+    this.setState({selected: {type: type, id: id, content: content, isOptional: isOptional, meta: meta}});
   }
 
   /**
@@ -77,16 +78,17 @@ class App extends React.Component {
    * @param {string} type - the initial state of the created Node, either being a placeholder ('nodeUnf') or a
    *   fully formed node ('nodeUnknown'/'nodeKnown')
    * @param {string} content - content that the node starts with
+   * @param {boolean} isOptional - is the node SPARQL OPTIONAL?
    * @param {string} [iri] - optional iri for nodes that have type 'nodeUri'
    * @returns {number} - id of node just created.
    */
-  createNode = (x, y, type, content, iri) => {
+  createNode = (x, y, type, content, isOptional, 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: isOptional, amalgam: null
     };
 
     if (iri) newNode.iri = iri;
@@ -100,7 +102,7 @@ class App extends React.Component {
     }));
 
     if (type !== 'nodeUnf') {
-      this.handleSelectedItemChange(type, nodeCounter + 1, content,  null);
+      this.handleSelectedItemChange(type, nodeCounter + 1, content, isOptional,  null);
     }
 
     return nodeCounter + 1;
@@ -136,7 +138,9 @@ class App extends React.Component {
       tempEdge: {completing: true, x: subjectPos.midX + 1, y: subjectPos.midY + 1}
     }));
 
-    this.handleSelectedItemChange(content === '?' ? 'edgeUnknown' : 'edgeKnown', edgeCounter + 1, content, null);
+    this.handleSelectedItemChange(
+      content === '?' ? 'edgeUnknown' : 'edgeKnown', edgeCounter + 1, content, false,null
+    );
   }
 
   /**
@@ -283,18 +287,40 @@ class App extends React.Component {
       }
     } else { // it is an edge and we find the connected node and recursively delete
       const deletedEdge = graph.edges.find(edge => edge.id === id);
-      const deletedEdgeNode = graph.nodes.find(node => node.id === deletedEdge.object.id);
-      if (deletedEdgeNode) {
-        this.deleteItemCascade(deletedEdgeNode.id, deletedEdgeNode.type, false);
+      const deletedEdgeObjNode = graph.nodes.find(node => node.id === deletedEdge.object.id);
+
+      if (deletedEdgeObjNode) {
+        this.deleteItemCascade(deletedEdgeObjNode.id, deletedEdgeObjNode.type, false);
       }
       this.deleteEdge(id);
     }
 
     if (isFirst) { // on most shallow recursion, set selected item to incoming item or empty.
+      if (type.startsWith('edge')) {
+        this.checkOptionalityOnSubjectNodeOfDeletedEdge(id, graph);
+      }
       this.findSuitableSelectedItemChange(id, type, graph);
     }
   }
 
+  /**
+   * if there are no more OPTIONAL outgoing edges from the subject node of the deleted edge, set the node to not being
+   *   optional
+   * @param {number} id - id of the deleted edge
+   * @param {Object} graph - snapshot of the graph before deletion
+   */
+  checkOptionalityOnSubjectNodeOfDeletedEdge = (id, graph) => {
+    const deletedEdge = graph.edges.find(edge => edge.id === id);
+    if (!deletedEdge.isOptional) return;
+
+    const subjNodeOfDeletedEdge = graph.nodes.find(node => node.id === deletedEdge.subject.id);
+    const subjNodeEdges = graph.edges.filter(edge => edge.subject.id === subjNodeOfDeletedEdge.id && edge.id !== id);
+
+    if (!subjNodeEdges.some(edge => edge.isOptional)) {
+      this.changeNodeState(subjNodeOfDeletedEdge.id, {isOptional: false});
+    }
+  }
+
   /**
    * Finds the incoming node or edge off the deleted on, setting it as the selected item
    * @param id - id of the deleted item
@@ -306,15 +332,18 @@ class App extends React.Component {
     if (type.startsWith('node')) {
       const selectedEdge = graph.edges.find(edge => edge.object.id === id);
       if (selectedEdge) {
-        this.handleSelectedItemChange(selectedEdge.type, selectedEdge.id, selectedEdge.content, null);
-      } else {
-        this.handleSelectedItemChange('', -1, '', '');
+        this.handleSelectedItemChange(
+          selectedEdge.type, selectedEdge.id, selectedEdge.content, selectedEdge.isOptional, null
+        );
+      } else { // have no selected item
+        this.handleSelectedItemChange('', -1, '', false,'');
       }
     } else {
       const deletedEdge = graph.edges.find(edge => edge.id === id);
       const selectedNode = graph.nodes.find(node => node.id === deletedEdge.subject.id);
       this.handleSelectedItemChange(
-        selectedNode.type, selectedNode.id, selectedNode.content, {amalgam: selectedNode.amalgam}
+        selectedNode.type, selectedNode.id, selectedNode.content, selectedNode.isOptional,
+        {amalgam: selectedNode.amalgam}
       );
     }
   }
@@ -351,7 +380,7 @@ class App extends React.Component {
                     onSelectedItemChange={this.handleSelectedItemChange}
                     acknowledgeTransferredSuggestion={this.handleAcknowledgedSuggestion}/>
             <SideBar selected={selected} graph={graph} canvasStateSnapshot={canvasStateSnapshot}
-                     changeNodeState={this.changeNodeState}
+                     changeNodeState={this.changeNodeState} changeEdgeState={this.changeEdgeState}
                      deleteItemCascade={(id, type) => this.deleteItemCascade(id, type, true)}
                      onSelectedItemChange={this.handleSelectedItemChange}
                      onTransferSuggestionToCanvas={this.handleTransferSuggestionToCanvas}

src/MenuBar.css

@@ -1,21 +1,17 @@
 .navbar-default {
-    background-color: #3e3f3a;
     border-color: #3e3f3a;
 }
 .navbar-fixed-top {
     top: 0;
     width: 100%;
     border-radius: 0;
     position: fixed;
-    overflow: hidden;
     right: 0;
     left: 0;
     z-index: 2000;
 }
 .navbar {
-    border-radius: 4px;
     position: fixed;
-    height: 50px;
     margin-bottom: 20px;
     border: 1px solid transparent;
 }
@@ -51,4 +47,40 @@
     font-family: 'Roboto Condensed', sans-serif;
     margin: 0;
     cursor: pointer;
+}
+
+#help-page-container {
+    clear: both;
+    padding: 0 30px;
+}
+
+#help-page-container p {
+    font-family: 'Roboto Condensed', sans-serif;
+}
+
+.centered-table {
+    margin: 0 auto;
+    border-collapse: collapse;
+}
+
+.centered-table td {
+    border-left: solid 1px black;
+    text-align: center;
+    padding: 0 10px;
+}
+
+.big {
+    font-size: larger;
+}
+
+.help-header {
+    font-size: 32px;
+}
+
+.text {
+    font-family: 'Roboto Condensed', sans-serif;
+}
+
+.img-outline {
+    border: solid 1px black;
 }