Commit f2185693 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Replaced querySelector with ref and fixed various small code issues

parent 2bf3d673
......@@ -13,6 +13,7 @@ const state = {
chartManager: null,
stateManager: null,
controlPanel: {
panels: [],
locked: false,
expanded: false
},
......
......@@ -37,21 +37,21 @@
<text :x="this.padded.width / 2"
class="fjs-anova-results"
v-if="Object.keys(this.results.anova).length">
ANOVA -- F-value: {{ this.results.anova.f_value.toFixed(4) }}
&nbsp p-value: {{ this.results.anova.p_value.toFixed(4) }}
ANOVA -- F-value: {{ anova.fValue }}
&nbsp p-value: {{ anova.pValue }}
</text>
<g class="fjs-boxplot-axis fjs-x-axis" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-boxplot-axis fjs-y-axis"></g>
<g class="fjs-boxplot-axis fjs-x-axis" ref="xAxis" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-boxplot-axis fjs-y-axis" ref="yAxis"></g>
<g class="fjs-box"
:transform="`translate(${scales.x(label)}, 0)`"
v-tooltip="{placement: 'bottom'}"
:title="label"
:data-label="label"
@click="setIDFilter(label)"
@mouseenter="showTooltip(label)"
@mouseleave="hideTooltip(label)"
v-for="label in labels" >
v-for="label in labels">
<line class="fjs-upper-whisker"
:ref="`${label}-upper-whisker`"
:title="results.statistics[label].u_wsk"
v-tooltip="{placement: 'right'}"
:x1="- boxplotWidth / 6"
......@@ -60,6 +60,7 @@
:y2="boxes[label].u_wsk">
</line>
<line class="fjs-lower-whisker"
:ref="`${label}-lower-whisker`"
:title="results.statistics[label].l_wsk"
v-tooltip="{placement: 'right'}"
:x1="- boxplotWidth / 6"
......@@ -68,6 +69,7 @@
:y2="boxes[label].l_wsk">
</line>
<line class="fjs-upper-quartile"
:ref="`${label}-upper-quartile`"
:title="results.statistics[label].u_qrt"
v-tooltip="{placement: 'left'}"
:x1="- boxplotWidth / 2"
......@@ -76,6 +78,7 @@
:y2="boxes[label].u_qrt">
</line>
<line class="fjs-lower-quartile"
:ref="`${label}-lower-quartile`"
:title="results.statistics[label].l_qrt"
v-tooltip="{placement: 'left'}"
:x1="- boxplotWidth / 2"
......@@ -84,6 +87,7 @@
:y2="boxes[label].l_qrt">
</line>
<line class="fjs-median"
:ref="`${label}-median`"
:title="results.statistics[label].median"
v-tooltip="{placement: 'right'}"
:x1="- boxplotWidth / 2"
......@@ -206,7 +210,7 @@
const points = {}
this.labels.forEach(label => {
let [feature, category, subset] = label.split('//')
subset = parseInt(subset.substring(1)) - 1 // revert subset string formatting
subset = parseInt(subset.substring(1)) - 1 // revert subset string formatting
points[label] = this.results.data
.filter(d => d.subset === subset &&
d.feature === feature &&
......@@ -293,6 +297,11 @@
const y = d3.axisRight(this.scales.y)
.tickSizeInner(this.padded.width)
return { x, y }
},
anova () {
let fValue = this.results.anova.f_value == null ? 'NaN' : this.results.anova.f_value.toFixed(4)
let pValue = this.results.anova.p_value == null ? 'NaN' : this.results.anova.p_value.toFixed(4)
return {pValue, fValue}
}
},
// IMPORTANT: If the code within the watchers does interact with the DOM the code should be wrapped into a $nextTick
......@@ -310,11 +319,11 @@
'axis': {
handler: function (newAxis) {
this.$nextTick(() => {
d3.select(this.$el.querySelector('.fjs-x-axis'))
d3.select(this.$refs.xAxis)
.call(newAxis.x)
.selectAll('text')
.attr('transform', 'rotate(20)')
d3.select(this.$el.querySelector('.fjs-y-axis'))
d3.select(this.$refs.yAxis)
.call(newAxis.y)
})
}
......@@ -335,11 +344,11 @@
const event = document.createEvent('Event')
event.initEvent('mouseover', true, true)
return [
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-upper-whisker`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-lower-whisker`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-upper-quartile`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-lower-quartile`),
this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-median`)
this.$refs[`${label}-upper-whisker`][0],
this.$refs[`${label}-lower-whisker`][0],
this.$refs[`${label}-upper-quartile`][0],
this.$refs[`${label}-lower-quartile`][0],
this.$refs[`${label}-median`][0]
].map(el => {
el.dispatchEvent(event)
return el._tippy
......@@ -386,9 +395,9 @@
this.$set(this.dataUrls, label, canvas.toDataURL())
})
},
resize ({height, width}) {
this.height = height
resize (width, height) {
this.width = width
this.height = height
},
runAnalysisWrapper (args) {
runAnalysis('compute-boxplot', args)
......
......@@ -52,13 +52,13 @@
</div>
</draggable>
</html2svg>
<g class="fjs-corr-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-corr-axis fjs-x-axis-2"></g>
<g class="fjs-corr-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-corr-axis fjs-y-axis-1"></g>
<g class="fjs-corr-axis" ref="yAxis2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-corr-axis" ref="xAxis2"></g>
<g class="fjs-corr-axis" ref="xAxis1" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-corr-axis" ref="yAxis1"></g>
<crosshair :width="padded.width" :height="padded.height"/>
<image :href="dataUrl" :width="padded.width" :height="padded.height"></image>
<g class="fjs-brush"></g>
<g class="fjs-brush" ref="brush"></g>
<text class="fjs-axis-label"
:x="padded.width / 2"
:y="-margin.top / 2"
......@@ -125,7 +125,7 @@
params: {
method: 'pearson'
},
shownResults: { // initially computed
shownResults: { // initially computed
coef: 0,
p_value: 0,
slope: 0,
......@@ -135,7 +135,7 @@
y_label: '',
data: []
},
tmpResults: { // on-the-fly computed
tmpResults: { // on-the-fly computed
coef: 0,
p_value: 0,
slope: 0,
......@@ -379,17 +379,17 @@
'axis': {
handler: function (newAxis) {
this.$nextTick(() => {
d3.select(this.$el.querySelector('.fjs-y-axis-2')).call(newAxis.y2)
d3.select(this.$el.querySelector('.fjs-x-axis-2')).call(newAxis.x2)
d3.select(this.$el.querySelector('.fjs-x-axis-1')).call(newAxis.x1)
d3.select(this.$el.querySelector('.fjs-y-axis-1')).call(newAxis.y1)
d3.select(this.$refs.yAxis2).call(newAxis.y2)
d3.select(this.$refs.xAxis2).call(newAxis.x2)
d3.select(this.$refs.xAxis1).call(newAxis.x1)
d3.select(this.$refs.yAxis1).call(newAxis.y1)
})
}
},
'brush': {
handler: function (newBrush) {
this.$nextTick(() => {
d3.select(this.$el.querySelector('.fjs-brush')).call(newBrush)
d3.select(this.$refs.brush).call(newBrush)
})
}
},
......@@ -442,7 +442,7 @@
})
this.dataUrl = this.canvas.toDataURL('image/png')
},
resize ({width, height}) {
resize (width, height) {
this.width = width
this.height = height
},
......
......@@ -307,7 +307,7 @@
range.push(i * this.grid.main.width)
}
range = range.concat([
(this.cols.length - 2) * this.grid.main.width, // '$padding_col$'
(this.cols.length - 2) * this.grid.main.width, // '$padding_col$'
(this.cols.length - 2) * this.grid.main.width + this.grid.padding.width // '$cluster_col$'
])
return range
......@@ -316,8 +316,8 @@
.domain(this.rows)
.range((() => {
let range = [
0, // '$cluster_row$'
this.grid.colCluster.height // '$padding_row$'
0, // '$cluster_row$'
this.grid.colCluster.height // '$padding_row$'
]
for (let i = 2; i < this.rows.length; i++) {
range.push(this.grid.colCluster.height + this.grid.padding.height + (i - 2) * this.grid.main.height)
......@@ -443,9 +443,9 @@
this.cluster.results.cols = results['col_clusters']
})
},
resize ({height, width}) {
this.height = height
resize (width, height) {
this.width = width
this.height = height
},
update_numericArrayData (ids) {
this.numericArrayDataIds = ids
......
......@@ -54,13 +54,13 @@
</div>
</draggable>
</html2svg>
<g class="fjs-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-axis fjs-x-axis-2"></g>
<g class="fjs-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-axis fjs-y-axis-1"></g>
<g class="fjs-axis" ref="yAxis2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-axis" ref="xAxis2"></g>
<g class="fjs-axis" ref="xAxis1" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-axis" ref="yAxis1"></g>
<crosshair :width="padded.width" :height="padded.height"/>
<image :href="dataUrls.main" :width="padded.width" :height="padded.height"></image>
<g class="fjs-brush"></g>
<g class="fjs-brush" ref="brush"></g>
<text :x="padded.width / 2"
:y="- margin.top / 2"
text-anchor="middle"
......@@ -330,17 +330,17 @@
'axis': {
handler: function (newAxis) {
this.$nextTick(() => {
d3.select(this.$el.querySelector('.fjs-y-axis-2')).call(newAxis.y2)
d3.select(this.$el.querySelector('.fjs-x-axis-2')).call(newAxis.x2)
d3.select(this.$el.querySelector('.fjs-x-axis-1')).call(newAxis.x1)
d3.select(this.$el.querySelector('.fjs-y-axis-1')).call(newAxis.y1)
d3.select(this.$refs.yAxis2).call(newAxis.y2)
d3.select(this.$refs.xAxis2).call(newAxis.x2)
d3.select(this.$refs.xAxis1).call(newAxis.x1)
d3.select(this.$refs.yAxis1).call(newAxis.y1)
})
}
},
'brush': {
handler: function (newBrush) {
this.$nextTick(() => {
d3.select(this.$el.querySelector('.fjs-brush')).call(newBrush)
d3.select(this.$refs.brush).call(newBrush)
})
}
},
......@@ -395,9 +395,9 @@
this.dataUrls.xDist = xCanvas.toDataURL()
this.dataUrls.yDist = yCanvas.toDataURL()
},
resize ({height, width}) {
this.height = height
resize (width, height) {
this.width = width
this.height = height
},
update_featureData (ids) {
this.featureData = ids
......
......@@ -5,24 +5,31 @@
</template>
<script>
import ResizeObserver from 'resize-observer-polyfill'
export default {
name: 'chart',
data () {
return {
observer: null
}
},
mounted () {
window.addEventListener('resize', this.resize)
this.observer = new ResizeObserver(this.resize)
this.observer.observe(this.$el)
window.addEventListener('load', this.resize)
this.resize()
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
this.observer.disconnect()
window.removeEventListener('load', this.resize)
},
methods: {
resize () {
const width = this.$parent.$el.parentNode.getBoundingClientRect().width
const height = this.$parent.$el.parentNode.getBoundingClientRect().height
const width = this.$el.getBoundingClientRect().width
const height = this.$el.getBoundingClientRect().height
const fontSize = Math.ceil((height < width ? height : width) / 50)
this.$el.style['font-size'] = fontSize + 'pt'
this.$emit('resize', {width, height})
this.$emit('resize', width, height)
},
focusControlPanel () {
const controlPanel = this.$children.find(d => d.$options.name === 'control-panel')
......
......@@ -78,14 +78,18 @@
this.focused = false
},
unfocusAll () {
Array.prototype.forEach.call(document.querySelectorAll('.fjs-control-panel'), panel => {
panel.__vue__.unFocus()
})
store.getters.controlPanel.panels.forEach(panel => panel.unFocus())
}
},
mounted () {
this.unfocusAll()
this.focused = true
const panels = [...store.getters.controlPanel.panels, this]
store.dispatch('setControlPanel', {panels})
},
beforeDestroy () {
const panels = store.getters.controlPanel.panels.filter(panel => panel._uid !== this._uid)
store.dispatch('setControlPanel', {panels})
},
components: {
TaskView
......
......@@ -18,7 +18,10 @@
<span class="fjs-options" @click="toggleDataEntryBody(item.task_id)">&#9776;</span>
</div>
<div class="fjs-data-entry-body" :data-state="item.etl_state" :data-id="item.task_id">
<div class="fjs-data-entry-body"
ref="${item.task_id}-data-entry-body"
:data-state="item.etl_state"
:data-id="item.task_id">
<div class="fjs-action-btns">
<span class="fjs-reload-btn" @click="reloadData(item.task_id)">&#8635;</span>
<span class="fjs-delete-btn" @click="deleteData(item.task_id)">&#215;</span>
......@@ -105,7 +108,7 @@
}
},
toggleDataEntryBody (taskID) {
const $body = $(this.$el.querySelector(`.fjs-data-entry-body[data-id="${taskID}"]`))
const $body = $(this.$refs[`${taskID}-data-entry-body`])
$body.slideToggle(500)
},
reloadData (taskID) {
......
......@@ -84,11 +84,11 @@
}
vm.$el.appendChild(this.$refs.htmlContent)
this.$nextTick(this.setPosition)
window.addEventListener('scroll', this.setPosition)
window.addEventListener('scroll', this.setPosition, true)
},
beforeDestroy () {
this.$refs.htmlContent.remove()
window.removeEventListener('scroll', this.setPosition)
window.removeEventListener('scroll', this.setPosition, true)
}
}
</script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment