Fix form issue with label & uris (#256)

* Fix form
askomics · Jul 13, 2021 · 65298b7 · 65298b7
1 parent a350e98
commit 65298b7
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 30 deletions.
diff --git a/askomics/react/src/routes/form/attribute.jsx b/askomics/react/src/routes/form/attribute.jsx
@@ -32,6 +32,17 @@ export default class AttributeBox extends Component {
     this.handleDateFilter = this.props.handleDateFilter.bind(this)
   }
 
+  subNums (id) {
+    let newStr = ""
+    let oldStr = id.toString()
+    let arrayString = [...oldStr]
+    arrayString.forEach(char => {
+      let code = char.charCodeAt()
+      newStr += String.fromCharCode(code + 8272)
+    })
+    return newStr
+  }
+
   renderLinker () {
     let options = []
 
@@ -110,9 +121,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label">{this.props.attribute.displayLabel}</label>
+        <label className="attr-label">{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}</label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
         {form}
@@ -186,9 +196,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label">{this.props.attribute.displayLabel}</label>
+        <label className="attr-label">{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}</label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           {this.props.attribute.uri == "rdf:type" || this.props.attribute.uri == "rdfs:label" ? <nodiv></nodiv> : <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i> }
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
@@ -256,9 +265,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label">{this.props.attribute.displayLabel}</label>
+        <label className="attr-label">{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}</label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
@@ -308,9 +316,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label">{this.props.attribute.displayLabel}</label>
-        <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
+        <label className="attr-label">{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}</label>
+        <div className="attr-icons">          
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={excludeIcon} id={this.props.attribute.id} onClick={this.toggleExclude}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
@@ -354,9 +361,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label">{this.props.attribute.displayLabel}</label>
+        <label className="attr-label">{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}</label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
@@ -432,9 +438,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label">{this.props.attribute.displayLabel}</label>
+        <label className="attr-label">{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}</label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>

diff --git a/askomics/react/src/routes/form/query.jsx b/askomics/react/src/routes/form/query.jsx
@@ -383,7 +383,6 @@ export default class FormQuery extends Component {
           })
         }).then(response => {
           this.graphState = this.props.location.state.graphState
-          console.log(this.props.location.state.graphState)
           this.updateGraphState()
           this.setState({ waiting: false })
         })
@@ -440,7 +439,7 @@ export default class FormQuery extends Component {
       this.state.graphState.attr.forEach(attribute => {
         if (attribute.form) {
           if (! entityMap.has(attribute.nodeId)){
-            entityMap.set(attribute.nodeId, {entity_label: attribute.entityDisplayLabel, attributes:[]})
+            entityMap.set(attribute.nodeId, {entity_label: attribute.entityDisplayLabel ? attribute.entityDisplayLabel : attribute.entityLabel, attributes:[]})
           }
           entityMap.get(attribute.nodeId).attributes.push(
             <AttributeBox

diff --git a/askomics/react/src/routes/form_edit/attribute.jsx b/askomics/react/src/routes/form_edit/attribute.jsx
@@ -32,6 +32,17 @@ export default class AttributeBox extends Component {
     this.handleDateFilter = this.props.handleDateFilter.bind(this)
   }
 
+  subNums (id) {
+    let newStr = ""
+    let oldStr = id.toString()
+    let arrayString = [...oldStr]
+    arrayString.forEach(char => {
+      let code = char.charCodeAt()
+      newStr += String.fromCharCode(code + 8272)
+    })
+    return newStr
+  }
+
   renderLinker () {
     let options = []
 
@@ -110,9 +121,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel} value={this.props.attribute.displayLabel} onChange={this.props.setAttributeName} /></label>
+        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} value={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} onChange={this.props.setAttributeName} /></label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
         {form}
@@ -188,9 +198,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel} value={this.props.attribute.displayLabel} onChange={this.props.setAttributeName} /></label>
+        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} value={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} onChange={this.props.setAttributeName} /></label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           {this.props.attribute.uri == "rdf:type" || this.props.attribute.uri == "rdfs:label" ? <nodiv></nodiv> : <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i> }
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
@@ -258,9 +267,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel} value={this.props.attribute.displayLabel} onChange={this.props.setAttributeName} /></label>
+        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} value={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} onChange={this.props.setAttributeName} /></label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
@@ -310,9 +318,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel} value={this.props.attribute.displayLabel} onChange={this.props.setAttributeName} /></label>
+        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} value={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} onChange={this.props.setAttributeName} /></label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={excludeIcon} id={this.props.attribute.id} onClick={this.toggleExclude}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
@@ -356,9 +363,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel} value={this.props.attribute.displayLabel} onChange={this.props.setAttributeName} /></label>
+        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} value={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} onChange={this.props.setAttributeName} /></label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>
@@ -434,9 +440,8 @@ export default class AttributeBox extends Component {
 
     return (
       <div className="attribute-box">
-        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel} value={this.props.attribute.displayLabel} onChange={this.props.setAttributeName} /></label>
+        <label className="attr-label"><Input type="text" id={this.props.attribute.id} placeholder={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} value={this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label} onChange={this.props.setAttributeName} /></label>
         <div className="attr-icons">
-          <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={optionalIcon} id={this.props.attribute.id} onClick={this.toggleOptional}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>

diff --git a/askomics/react/src/routes/form_edit/query.jsx b/askomics/react/src/routes/form_edit/query.jsx
@@ -390,7 +390,7 @@ export default class FormEditQuery extends Component {
       this.state.graphState.attr.forEach(attribute => {
         if (attribute.form) {
           if (! entityMap.has(attribute.nodeId)){
-            entityMap.set(attribute.nodeId, {entity_label: attribute.entityDisplayLabel, attributes:[]})
+            entityMap.set(attribute.nodeId, {entity_label: attribute.entityDisplayLabel ? attribute.entityDisplayLabel : attribute.entityLabel, attributes:[]})
           }
           entityMap.get(attribute.nodeId).attributes.push(
             <AttributeBox
@@ -445,7 +445,7 @@ export default class FormEditQuery extends Component {
     return (
       <div className="container">
         {redirectLogin}
-        <h2>Query Builder</h2>
+        <h2>Form editor</h2>
         <hr />
         <WaitingDiv waiting={this.state.waiting} center />
         <br />

diff --git a/askomics/react/src/routes/query/attribute.jsx b/askomics/react/src/routes/query/attribute.jsx
@@ -131,7 +131,7 @@ export default class AttributeBox extends Component {
       <div className="attribute-box">
         <label className="attr-label">{this.props.attribute.label}</label>
         <div className="attr-icons">
-          {this.props.config.user.admin ? <i className={formIcon} id={this.props.attribute.id} onClick={this.toggleFormAttribute}></i> : <nodiv></nodiv>} : <nodiv></nodiv>}
+          {this.props.config.user.admin ? <i className={formIcon} id={this.props.attribute.id} onClick={this.toggleFormAttribute}></i> : <nodiv></nodiv>}
           <i className={linkIcon} id={this.props.attribute.id} onClick={this.toggleLinkAttribute}></i>
           <i className={eyeIcon} id={this.props.attribute.id} onClick={this.toggleVisibility}></i>
         </div>

diff --git a/askomics/react/src/routes/query/query.jsx b/askomics/react/src/routes/query/query.jsx
@@ -255,7 +255,9 @@ export default class Query extends Component {
         humanNodeId: this.getHumanIdFromId(nodeId),
         uri: 'rdf:type',
         label: 'Uri',
+        displayLabel: 'Uri',
         entityLabel: this.getLabel(nodeUri),
+        entityDisplayLabel: this.getLabel(nodeUri),
         entityUris: [nodeUri, ],
         type: 'uri',
         faldo: false,
@@ -278,7 +280,9 @@ export default class Query extends Component {
         humanNodeId: this.getHumanIdFromId(nodeId),
         uri: 'rdfs:label',
         label: 'Label',
+        displayLabel: 'Label',
         entityLabel: this.getLabel(nodeUri),
+        entityDisplayLabel: this.getLabel(nodeUri),
         entityUris: [nodeUri, ],
         type: 'text',
         faldo: false,