Show Faldo toggle

askomics · Aug 20, 2021 · 8343042 · 8343042
1 parent fc1998c
commit 8343042
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/askomics/react/src/routes/query/graphfilters.js b/askomics/react/src/routes/query/graphfilters.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import axios from 'axios'
-import { Row, Col, Input } from 'reactstrap'
+import { Row, Col, CustomInput, Input } from 'reactstrap'
 import { Redirect } from 'react-router-dom'
 import ErrorDiv from '../error/error'
 import WaitingDiv from '../../components/waiting'
@@ -39,15 +39,20 @@ export default class GraphFilters extends Component {
 
     return (
       <Row>
-        <Col md={6}>
+        <Col md={4}>
           <div>
             <Input type="text" disabled={disabled} name="filterlinks" id="filterlinks" value={filterLinkValue} placeholder="Filter links" onChange={this.props.handleFilterLinks}/>
           </div>
         </Col>
-        <Col md={6}>
+        <Col md={4}>
           <div>
             <Input type="text" disabled={disabled} name="filternodes" id="filternodes" value={filterNodeValue} placeholder="Filter nodes" onChange={this.props.handleFilterNodes}/>
-          </div> 
+          </div>
+        </Col>
+        <Col md={4}>
+          <div>
+            <CustomInput type="switch" id="filterFaldo" onChange={this.props.handleFilterFaldo} checked={this.props.showFaldo} value={this.props.showFaldo} />
+          </div>
         </Col>
       </Row>
     )
@@ -57,6 +62,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
@@ -40,7 +40,9 @@ export default class Query extends Component {
 
       // Preview icons
       disablePreview: false,
-      previewIcon: "table"
+      previewIcon: "table",
+
+      showFaldo: true;
     }
 
     this.graphState = {
@@ -570,7 +572,7 @@ export default class Query extends Component {
     })
 
     // Position
-    if (node.faldo) {
+    if (node.faldo && this.state.showFaldo) {
       this.state.abstraction.entities.map(entity => {
         if (entity.faldo) {
           let new_id = this.getId()
@@ -987,6 +989,16 @@ export default class Query extends Component {
     this.updateGraphState()
   }
 
+  // Filter Faldo --------------------------
+  handleFilterFaldo (event) {
+    // Toggle filter
+    this.state.showFaldo = event.target.value
+    // Reset suggestion
+    this.removeAllSuggestion()
+    this.insertSuggestion(this.currentSelected)
+    this.updateGraphState()
+  }
+
   // Attributes managment -----------------------
   toggleVisibility (event) {
     this.graphState.attr.map(attr => {
@@ -1542,6 +1554,8 @@ export default class Query extends Component {
           current={this.currentSelected}
           handleFilterNodes={this.handleFilterNodes}
           handleFilterLinks={this.handleFilterLinks}
+          handleFilterFaldo={this.handleFilterFaldo}
+          showFaldo:{this.state.showFaldo}
         />
       )