Skip to content
GitLab
Commit 2d814533 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Fixed some DataBox related bugs

parent 4781e075
Pipeline #3753 failed with stages
in 1 minute and 15 seconds
Hide whitespace changes
Inline Side-by-side
src/vue/charts/Boxplot.vue
View file @ 2d814533
......@@ -4,12 +4,12 @@
<control-panel class="fjs-control-panel" name="Boxplot Panel">
<data-box class="fjs-data-box"
header="Numerical Variables"
dataType="numerical"
:dataTypes="['numerical']"
v-on:update="update_numData">
</data-box>
<data-box class="fjs-data-box"
header="Categorical Variables"
dataType="categorical"
:dataTypes="['categorical']"
v-on:update="update_catData">
</data-box>
<hr class="fjs-seperator"/>
......@@ -113,7 +113,7 @@
:width="boxplotWidth"
:height="boxes[label].l_qrt - boxes[label].median">
</rect>
<image :href="dataUrls[label]"
<image :xlink:href="dataUrls[label]"
:data-label="label"
:height="padded.height"
:width="boxplotWidth / 2">
......
src/vue/charts/CorrelationAnalysis.vue
View file @ 2d814533
......@@ -4,12 +4,12 @@
<control-panel class="fjs-control-panel" name="Correlation Analysis">
<data-box class="fjs-data-box"
header="Numerical Variables"
dataType="numerical,numerical_array"
:dataTypes="['numerical', 'numerical_array']"
v-on:update="update_xyData">
</data-box>
<data-box class="fjs-data-box"
header="Categorical Variables"
dataType="categorical"
:dataTypes="['categorical']"
v-on:update="update_categoryData">
</data-box>
<hr class="fjs-seperator"/>
......@@ -57,7 +57,7 @@
<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>
<image :xlink:href="dataUrl" :width="padded.width" :height="padded.height"></image>
<g class="fjs-brush" ref="brush"></g>
<text class="fjs-axis-label"
:x="padded.width / 2"
......
src/vue/charts/Heatmap.vue
View file @ 2d814533
......@@ -3,7 +3,7 @@
<control-panel class="fjs-control-panel" name="Heatmap Panel">
<data-box class="fjs-data-box"
header="Numerical Variables"
dataType="numerical_array"
:dataTypes="['numerical_array']"
v-on:update="update_numericArrayData">
</data-box>
<hr class="fjs-seperator"/>
......@@ -155,7 +155,7 @@
<svg :height="height" :width="width">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<image :href="dataUrl" :width="padded.width" :height="padded.height"></image>
<image :xlink:href="dataUrl" :width="padded.width" :height="padded.height"></image>
<rect class="fjs-sig-bar"
:x="bar.x"
:y="bar.y"
......
src/vue/charts/PCA.vue
View file @ 2d814533
......@@ -4,12 +4,12 @@
<control-panel class="fjs-control-panel" name="PCA Panel">
<data-box class="fjs-data-box"
header="Numerical Variables"
dataType="numerical,numerical_array"
:dataTypes="['numerical', 'numerical_array']"
v-on:update="update_featureData">
</data-box>
<data-box class="fjs-data-box"
header="Categorical Variables"
dataType="categorical"
:dataTypes="['categorical']"
v-on:update="update_categoryData">
</data-box>
<hr class="fjs-seperator"/>
......@@ -59,7 +59,7 @@
<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>
<image :xlink:href="dataUrls.main" :width="padded.width" :height="padded.height"></image>
<g class="fjs-brush" ref="brush"></g>
<text :x="padded.width / 2"
:y="- margin.top / 2"
......@@ -88,7 +88,7 @@
<g class="fjs-pc-distribution fjs-pc-x-distribution"
:transform="`translate(0, ${padded.height + margin.bottom / 2})`">
<line :x2="padded.width"></line>
<image :href="dataUrls.xDist"
<image :xlink:href="dataUrls.xDist"
:y="-pointSize / 2"
:width="padded.width"
:height="pointSize">
......@@ -97,7 +97,7 @@
<g class="fjs-pc-distribution fjs-pc-y-distribution"
:transform="`translate(${- margin.left / 2}, 0)`">
<line :y2="padded.height"></line>
<image :href="dataUrls.yDist"
<image :xlink:href="dataUrls.yDist"
:x="-pointSize / 2"
:width="pointSize"
:height="padded.height">
......
src/vue/components/ControlPanel.vue
View file @ 2d814533
......@@ -9,7 +9,7 @@
<span v-show="expanded">{{ name }}</span>
<i class="fjs-lock-btn material-icons" @click="toggleLock">{{ lockIcon }}</i>
</div>
<div v-show="expanded">
<div class="fjs-panel-content" v-show="expanded">
<slot/>
<hr class="fjs-seperator"/>
<task-view/>
......
src/vue/components/DataBox.vue
View file @ 2d814533
......@@ -5,10 +5,11 @@
<div class="fjs-item" v-for="item in items">
<div class="fjs-item-head">
<input type="checkbox" :value="item.task_id" v-model="checkedIds"/>
<span class="fjs-item-label"
:data-state="item.state"
@click="toggleTaskId(item.task_id)">
<input type="checkbox"
:value="item.task_id"
v-model="checkedIds"
:disabled="item.state === 'SUBMITTED'"/>
<span class="fjs-item-label" :data-state="item.state">
{{ item.label }}
</span>
<span class="fjs-item-options" @click="toggleItemBody(item.task_id)">&#9776;</span>
......@@ -33,10 +34,11 @@
<script>
import store from '../../store/store'
import 'devbridge-autocomplete'
import Autocomplete from './Autocomplete.vue'
export default {
components: {Autocomplete},
components: {
Autocomplete
},
name: 'data-box',
data () {
return {
......@@ -46,8 +48,8 @@
}
},
props: {
dataType: {
type: String,
dataTypes: {
type: Array,
required: true
},
header: {
......@@ -57,8 +59,10 @@
},
computed: {
items () {
return store.getters.data
.filter(item => ~this.dataType.split(',').map(s => s.trim()).indexOf(item.data_type))
return store.getters.data.filter(item => {
return this.dataTypes.includes(item.data_type) &&
['SUBMITTED', 'SUCCESS', 'FAILURE'].includes(item.etl_state)
})
},
transformedIDs () {
return this.checkedIds.map(id => `$${JSON.stringify({id, filters: { feature: this.featureFilter[id] }})}$`)
......@@ -72,24 +76,9 @@
this.$emit('update', newTransformedIDs)
}
}
},
'items': {
handler: function (newItems) {
const existingIDs = newItems.map(d => d.task_id)
// this removes selected IDs when they expired in the back end
this.checkedIds = this.checkedIds.filter(existingIDs.includes)
}
}
},
methods: {
toggleTaskId (taskID) {
const idx = this.checkedIds.indexOf(taskID)
if (~idx) {
this.checkedIds.splice(idx, 1)
} else {
this.checkedIds.push(taskID)
}
},
featureGetter (taskID) {
return async () => {
const metaData = await store.getters.requestManager.getMetaData(taskID)
......@@ -128,8 +117,11 @@
flex-direction: column
.fjs-item-head
display: flex
cursor: pointer
padding: 0.25vh 0 0.25vh 0.25vw
input
cursor: pointer
.fjs-item-options
cursor: pointer
.fjs-item-label
text-overflow: ellipsis
display: inline-flex
......
test/charts/multi/multi-chart.html
View file @ 2d814533
......@@ -2,8 +2,8 @@
<meta charset="UTF-8">
<head>
<script src="http://localhost:8080/credentials.js"></script>
<script src="http://localhost:8080/fractal.js"></script>
<script src="http://localhost:8082/credentials.js"></script>
<script src="http://localhost:8082/fractal.js"></script>
</head>
<body>
......@@ -81,7 +81,9 @@
function loadState () {
document.querySelector('.state-ids').value.split('+').forEach((id, i) => {
fjs.id2chart(`.copy-${i+1}`, id)
if (id.length) {
fjs.id2chart(`.copy-${i+1}`, id)
}
})
}
......@@ -107,13 +109,12 @@
<style>
.containers {
display: flex;
flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.container {
width: 200px;
height: 200px;
flex: 1;
width: 50%;
height: 50vh;
}
</style>
test/control-panel-test.js
View file @ 2d814533
......@@ -52,10 +52,10 @@ describe('ControlPanel', () => {
})
it('adapts width when expanded state changes', () => {
expect(vm.width).toBe('1vw')
expect(vm.$el.querySelector('.fjs-panel-content').style.display).toBe('none')
store.dispatch('setControlPanel', {expanded: true})
Vue.nextTick(() => {
expect(vm.width).toBe('15vw')
expect(vm.$el.querySelector('.fjs-panel-content').style.display).not.toBe('none')
})
})
......
test/data-box-test.js
View file @ 2d814533
......@@ -13,25 +13,25 @@ describe('DataBox', () => {
it('renders 3 checkboxes for 3 elements in data', () => {
store.state.data = [
{data_type: 'numeric', label: ''},
{data_type: 'numeric', label: ''},
{data_type: 'numeric', label: ''}
{data_type: 'numeric', label: '', etl_state: 'SUCCESS'},
{data_type: 'numeric', label: '', etl_state: 'SUCCESS'},
{data_type: 'numeric', label: '', etl_state: 'SUCCESS'}
]
const Component = Vue.extend(DataBox)
const propsData = {dataType: 'numeric', header: ''}
const propsData = {dataTypes: ['numeric'], header: ''}
const vm = new Component({propsData}).$mount()
expect(vm.$el.querySelectorAll('.fjs-data-entry-header').length).toBe(3)
expect(vm.$el.querySelectorAll('.fjs-item-head').length).toBe(3)
})
it('only renders checkboxes for data with correct type', () => {
store.state.data = [
{data_type: 'numeric', label: ''},
{data_type: 'categoric', label: ''}
{data_type: 'numeric', label: '', etl_state: 'SUCCESS'},
{data_type: 'categoric', label: '', etl_state: 'SUCCESS'}
]
const Component = Vue.extend(DataBox)
const propsData = {dataType: 'numeric', header: ''}
const propsData = {dataTypes: ['numeric'], header: ''}
const vm = new Component({propsData}).$mount()
expect(vm.$el.querySelectorAll('.fjs-data-entry-header').length).toBe(1)
expect(vm.$el.querySelectorAll('.fjs-item-head').length).toBe(1)
})
it('checkboxes are linked to data', () => {
......@@ -40,12 +40,26 @@ describe('DataBox', () => {
{data_type: 'numeric', label: '', task_id: 'B', etl_state: 'SUCCESS'}
]
const Component = Vue.extend(DataBox)
const propsData = {dataType: 'numeric', header: ''}
const data = {selectedIDs: ['A']}
const propsData = {dataTypes: ['numeric'], header: ''}
const data = {checkedIds: ['A']}
const vm = new Component({propsData, data}).$mount()
expect(vm.$el.querySelectorAll('.fjs-data-entry-header').length).toBe(2)
expect(vm.$el.querySelector('.fjs-data-entry-header input[data-id="A"]').checked).toBeTruthy()
expect(vm.$el.querySelector('.fjs-data-entry-header input[data-id="B"]').checked).toBeFalsy()
expect(vm.$el.querySelectorAll('.fjs-item-head').length).toBe(2)
expect(vm.$el.querySelector('.fjs-item-head input[value="A"]').checked).toBeTruthy()
expect(vm.$el.querySelector('.fjs-item-head input[value="B"]').checked).toBeFalsy()
})
it('only shows data with state SUCCESS/FAILURE/SUBMITTED', () => {
store.state.data = [
{data_type: 'numeric', label: '', task_id: 'A', etl_state: 'SUCCESS'},
{data_type: 'numeric', label: '', task_id: 'B', etl_state: 'FAILURE'},
{data_type: 'numeric', label: '', task_id: 'C', etl_state: 'SUBMITTED'},
{data_type: 'numeric', label: '', task_id: 'D', etl_state: 'PENDING'},
{data_type: 'numeric', label: '', task_id: 'E', etl_state: 'FOO'}
]
const Component = Vue.extend(DataBox)
const propsData = {dataTypes: ['numeric'], header: ''}
const vm = new Component({propsData}).$mount()
expect(vm.$el.querySelectorAll('.fjs-item-head').length).toBe(3)
})
afterAll(() => {
......
Supports Markdown
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