diff --git a/askomics/react/src/routes/form/attribute.jsx b/askomics/react/src/routes/form/attribute.jsx
index 7581a5da..edcc0550 100644
--- a/askomics/react/src/routes/form/attribute.jsx
+++ b/askomics/react/src/routes/form/attribute.jsx
@@ -30,6 +30,13 @@ 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.handleLinkedNegative = this.props.handleLinkedNegative.bind(this)
+ this.handleLinkedFilterValue = this.props.handleLinkedFilterValue.bind(this)
}
subNums (id) {
@@ -45,26 +52,57 @@ export default class AttributeBox extends Component {
renderLinker () {
let options = []
+ let optionDict = {}
+ let content
this.props.graph.nodes.map(node => {
if (!node.suggested) {
options.push(
{node.label + " " + this.subNums(node.humanId)} )
this.props.graph.attr.map(attr => {
if (attr.id != this.props.attribute.id && attr.nodeId == node.id && attr.type == this.props.attribute.type) {
- options.push(
{attr.label} )
+ options.push(
{attr.label} )
+ optionDict[attr.id] = {label: attr.label, fullLabel: node.label + " " + this.subNums(node.humanId) + " " + attr.label}
}
})
}
})
- return (
-
+ if (this.props.attribute.type == 'text') {
+ content = this.renderTextLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'decimal') {
+ content = this.renderNumericLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'category') {
+ content = this.renderBooleanLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'boolean') {
+ content = this.renderBooleanLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'date') {
+ content = this.renderNumericLinker(optionDict, "date")
+ }
+
+ let selector
+
+ if (typeof this.props.attribute.linkedWith === "object"){
+ selector = (
+
{"Link with a " + this.props.attribute.type + " attribute"}
{options.map(opt => {
return opt
})}
)
+ }
+
+
+ return (
+ <>
+ {selector}
+ {content}
+
+ )
}
checkUnvalidUri (value) {
@@ -81,22 +119,22 @@ export default class AttributeBox extends Component {
renderText () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let negativIcon = 'attr-icon fas fa-not-equal inactive'
+ let negativIcon = 'attr-icon fas fa-not-equal inactive excludeTooltip'
if (this.props.attribute.negative) {
negativIcon = 'attr-icon fas fa-not-equal'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -147,8 +185,8 @@ export default class AttributeBox extends Component {
{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}
- {this.props.attribute.uri == "rdf:type" || this.props.attribute.uri == "rdfs:label" ?
{form}
@@ -157,19 +195,19 @@ export default class AttributeBox extends Component {
renderNumeric () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
- eyeIcon = 'attr-icon fas fa-eye'
+ eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
- optionalIcon = 'attr-icon fas fa-question-circle'
+ optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
- linkIcon = 'attr-icon fas fa-link'
+ linkIcon = 'attr-icon fas fa-link'
}
let sign_display = {
@@ -216,8 +254,8 @@ export default class AttributeBox extends Component {
{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}
-
{form}
@@ -226,22 +264,22 @@ export default class AttributeBox extends Component {
renderCategory () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
- let excludeIcon = 'attr-icon fas fa-ban inactive'
+ let excludeIcon = 'attr-icon fas fa-ban inactive excludeTooltip'
if (this.props.attribute.exclude) {
excludeIcon = 'attr-icon fas fa-ban'
}
@@ -267,9 +305,9 @@ export default class AttributeBox extends Component {
{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}
-
{form}
@@ -278,17 +316,17 @@ export default class AttributeBox extends Component {
renderBoolean () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -312,8 +350,8 @@ export default class AttributeBox extends Component {
{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}
-
{form}
@@ -322,17 +360,17 @@ export default class AttributeBox extends Component {
renderDate () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -389,14 +427,149 @@ export default class AttributeBox extends Component {
{this.props.attribute.displayLabel ? this.props.attribute.displayLabel : this.props.attribute.label}
-
{form}
)
}
+ renderNumericLinker (options, type="num"){
+ const sign_display = {
+ '=': '=',
+ '<': '<',
+ '<=': '≤',
+ '>': '>',
+ '>=': '≥',
+ '!=': '≠'
+ }
+
+ const modifier_display = {
+ '+': '+',
+ '-': '-',
+ }
+ let customParams
+ const placeholder = type === "num"? "0" : "0 days"
+ const numberOfFilters = this.props.attribute.linkedFilters.length - 1
+
+ if (typeof this.props.attribute.linkedWith !== "object") {
+ let selectedLabel = options[this.props.attribute.linkedWith.toString()].label
+ let fullLabel = options[this.props.attribute.linkedWith.toString()].fullLabel
+ customParams = (
+
+ )
+ }
+ return customParams
+ }
+
+ renderTextLinker (options){
+ let selected_sign = {
+ '=': !this.props.attribute.linkedNegative,
+ "≠": this.props.attribute.linkedNegative
+ }
+
+ let customParams
+ const placeholder = "$1"
+
+ if (typeof this.props.attribute.linkedWith !== "object") {
+
+ let selectedLabel = options[this.props.attribute.linkedWith.toString()].label + " as $1"
+ let fullLabel = options[this.props.attribute.linkedWith.toString()].fullLabel
+ customParams = (
+
+ )
+ }
+ return customParams
+ }
+
+ renderBooleanLinker (options, type="num"){
+ let selected_sign = {
+ '=': !this.props.attribute.linkedNegative,
+ "≠": this.props.attribute.linkedNegative
+ }
+
+ let customParams
+ const placeholder = "$1"
+
+ if (typeof this.props.attribute.linkedWith !== "object") {
+ let selectedLabel = options[this.props.attribute.linkedWith.toString()].label
+ let fullLabel = options[this.props.attribute.linkedWith.toString()].fullLabel
+ customParams = (
+
+ )
+ }
+ return customParams
+ }
+
render () {
let box = null
@@ -437,4 +610,11 @@ AttributeBox.propTypes = {
handleDateFilter: PropTypes.func,
attribute: PropTypes.object,
graph: PropTypes.object,
+ handleLinkedNumericModifierSign: PropTypes.func,
+ handleLinkedNumericSign: PropTypes.func,
+ handleLinkedNumericValue: PropTypes.func,
+ toggleAddNumLinkedFilter: PropTypes.func,
+ toggleRemoveNumLinkedFilter: PropTypes.func,
+ handleLinkedNegative: PropTypes.func,
+ handleLinkedFilterValue: PropTypes.func
}
diff --git a/askomics/react/src/routes/form/query.jsx b/askomics/react/src/routes/form/query.jsx
index c3ce9c20..ed351125 100644
--- a/askomics/react/src/routes/form/query.jsx
+++ b/askomics/react/src/routes/form/query.jsx
@@ -5,7 +5,7 @@ import { Redirect } from 'react-router-dom'
import ErrorDiv from '../error/error'
import WaitingDiv from '../../components/waiting'
import update from 'react-addons-update'
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from 'react-tooltip'
import AttributeBox from './attribute'
import Entity from './entity'
import ResultsTable from '../sparql/resultstable'
@@ -124,6 +124,15 @@ export default class FormQuery extends Component {
this.updateGraphState()
}
+ handleLinkedNegative (event) {
+ this.graphState.attr.map(attr => {
+ if (attr.id == event.target.id) {
+ attr.linkedNegative = event.target.value == '=' ? false : true
+ }
+ })
+ this.updateGraphState()
+ }
+
handleFilterType (event) {
this.graphState.attr.map(attr => {
if (attr.id == event.target.id) {
@@ -142,6 +151,15 @@ export default class FormQuery extends Component {
this.updateGraphState()
}
+ handleLinkedFilterValue (event) {
+ this.graphState.attr.map(attr => {
+ if (attr.id == event.target.id) {
+ attr.linkedFilterValue = event.target.value
+ }
+ })
+ this.updateGraphState()
+ }
+
handleFilterCategory (event) {
this.graphState.attr.map(attr => {
if (attr.id == event.target.id) {
@@ -191,6 +209,71 @@ export default class FormQuery 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) {
@@ -276,7 +359,6 @@ export default class FormQuery extends Component {
saveIcon: "play",
waiting: waiting
})
- ReactTooltip.rebuild();
}
// Preview results and Launch query buttons -------
@@ -438,11 +520,12 @@ export default class FormQuery extends Component {
let entityMap = new Map()
let tooltips = (
- Mark attribute as a form attribute
- Link this attribute to another
- Show all values, including empty values.
- Exclude categories, instead of including
- Display attribute value in the results
+ Mark attribute as a form attribute
+ Link this attribute to another
+ Show all values, including empty values.
+ Exclude categories, instead of including
+ Display attribute value in the results
+ Regex value, with $1 as a placeholder for the linked value. Ex: $1-suffix
)
@@ -471,6 +554,13 @@ export default class FormQuery 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)}
+ handleLinkedNegative={p => this.handleLinkedNegative(p)}
+ handleLinkedFilterValue={p => this.handleLinkedFilterValue(p)}
/>
)
}
diff --git a/askomics/react/src/routes/form_edit/attribute.jsx b/askomics/react/src/routes/form_edit/attribute.jsx
index eb85d041..0d464708 100644
--- a/askomics/react/src/routes/form_edit/attribute.jsx
+++ b/askomics/react/src/routes/form_edit/attribute.jsx
@@ -30,6 +30,13 @@ 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.handleLinkedNegative = this.props.handleLinkedNegative.bind(this)
+ this.handleLinkedFilterValue = this.props.handleLinkedFilterValue.bind(this)
}
subNums (id) {
@@ -45,26 +52,56 @@ export default class AttributeBox extends Component {
renderLinker () {
let options = []
+ let optionDict = {}
+ let content
this.props.graph.nodes.map(node => {
if (!node.suggested) {
options.push({node.label + " " + this.subNums(node.humanId)} )
this.props.graph.attr.map(attr => {
if (attr.id != this.props.attribute.id && attr.nodeId == node.id && attr.type == this.props.attribute.type) {
- options.push({attr.label} )
+ options.push({attr.label} )
+ optionDict[attr.id] = {label: attr.label, fullLabel: node.label + " " + this.subNums(node.humanId) + " " + attr.label}
}
})
}
})
- return (
-
+ if (this.props.attribute.type == 'text') {
+ content = this.renderTextLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'decimal') {
+ content = this.renderNumericLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'category') {
+ content = this.renderBooleanLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'boolean') {
+ content = this.renderBooleanLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'date') {
+ content = this.renderNumericLinker(optionDict, "date")
+ }
+
+ let selector
+
+ if (typeof this.props.attribute.linkedWith === "object" && typeof this.props.attribute.linkedWith !== "object"){
+ selector = (
+
{"Link with a " + this.props.attribute.type + " attribute"}
{options.map(opt => {
return opt
})}
)
+ }
+
+ return (
+ <>
+ {selector}
+ {content}
+
+ )
}
checkUnvalidUri (value) {
@@ -81,22 +118,22 @@ export default class AttributeBox extends Component {
renderText () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let negativIcon = 'attr-icon fas fa-not-equal inactive'
+ let negativIcon = 'attr-icon fas fa-not-equal inactive excludeTooltip'
if (this.props.attribute.negative) {
negativIcon = 'attr-icon fas fa-not-equal'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -149,8 +186,8 @@ export default class AttributeBox extends Component {
@@ -159,17 +196,17 @@ export default class AttributeBox extends Component {
renderNumeric () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -218,8 +255,8 @@ export default class AttributeBox extends Component {
@@ -228,22 +265,22 @@ export default class AttributeBox extends Component {
renderCategory () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
- let excludeIcon = 'attr-icon fas fa-ban inactive'
+ let excludeIcon = 'attr-icon fas fa-ban inactive excludeTooltip'
if (this.props.attribute.exclude) {
excludeIcon = 'attr-icon fas fa-ban'
}
@@ -269,9 +306,9 @@ export default class AttributeBox extends Component {
@@ -280,17 +317,17 @@ export default class AttributeBox extends Component {
renderBoolean () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -314,8 +351,8 @@ export default class AttributeBox extends Component {
@@ -324,17 +361,17 @@ export default class AttributeBox extends Component {
renderDate () {
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -391,14 +428,147 @@ export default class AttributeBox extends Component {
)
}
+ renderNumericLinker (options, type="num"){
+ const sign_display = {
+ '=': '=',
+ '<': '<',
+ '<=': '≤',
+ '>': '>',
+ '>=': '≥',
+ '!=': '≠'
+ }
+
+ const modifier_display = {
+ '+': '+',
+ '-': '-',
+ }
+ let customParams
+ const placeholder = type === "num"? "0" : "0 days"
+ const numberOfFilters = this.props.attribute.linkedFilters.length - 1
+
+ if (typeof this.props.attribute.linkedWith !== "object") {
+ let selectedLabel = options[this.props.attribute.linkedWith.toString()].label
+ let fullLabel = options[this.props.attribute.linkedWith.toString()].fullLabel
+ customParams = (
+
+ )
+ }
+ return customParams
+ }
+
+ renderTextLinker (options){
+ let selected_sign = {
+ '=': !this.props.attribute.linkedNegative,
+ "≠": this.props.attribute.linkedNegative
+ }
+
+ let customParams
+ const placeholder = "$1"
+
+ if (typeof this.props.attribute.linkedWith !== "object") {
+ let selectedLabel = options[this.props.attribute.linkedWith.toString()].label + " as $1"
+ let fullLabel = options[this.props.attribute.linkedWith.toString()].fullLabel
+ customParams = (
+
+ )
+ }
+ return customParams
+ }
+
+ renderBooleanLinker (options, type="num"){
+ let selected_sign = {
+ '=': !this.props.attribute.linkedNegative,
+ "≠": this.props.attribute.linkedNegative
+ }
+
+ let customParams
+ const placeholder = "$1"
+
+ if (typeof this.props.attribute.linkedWith !== "object") {
+ let selectedLabel = options[this.props.attribute.linkedWith.toString()].label
+ let fullLabel = options[this.props.attribute.linkedWith.toString()].fullLabel
+ customParams = (
+
+ )
+ }
+ return customParams
+ }
render () {
let box = null
@@ -439,5 +609,12 @@ AttributeBox.propTypes = {
handleDateFilter: PropTypes.func,
attribute: PropTypes.object,
graph: PropTypes.object,
- setAttributeName: PropTypes.func
+ setAttributeName: PropTypes.func,
+ handleLinkedNumericModifierSign: PropTypes.func,
+ handleLinkedNumericSign: PropTypes.func,
+ handleLinkedNumericValue: PropTypes.func,
+ toggleAddNumLinkedFilter: PropTypes.func,
+ toggleRemoveNumLinkedFilter: PropTypes.func,
+ handleLinkedNegative: PropTypes.func,
+ handleLinkedFilterValue: PropTypes.func
}
diff --git a/askomics/react/src/routes/form_edit/query.jsx b/askomics/react/src/routes/form_edit/query.jsx
index a77207ac..7313a952 100644
--- a/askomics/react/src/routes/form_edit/query.jsx
+++ b/askomics/react/src/routes/form_edit/query.jsx
@@ -5,7 +5,7 @@ import { Redirect } from 'react-router-dom'
import ErrorDiv from '../error/error'
import WaitingDiv from '../../components/waiting'
import update from 'react-addons-update'
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from 'react-tooltip'
import AttributeBox from './attribute'
import Entity from './entity'
import ResultsTable from '../sparql/resultstable'
@@ -100,6 +100,15 @@ export default class FormEditQuery extends Component {
this.updateGraphState()
}
+ handleLinkedNegative (event) {
+ this.graphState.attr.map(attr => {
+ if (attr.id == event.target.id) {
+ attr.linkedNegative = event.target.value == '=' ? false : true
+ }
+ })
+ this.updateGraphState()
+ }
+
handleFilterType (event) {
this.graphState.attr.map(attr => {
if (attr.id == event.target.id) {
@@ -118,6 +127,15 @@ export default class FormEditQuery extends Component {
this.updateGraphState()
}
+ handleLinkedFilterValue (event) {
+ this.graphState.attr.map(attr => {
+ if (attr.id == event.target.id) {
+ attr.linkedFilterValue = event.target.value
+ }
+ })
+ this.updateGraphState()
+ }
+
handleFilterCategory (event) {
this.graphState.attr.map(attr => {
if (attr.id == event.target.id) {
@@ -167,6 +185,71 @@ export default class FormEditQuery 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) {
@@ -268,7 +351,6 @@ export default class FormEditQuery extends Component {
saveIcon: "play",
waiting: waiting
})
- ReactTooltip.rebuild();
}
// Preview results and Launch query buttons -------
@@ -389,11 +471,12 @@ export default class FormEditQuery extends Component {
let entityMap = new Map()
let tooltips = (
- Mark attribute as a form attribute
- Link this attribute to another
- Show all values, including empty values.
- Exclude categories, instead of including
- Display attribute value in the results
+ Mark attribute as a form attribute
+ Link this attribute to another
+ Show all values, including empty values.
+ Exclude categories, instead of including
+ Display attribute value in the results
+ Regex value, with $1 as a placeholder for the linked value. Ex: $1-suffix
)
@@ -423,6 +506,13 @@ export default class FormEditQuery extends Component {
handleFilterDateValue={p => this.handleFilterDateValue(p)}
handleDateFilter={p => this.handleDateFilter(p)}
setAttributeName={p => this.setAttributeName(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)}
+ handleLinkedNegative={p => this.handleLinkedNegative(p)}
+ handleLinkedFilterValue={p => this.handleLinkedFilterValue(p)}
/>
)
}
diff --git a/askomics/react/src/routes/integration/csvtable.jsx b/askomics/react/src/routes/integration/csvtable.jsx
index dddd55ba..9e4270fa 100644
--- a/askomics/react/src/routes/integration/csvtable.jsx
+++ b/askomics/react/src/routes/integration/csvtable.jsx
@@ -129,6 +129,7 @@ export default class CsvTable extends Component {
Directed
Symetric
+ Indirect
{ontoInput}
@@ -158,6 +159,7 @@ export default class CsvTable extends Component {
Directed
Symetric
+ Indirect
{ontoInput}
diff --git a/askomics/react/src/routes/overview/overview.jsx b/askomics/react/src/routes/overview/overview.jsx
new file mode 100644
index 00000000..516ec626
--- /dev/null
+++ b/askomics/react/src/routes/overview/overview.jsx
@@ -0,0 +1,403 @@
+import React, { Component } from 'react'
+import axios from 'axios'
+import { Alert, Button, CustomInput, Row, Col, ButtonGroup, Input, Spinner, ButtonToolbar } from 'reactstrap'
+import { Redirect } from 'react-router-dom'
+import ErrorDiv from '../error/error'
+import WaitingDiv from '../../components/waiting'
+import update from 'react-addons-update'
+import Utils from '../../classes/utils'
+import PropTypes from 'prop-types'
+import { ForceGraph2D, ForceGraph3D } from 'react-force-graph';
+import { SizeMe } from 'react-sizeme';
+import SpriteText from 'three-spritetext';
+import Switch from 'rc-switch';
+import "rc-switch/assets/index.css";
+
+export default class Overview extends Component {
+
+ constructor (props) {
+ super(props)
+ this.utils = new Utils()
+ this.state = {
+ abstraction: [],
+ is2D: true,
+ graphState: {
+ nodes: [],
+ links: []
+ },
+ highlightNodes: new Set(),
+ highlightLinks: new Set(),
+ hoverNode: null
+ }
+ this.cancelRequest
+ this.myRef = React.createRef();
+ this.draw2DNode = this.draw2DNode.bind(this)
+ this.onNodeHover = this.onNodeHover.bind(this)
+ this.onLinkHover = this.onLinkHover.bind(this)
+ this.getUniqueLinkId = this.getUniqueLinkId.bind(this)
+ this.changeType = this.changeType.bind(this)
+ this.zoom = this.zoom.bind(this)
+ this.zoomOut = this.zoomOut.bind(this)
+ this.focus = this.focus.bind(this)
+ this.firstRender = true
+ }
+
+ changeType(checked){
+ this.firstRender = true
+ this.setState({
+ is2D: checked
+ })
+ }
+
+ draw2DNode (node, ctx, globalScale){
+ ctx.fillStyle = node.color
+ ctx.lineWidth = 0.5
+ if (node.id == this.state.hoverNode){
+ ctx.strokeStyle = 'red'
+ ctx.lineWidth = 2;
+ } else if (this.state.highlightNodes.has(node.id)){
+ ctx.strokeStyle = 'yellow'
+ ctx.lineWidth = 2;
+ } else {
+ ctx.strokeStyle = '#808080'
+ }
+
+ ctx.globalAlpha = 1
+ // draw node
+ ctx.beginPath()
+ ctx.arc(node.x, node.y, 3, 0, 2 * Math.PI, false)
+ ctx.stroke()
+ ctx.fill()
+ ctx.closePath()
+ // draw text
+ ctx.beginPath()
+ ctx.fillStyle = '#404040'
+ ctx.font = '3px Sans-Serif'
+ ctx.textAlign = 'middle'
+ ctx.textBaseline = 'middle'
+ let label = node.name
+ ctx.fillText(label, node.x + 3, node.y + 3)
+ ctx.closePath()
+ }
+
+ getNeighbors(nodeId){
+ let links = []
+ const neighbors = this.state.abstraction.relations.filter(link => (link.source == nodeId || link.target == nodeId)).map(link => {
+ links.push(this.getUniqueLinkId(link, true))
+ if(link.source == nodeId){
+ return link.target
+ } else if (link.target == nodeId) {
+ return link.source
+ }
+ })
+ return {neighbors, links}
+ }
+
+ getLinks3D(counts){
+ let links = this.state.abstraction.relations.map(link => {
+ let curvature = 0
+ let rotation = 0
+ let key = [link.source, link.target]
+ let reverse_key = [link.target, link.source]
+ let direction = counts[key].direction
+ let current_key = counts[key].direction == 1 ? key : reverse_key
+
+ if (link.source == link.target){
+ curvature = counts[current_key].current * (1 / counts[current_key].count)
+ rotation = 0
+
+ } else if (counts[current_key].count !== 1) {
+ curvature = 0.4
+ rotation = direction * counts[current_key].current * (2* Math.PI / counts[current_key].count)
+ }
+
+ counts[current_key].current += 1
+ return {source: link.source, target: link.target, name: link.label, curvature: curvature, rotation: rotation, uri: link.uri}
+ })
+ return links
+ }
+
+
+ getLinks2D(counts){
+ let links = this.state.abstraction.relations.map(link => {
+ let curvature = 0
+ let rotation = 0
+ let key = [link.source, link.target]
+ let reverse_key = [link.target, link.source]
+ let direction = counts[key].direction
+ let current_key = counts[key].direction == 1 ? key : reverse_key
+ let step
+ let current
+
+ if (link.source == link.target){
+ curvature = direction * counts[current_key].current * (1 / counts[current_key].count)
+
+ } else if (counts[current_key].count !== 1) {
+ step = 2 / (counts[current_key].count - 1)
+ current = counts[current_key].current - 1
+ curvature = direction + (-direction) * current * step
+ }
+
+ counts[current_key].current += 1
+ return {source: link.source, target: link.target, name: link.label, curvature: curvature, rotation: rotation, uri: link.uri}
+ })
+ return links
+ }
+
+ initGraph() {
+ let nodes = this.state.abstraction.entities.map(entity => {
+ let { neighbors, links } = this.getNeighbors(entity.uri)
+ return {id: entity.uri, name: entity.label, value: 1, color: this.utils.stringToHexColor(entity.uri), neighbors: neighbors, links: links}
+ })
+
+ let counts = {}
+
+ this.state.abstraction.relations.map(link => {
+ let direction = 1
+ let currentCount = 1
+ let key = [link.source, link.target]
+ let reverse_key = [link.target, link.source]
+
+ if (counts[key]){
+ if (counts[key].direction == -1){
+ counts[reverse_key].count += 1
+ } else {
+ counts[key].count += 1
+ }
+ } else {
+ if (counts[reverse_key]){
+ direction = -1
+ counts[reverse_key].count += 1
+ }
+ counts[key] = {count: 1, current: 1, direction: direction}
+ }
+
+ })
+
+ let links
+ if (!this.state.is2D){
+ links = this.getLinks3D(counts)
+ } else {
+ links = this.getLinks2D(counts)
+ }
+
+ this.setState({
+ graphState: {nodes: nodes, links: links}
+ })
+ }
+
+ onLinkHover(link){
+ let highlightNodes = new Set();
+ let highlightLinks = new Set();
+
+ if (link) {
+ highlightLinks.add(this.getUniqueLinkId(link));
+ highlightNodes.add(link.source.id);
+ highlightNodes.add(link.target.id);
+ }
+
+ this.setState({
+ highlightNodes: highlightNodes,
+ highlightLinks: highlightLinks
+ })
+ }
+
+ onNodeHover(node) {
+ let highlightNodes = new Set();
+ let highlightLinks = new Set();
+ let hoverNode = null
+
+ if (node) {
+ highlightNodes.add(node);
+ node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
+ node.links.forEach(link => highlightLinks.add(link));
+ hoverNode = node.id
+ }
+ this.setState({
+ highlightNodes: highlightNodes,
+ highlightLinks: highlightLinks,
+ hoverNode: hoverNode
+ })
+ }
+
+ getUniqueLinkId (link, fromNode=false){
+ if(fromNode){
+ return link.uri + link.target + link.source
+ }
+ return link.uri + link.target.id + link.source.id
+ }
+
+
+ // ------------------------------------------------
+
+ componentDidMount () {
+ if (!this.props.waitForStart) {
+ let requestUrl = '/api/query/abstraction'
+ axios.get(requestUrl, { baseURL: this.props.config.proxyPath, cancelToken: new axios.CancelToken((c) => { this.cancelRequest = c }) })
+ .then(response => {
+ this.setState({
+ waiting: false,
+ abstraction: response.data.abstraction,
+ })
+ })
+ .catch(error => {
+ console.log(error, error.response.data.errorMessage)
+ this.setState({
+ error: true,
+ errorMessage: error.response.data.errorMessage,
+ status: error.response.status
+ })
+ }).then(response => {
+ this.firstRender = true
+ this.initGraph()
+ this.setState({ waiting: false })
+ })
+ }
+ }
+
+ componentWillUnmount () {
+ if (!this.props.waitForStart) {
+ this.cancelRequest()
+ }
+ }
+
+ zoom (){
+ this.firstRender && this.myRef.current.zoomToFit(1000, 80)
+ this.firstRender = false
+ }
+
+ zoomOut(){
+ if (this.state.is2D){
+ this.myRef.current.zoomToFit(1000, 80)
+ } else {
+ this.myRef.current.zoomToFit(1000, 0)
+ }
+ }
+
+ focus (node){
+ if (this.state.is2D){
+ this.myRef.current.centerAt(node.x, node.y, 2000).zoom(5,2000)
+ } else {
+ const distance = 100;
+ const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
+ this.myRef.current.cameraPosition({ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, node, 3000);
+ }
+ }
+
+ render () {
+
+ let graph
+ const highlightNodes = new Set();
+ const highlightLinks = new Set();
+ let hoverNode = null;
+
+ if (this.state.graphState.nodes.length == 0) {
+ return (
+
+
Abstraction visualization
+
No data available
+
+ )
+ }
+
+
+ if (!this.state.is2D){
+ graph = (
+ <>
+
{({ size: { width } }) => (
+ this.zoom()}
+ width={width}
+ height={650}
+ linkDirectionalArrowRelPos={1}
+ linkDirectionalArrowLength={3.5}
+ linkCurvature="curvature"
+ linkCurveRotation="rotation"
+ onNodeClick={this.focus}
+ nodeThreeObject={node => {
+ const sprite = new SpriteText(node.name);
+ sprite.color = "white";
+ sprite.position.y = 5.5;
+ sprite.textHeight = 2;
+ return sprite;
+ }}
+ nodeThreeObjectExtend={true}
+ />
+ )}
+
+
+ )
+ } else {
+ graph = (
+ <>
+
{({ size: { width } }) => (
+ this.zoom()}
+ graphData={this.state.graphState}
+ width={width}
+ height={650}
+ linkDirectionalArrowRelPos={1}
+ linkDirectionalArrowLength={3.5}
+ linkCurvature="curvature"
+ linkCurveRotation="rotation"
+ backgroundColor="Gainsboro"
+ nodeCanvasObject={this.draw2DNode}
+ onNodeHover={this.onNodeHover}
+ onLinkHover={this.onLinkHover}
+ onNodeClick={this.focus}
+ linkWidth={link => this.state.highlightLinks.has(this.getUniqueLinkId(link)) ? 5 : 1}
+ linkDirectionalParticles = {4}
+ linkDirectionalParticleWidth = {link => this.state.highlightLinks.has(this.getUniqueLinkId(link)) ? 4 : 0}
+ />
+ )}
+
+
+ )
+ }
+
+ const options = [
+ {
+ label: "2D",
+ value: "2D"
+ },
+ {
+ label: "3D",
+ value: "3D",
+ }
+ ];
+
+ return (
+
+
Abstraction visualization
+
+
+
+
+ Drag and scroll to interact with the graph. Click on a node to focus.
+
Reset zoom
+
+
+
+ {graph}
+
+
+ )
+ }
+}
+
+Overview.propTypes = {
+ waitForStart: PropTypes.bool,
+ config: PropTypes.object
+}
diff --git a/askomics/react/src/routes/query/attribute.jsx b/askomics/react/src/routes/query/attribute.jsx
index 7f37204f..0a91faa3 100644
--- a/askomics/react/src/routes/query/attribute.jsx
+++ b/askomics/react/src/routes/query/attribute.jsx
@@ -3,7 +3,6 @@ import axios from 'axios'
import { Input, FormGroup, CustomInput, FormFeedback } from 'reactstrap'
import { Redirect } from 'react-router-dom'
import DatePicker from "react-datepicker";
-import ReactTooltip from "react-tooltip";
import ErrorDiv from '../error/error'
import WaitingDiv from '../../components/waiting'
import update from 'react-addons-update'
@@ -11,6 +10,7 @@ import Visualization from './visualization'
import PropTypes from 'prop-types'
import Utils from '../../classes/utils'
import Autocomplete from '../../components/autocomplete'
+import { Tooltip } from 'react-tooltip'
export default class AttributeBox extends Component {
constructor (props) {
@@ -34,6 +34,13 @@ 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.handleLinkedNegative = this.props.handleLinkedNegative.bind(this)
+ this.handleLinkedFilterValue = this.props.handleLinkedFilterValue.bind(this)
this.cancelRequest
}
@@ -57,26 +64,49 @@ export default class AttributeBox extends Component {
renderLinker () {
let options = []
+ let optionDict = {}
+ let content
this.props.graph.nodes.map(node => {
if (!node.suggested) {
options.push(
{node.label + " " + this.subNums(node.humanId)} )
this.props.graph.attr.map(attr => {
if (attr.id != this.props.attribute.id && attr.nodeId == node.id && attr.type == this.props.attribute.type) {
- options.push(
{attr.label} )
+ options.push(
{attr.label} )
+ optionDict[attr.id] = {label: attr.label, fullLabel: node.label + " " + this.subNums(node.humanId) + " " + attr.label}
}
})
}
})
+ if (this.props.attribute.type == 'text') {
+ content = this.renderTextLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'decimal') {
+ content = this.renderNumericLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'category') {
+ content = this.renderBooleanLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'boolean') {
+ content = this.renderBooleanLinker(optionDict)
+ }
+ if (this.props.attribute.type == 'date') {
+ content = this.renderNumericLinker(optionDict, "date")
+ }
+
return (
-
- {"Link with a " + this.props.attribute.type + " attribute"}
- {options.map(opt => {
- return opt
- })}
-
- )
+ <>
+
+
+ {"Link with a " + this.props.attribute.type + " attribute"}
+ {options.map(opt => {
+ return opt
+ })}
+
+ {content}
+
+ )
}
checkUnvalidUri (value) {
@@ -93,27 +123,27 @@ export default class AttributeBox extends Component {
renderText () {
- let formIcon = 'attr-icon fas fa-bookmark inactive'
+ let formIcon = 'attr-icon fas fa-bookmark inactive formTooltip'
if (this.props.attribute.form) {
formIcon = 'attr-icon fas fa-bookmark '
}
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let negativIcon = 'attr-icon fas fa-not-equal inactive'
+ let negativIcon = 'attr-icon fas fa-not-equal inactive excludeTooltip'
if (this.props.attribute.negative) {
negativIcon = 'attr-icon fas fa-not-equal'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -138,7 +168,7 @@ export default class AttributeBox extends Component {
if (this.props.isOnto){
attrIcons = (
-
)
if (this.isRegisteredOnto() && this.props.attribute.uri == "rdfs:label"){
@@ -152,16 +182,15 @@ export default class AttributeBox extends Component {
} else {
attrIcons = (
- {this.props.config.user.admin ?
)
input = (
)
}
-
if (this.props.attribute.linked) {
form = this.renderLinker()
} else {
@@ -201,22 +230,22 @@ export default class AttributeBox extends Component {
renderNumeric () {
- let formIcon = 'attr-icon fas fa-bookmark inactive'
+ let formIcon = 'attr-icon fas fa-bookmark inactive formTooltip'
if (this.props.attribute.form) {
formIcon = 'attr-icon fas fa-bookmark '
}
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -265,10 +294,10 @@ export default class AttributeBox extends Component {
{this.props.attribute.label}
- {this.props.config.user.admin ?
{form}
@@ -277,27 +306,27 @@ export default class AttributeBox extends Component {
renderCategory () {
- let formIcon = 'attr-icon fas fa-bookmark inactive'
+ let formIcon = 'attr-icon fas fa-bookmark inactive formTooltip'
if (this.props.attribute.form) {
formIcon = 'attr-icon fas fa-bookmark '
}
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
-
- let excludeIcon = 'attr-icon fas fa-ban inactive'
+
+ let excludeIcon = 'attr-icon fas fa-ban inactive excludeTooltip'
if (this.props.attribute.exclude) {
excludeIcon = 'attr-icon fas fa-ban'
}
@@ -323,11 +352,11 @@ export default class AttributeBox extends Component {
{this.props.attribute.label}
- {this.props.config.user.admin ?
{form}
@@ -336,22 +365,22 @@ export default class AttributeBox extends Component {
renderBoolean () {
- let formIcon = 'attr-icon fas fa-bookmark inactive'
+ let formIcon = 'attr-icon fas fa-bookmark inactive formTooltip'
if (this.props.attribute.form) {
formIcon = 'attr-icon fas fa-bookmark '
}
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -375,10 +404,10 @@ export default class AttributeBox extends Component {
{this.props.attribute.label}
- {this.props.config.user.admin ?
{form}
@@ -387,22 +416,22 @@ export default class AttributeBox extends Component {
renderDate () {
- let formIcon = 'attr-icon fas fa-bookmark inactive'
+ let formIcon = 'attr-icon fas fa-bookmark inactive formTooltip'
if (this.props.attribute.form) {
formIcon = 'attr-icon fas fa-bookmark '
}
- let eyeIcon = 'attr-icon fas fa-eye-slash inactive'
+ let eyeIcon = 'attr-icon fas fa-eye-slash inactive visibleTooltip'
if (this.props.attribute.visible) {
eyeIcon = 'attr-icon fas fa-eye'
}
- let optionalIcon = 'attr-icon fas fa-question-circle inactive'
+ let optionalIcon = 'attr-icon fas fa-question-circle inactive optionalTooltip'
if (this.props.attribute.optional) {
optionalIcon = 'attr-icon fas fa-question-circle'
}
- let linkIcon = 'attr-icon fas fa-unlink inactive'
+ let linkIcon = 'attr-icon fas fa-unlink inactive linkTooltip'
if (this.props.attribute.linked) {
linkIcon = 'attr-icon fas fa-link'
}
@@ -461,14 +490,147 @@ export default class AttributeBox extends Component {
{this.props.config.user.admin ?
{form}