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