Add button to hide faldo relations (#269)

askomics · Aug 23, 2021 · c455714 · c455714
1 parent d35ed2b
commit c455714
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/askomics/react/src/routes/query/graphfilters.js b/askomics/react/src/routes/query/graphfilters.js
@@ -47,7 +47,7 @@ export default class GraphFilters extends Component {
         <Col md={6}>
           <div>
             <Input type="text" disabled={disabled} name="filternodes" id="filternodes" value={filterNodeValue} placeholder="Filter nodes" onChange={this.props.handleFilterNodes}/>
-          </div> 
+          </div>
         </Col>
       </Row>
     )
@@ -57,6 +57,8 @@ export default class GraphFilters extends Component {
 GraphFilters.propTypes = {
   graph: PropTypes.object,
   current: PropTypes.object,
+  showFaldo: PropTypes.bool,
   handleFilterLinks: PropTypes.func,
-  handleFilterNodes: PropTypes.func
-}
+  handleFilterNodes: PropTypes.func,
+  handleFilterFaldo: PropTypes.func
+}
diff --git a/askomics/react/src/routes/query/query.jsx b/askomics/react/src/routes/query/query.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import axios from 'axios'
-import { Alert, Button, Row, Col, ButtonGroup, Input, Spinner } from 'reactstrap'
+import { Alert, Button, CustomInput, Row, Col, ButtonGroup, Input, Spinner } from 'reactstrap'
 import { Redirect } from 'react-router-dom'
 import ErrorDiv from '../error/error'
 import WaitingDiv from '../../components/waiting'
@@ -40,7 +40,7 @@ export default class Query extends Component {
 
       // Preview icons
       disablePreview: false,
-      previewIcon: "table"
+      previewIcon: "table",
     }
 
     this.graphState = {
@@ -50,6 +50,8 @@ export default class Query extends Component {
     }
 
     this.divHeight = 650
+    this.showFaldo = true;
+
 
     this.idNumber = 0
     this.specialNodeIdNumber = 0
@@ -62,6 +64,7 @@ export default class Query extends Component {
     this.handleRemoveNode = this.handleRemoveNode.bind(this)
     this.handleFilterNodes = this.handleFilterNodes.bind(this)
     this.handleFilterLinks = this.handleFilterLinks.bind(this)
+    this.handleFilterFaldo = this.handleFilterFaldo.bind(this)
   }
 
   resetIcons() {
@@ -570,7 +573,7 @@ export default class Query extends Component {
     })
 
     // Position
-    if (node.faldo) {
+    if (node.faldo && this.showFaldo) {
       this.state.abstraction.entities.map(entity => {
         if (entity.faldo) {
           let new_id = this.getId()
@@ -987,6 +990,17 @@ export default class Query extends Component {
     this.updateGraphState()
   }
 
+  // Filter Faldo --------------------------
+  handleFilterFaldo (event) {
+    // Toggle filter
+
+    this.showFaldo = !this.showFaldo
+    // Reset suggestion
+    this.removeAllSuggestion()
+    this.insertSuggestion(this.currentSelected)
+    this.updateGraphState()
+  }
+
   // Attributes managment -----------------------
   toggleVisibility (event) {
     this.graphState.attr.map(attr => {
@@ -1444,6 +1458,7 @@ export default class Query extends Component {
     let AttributeBoxes
     let linkView
     let previewButton
+    let faldoButton
     let launchQueryButton
     let removeButton
     let graphFilters
@@ -1535,6 +1550,12 @@ export default class Query extends Component {
         )
       }
 
+      faldoButton = (
+        <div>
+            <CustomInput type="switch" id="filterFaldo" onChange={this.handleFilterFaldo} checked={this.showFaldo} value={this.showFaldo} label="Show FALDO relations"  />
+        </div>
+      )
+
       // Filters
       graphFilters = (
         <GraphFilters
@@ -1562,11 +1583,14 @@ export default class Query extends Component {
         <h2>Query Builder</h2>
         <hr />
         <WaitingDiv waiting={this.state.waiting} center />
-        <Row>
+        <Row className="align-items-center">
           <Col xs="7">
             {graphFilters}
           </Col>
-          <Col xs="5">
+          <Col xs="3">
+            {faldoButton}
+          </Col>
+          <Col xs="2">
             {removeButton}
           </Col>
         </Row>