From a2882c19bc399b6308750b8d3e5f91a324c84790 Mon Sep 17 00:00:00 2001
From: mboudet <mateo.boudet@gmail.com>
Date: Tue, 9 May 2023 17:04:36 +0200
Subject: [PATCH] Add functions

---
 askomics/react/src/routes/query/attribute.jsx | 124 +++++++++++-------
 askomics/react/src/routes/query/query.jsx     |  79 ++++++++++-
 2 files changed, 150 insertions(+), 53 deletions(-)

diff --git a/askomics/react/src/routes/query/attribute.jsx b/askomics/react/src/routes/query/attribute.jsx
index fe6efbb4..4d3ef878 100644
--- a/askomics/react/src/routes/query/attribute.jsx
+++ b/askomics/react/src/routes/query/attribute.jsx
@@ -34,6 +34,11 @@ export default class AttributeBox extends Component {
     this.toggleAddNumFilter = this.props.toggleAddNumFilter.bind(this)
     this.toggleAddDateFilter = this.props.toggleAddDateFilter.bind(this)
     this.handleDateFilter = this.props.handleDateFilter.bind(this)
+    this.handleLinkedNumericModifierSign = this.props.handleLinkedNumericModifierSign.bind(this)
+    this.handleLinkedNumericSign = this.props.handleLinkedNumericSign.bind(this)
+    this.handleLinkedNumericValue = this.props.handleLinkedNumericValue.bind(this)
+    this.toggleAddNumLinkedFilter = this.props.toggleAddNumLinkedFilter.bind(this)
+    this.toggleRemoveNumLinkedFilter = this.props.toggleRemoveNumLinkedFilter.bind(this)
     this.cancelRequest
   }
 
@@ -73,56 +78,10 @@ export default class AttributeBox extends Component {
     })
 
     if (type == "numeric"){
-      let sign_display = {
-        '=': '=',
-        '<': '<',
-        '<=': '≤',
-        '>': '>',
-        '>=': '≥',
-        '!=': '≠'
-      }
-
-      let modifier_display = {
-        '+': '+',
-        '-': '-',
-      }
-      const numberOfFilters = this.props.attribute.linkedFilters.length - 1
-      if (typeof this.props.attribute.linkedWith !== "object"){
-      let selectedLabel = optionDict[this.props.attribute.linkedWith.toString()]
-      customParams = (
-        <table style={{ width: '100%' }}>
-        {this.props.attribute.linkedFilters.map((filter, index) => {
-          return (
-            <tr key={index}>
-              <td key={index}>
-                <CustomInput key={index} data-index={index} disabled={this.props.attribute.optional} type="select" id={this.props.attribute.id} onChange={this.handleFilterNumericSign}>
-                  {Object.keys(sign_display).map(sign => {
-                    return <option key={sign} selected={filter.filterSign == sign ? true : false} value={sign}>{sign_display[sign]}</option>
-                  })}
-                </CustomInput>
-              </td>
-              <td>
-              <Input disabled={true} type="text" value={selectedLabel} size={selectedLabel.length}/>
-              </td>
-              <td>
-              <CustomInput key={index} data-index={index} disabled={this.props.attribute.optional} type="select" id={this.props.attribute.id} onChange={this.handleFilterNumericSign}>
-                {Object.keys(modifier_display).map(sign => {
-                  return <option key={sign} selected={filter.filterModifier == sign ? true : false} value={sign}>{modifier_display[sign]}</option>
-                })}
-              </CustomInput>
-              </td>
-              <td>
-                <div className="input-with-icon">
-                <Input className="input-with-icon" data-index={index} disabled={this.props.attribute.optional} type="text" id={this.props.attribute.id} value={filter.filterValue} onChange={this.handleFilterNumericValue} />
-                {index == numberOfFilters ? <button className="input-with-icon"><i className="attr-icon fas fa-plus inactive" id={this.props.attribute.id} onClick={this.toggleAddNumFilter}></i></button> : <></>}
-                </div>
-              </td>
-            </tr>
-          )
-        })}
-        </table>
-      )
+      let content = this.renderNumericLinker(optionDict)
     }
+    if (type == "date"){
+      let content = this.renderNumericLinker(optionDict, "date")
     }
 
     return (
@@ -133,7 +92,7 @@ export default class AttributeBox extends Component {
           return opt
         })}
       </CustomInput>
-      {customParams}
+      {content}
       </>
     )
   }
@@ -527,6 +486,64 @@ export default class AttributeBox extends Component {
     )
   }
 
+  renderNumericLinker (options, type="num"){
+    const sign_display = {
+      '=': '=',
+      '<': '<',
+      '<=': '≤',
+      '>': '>',
+      '>=': '≥',
+      '!=': '≠'
+    }
+
+    const modifier_display = {
+      '+': '+',
+      '-': '-',
+    }
+    let customParams
+    const placeholder = type === "num"? "" : "days"
+    const numberOfFilters = this.props.attribute.linkedFilters.length - 1
+
+    if (typeof this.props.attribute.linkedWith !== "object") {
+      let selectedLabel = options[this.props.attribute.linkedWith.toString()]
+      customParams = (
+        <table style={{ width: '100%' }}>
+        {this.props.attribute.linkedFilters.map((filter, index) => {
+          return (
+            <tr key={index}>
+              <td key={index}>
+                <CustomInput key={index} data-index={index} disabled={this.props.attribute.optional} type="select" id={this.props.attribute.id} onChange={this.handleLinkedNumericSign}>
+                  {Object.keys(sign_display).map(sign => {
+                    return <option key={sign} selected={filter.filterSign == sign ? true : false} value={sign}>{sign_display[sign]}</option>
+                  })}
+                </CustomInput>
+              </td>
+              <td>
+              <Input disabled={true} type="text" value={selectedLabel} size={selectedLabel.length}/>
+              </td>
+              <td>
+              <CustomInput key={index} data-index={index} disabled={this.props.attribute.optional} type="select" id={this.props.attribute.id} onChange={this.handleLinkedNumericModifierSign}>
+                {Object.keys(modifier_display).map(sign => {
+                  return <option key={sign} selected={filter.filterModifier == sign ? true : false} value={sign}>{modifier_display[sign]}</option>
+                })}
+              </CustomInput>
+              </td>
+              <td>
+                <div className="input-with-icon">
+                <Input className="input-with-icon" data-index={index} disabled={this.props.attribute.optional} type="text" id={this.props.attribute.id} value={filter.filterValue} onChange={this.handleLinkedNumericValue} placeholder={placeholder} />
+                {index == numberOfFilters ? <button className="input-with-icon"><i className="attr-icon fas fa-plus inactive" id={this.props.attribute.id} onClick={this.toggleAddNumLinkedFilter}></i></button> : <></>}
+                {index == numberOfFilters && index > 0 ? <button className="input-with-icon"><i className="attr-icon fas fa-minus inactive" id={this.props.attribute.id} onClick={this.toggleRemoveNumLinkedFilter}></i></button> : <></>}
+                </div>
+              </td>
+            </tr>
+          )
+        })}
+        </table>
+      )
+    }
+    return customParams
+  }
+
 
   render () {
     let box = null
@@ -570,5 +587,10 @@ AttributeBox.propTypes = {
   graph: PropTypes.object,
   config: PropTypes.object,
   isOnto: PropTypes.bool,
-  entityUri: PropTypes.string
+  entityUri: PropTypes.string,
+  handleLinkedNumericModifierSign: PropTypes.func,
+  handleLinkedNumericSign: PropTypes.func,
+  handleLinkedNumericValue: PropTypes.func,
+  toggleAddNumLinkedFilter: PropTypes.func,
+  toggleRemoveNumLinkedFilter: PropTypes.func
 }
diff --git a/askomics/react/src/routes/query/query.jsx b/askomics/react/src/routes/query/query.jsx
index 5cb1510e..ff88d9f2 100644
--- a/askomics/react/src/routes/query/query.jsx
+++ b/askomics/react/src/routes/query/query.jsx
@@ -382,7 +382,8 @@ export default class Query extends Component {
           nodeAttribute.filters = nodeAttribute.linkedFilters = [
             {
               filterValue: "",
-              filterSign: "="
+              filterSign: "=",
+              filterModifier: "+"
             }
           ]
         }
@@ -1198,6 +1199,71 @@ export default class Query extends Component {
     }
   }
 
+  handleLinkedNumericSign (event) {
+    this.graphState.attr.map(attr => {
+      if (attr.id == event.target.id) {
+        attr.linkedFilters.map((filter, index) => {
+          if (index == event.target.dataset.index) {
+            filter.filterSign = event.target.value
+          }
+        })
+      }
+    })
+    this.updateGraphState()
+  }
+
+  toggleAddNumLinkedFilter (event) {
+    this.graphState.attr.map(attr => {
+      if (attr.id == event.target.id) {
+        attr.linkedFilters.push({
+          filterValue: "",
+          filterSign: "=",
+          filterModifier: "+"
+        })
+      }
+    })
+    this.updateGraphState()
+  }
+
+  toggleRemoveNumLinkedFilter (event) {
+    this.graphState.attr.map(attr => {
+      if (attr.id == event.target.id) {
+        attr.linkedFilters.pop()
+      }
+    })
+    this.updateGraphState()
+  }
+
+  handleLinkedNumericModifierSign (event) {
+    if (!isNaN(event.target.value)) {
+      this.graphState.attr.map(attr => {
+        if (attr.id == event.target.id) {
+          attr.linkedFilters.map((filter, index) => {
+            if (index == event.target.dataset.index) {
+              filter.filterModifier = event.target.value
+            }
+          })
+        }
+      })
+      this.updateGraphState()
+    }
+  }
+
+  handleLinkedNumericValue (event) {
+    if (!isNaN(event.target.value)) {
+      this.graphState.attr.map(attr => {
+        if (attr.id == event.target.id) {
+          attr.linkedFilters.map((filter, index) => {
+            if (index == event.target.dataset.index) {
+              filter.filterValue = event.target.value
+            }
+          })
+        }
+      })
+      this.updateGraphState()
+    }
+  }
+
   handleDateFilter (event) {
     this.graphState.attr.map(attr => {
       if (attr.id == event.target.id) {
@@ -1252,7 +1318,11 @@ export default class Query extends Component {
         attr.linked = !attr.linked
         if (!attr.linked) {
           attr.linkedWith = null
-          attr.linkedFilters = []
+          attr.linkedFilters = [{
+            filterValue: "",
+            filterSign: "=",
+            filterModifier: "+"
+          }]
         }
       }
     })
@@ -1616,6 +1686,11 @@ export default class Query extends Component {
                 toggleAddDateFilter={p => this.toggleAddDateFilter(p)}
                 handleFilterDateValue={p => this.handleFilterDateValue(p)}
                 handleDateFilter={p => this.handleDateFilter(p)}
+                handleLinkedNumericModifierSign={p => this.handleLinkedNumericModifierSign(p)}
+                handleLinkedNumericSign={p => this.handleLinkedNumericSign(p)}
+                handleLinkedNumericValue={p => this.handleLinkedNumericValue(p)}
+                toggleAddNumLinkedFilter={p => this.toggleAddNumLinkedFilter(p)}
+                toggleRemoveNumLinkedFilter={p => this.toggleRemoveNumLinkedFilter(p)}
                 config={this.state.config}
                 isOnto={isOnto}
                 entityUri={this.currentSelected.uri}