-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' of github.com:Duke-MatSci/materialsmine into #…
…156_Update_ICO
- Loading branch information
Showing
11 changed files
with
296 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <template> | ||
| <div> | ||
| <div :id="containerId" :ref="containerId"></div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { CreateVoyager } from 'datavoyager' | ||
| const voyagerConf = { | ||
| showDataSourceSelector: false, | ||
| hideHeader: true, | ||
| hideFooter: true | ||
| } | ||
| export default { | ||
| name: 'DataVoyager', | ||
| data () { | ||
| return { | ||
| containerId: 'voyager-embed' | ||
| } | ||
| }, | ||
| props: { | ||
| data: { | ||
| type: Object, | ||
| default: () => null | ||
| }, | ||
| spec: { | ||
| type: Object, | ||
| default: () => null | ||
| } | ||
| }, | ||
| methods: { | ||
| updateSpec () { | ||
| this.$emit('update:spec', this.voyagerInstance.getSpec()) | ||
| }, | ||
| createVoyager () { | ||
| const container = this.$refs[this.containerId] | ||
| this.voyagerInstance = CreateVoyager(container, voyagerConf, undefined) | ||
| this.voyagerInstance.onStateChange(() => this.updateSpec()) | ||
| this.voyagerInstance.updateData(this.data) | ||
| } | ||
| }, | ||
| watch: { | ||
| data () { | ||
| this.createVoyager() | ||
| } | ||
| }, | ||
| mounted () { | ||
| this.createVoyager() | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style css src='datavoyager/build/style.css'> | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <template src="./data-voyager-page.html"></template> | ||
| <script src="./data-voyager-page.js"></script> |
64 changes: 64 additions & 0 deletions
64
app/src/pages/explorer/chart/datavoyager/data-voyager-page.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <div class="datavoyager"> | ||
| <div class="utility-content__result"> | ||
| <div | ||
| class="utility-gridicon" | ||
| v-if="!loading" | ||
| > | ||
| <div> | ||
| <md-button | ||
| class="md-icon-button" | ||
| @click.native.prevent="navBack" | ||
| > | ||
| <md-tooltip md-direction="bottom"> | ||
| Return to chart view | ||
| </md-tooltip> | ||
| <md-icon>arrow_back</md-icon> | ||
| </md-button> | ||
| <!-- TODO: Enable save button for new chart creation --> | ||
| <md-button | ||
| class="md-icon-button" | ||
| @click.native.prevent="saveAsChart" | ||
| v-if="!isNewChart && voyagerSpec" | ||
| disabled | ||
| > | ||
| <md-tooltip md-direction="bottom"> | ||
| Save current spec as new chart | ||
| </md-tooltip> | ||
| <md-icon>save</md-icon> | ||
| </md-button> | ||
| <!-- TODO: Enable select button for new chart editing --> | ||
| <md-button | ||
| class="md-icon-button" | ||
| @click.native.prevent="selectSpec" | ||
| v-if="isNewChart && voyagerSpec" | ||
| > | ||
| <md-tooltip md-direction="bottom"> | ||
| Select current spec and return to Viz Editor | ||
| </md-tooltip> | ||
| <md-icon>check</md-icon> | ||
| </md-button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="viz-sample__header viz-u-mgbottom"> | ||
| <span class="datavoyager-title">Data Voyager</span> | ||
| <span v-if="!isNewChart && chart && chart.title">: {{chart.title}}</span> | ||
| </div> | ||
| <div | ||
| class="loading-dialog" | ||
| style="margin: auto" | ||
| v-if="loading" | ||
| > | ||
| <spinner :loading="loading" /> | ||
| </div> | ||
| <div | ||
| class="loading-dialog" | ||
| style="margin: auto" | ||
| v-else | ||
| > | ||
| <data-voyager | ||
| :data="data" | ||
| :spec.sync="voyagerSpec" | ||
| ></data-voyager> | ||
| </div> | ||
| </div> |
71 changes: 71 additions & 0 deletions
71
app/src/pages/explorer/chart/datavoyager/data-voyager-page.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { mapGetters, mapActions, mapMutations } from 'vuex' | ||
| // import { | ||
| // copyChart, | ||
| // saveChart | ||
| // } from "@/modules/vega-chart"; | ||
| import { toChartUri } from '@/modules/vega-chart' | ||
| import { querySparql, parseSparql } from '@/modules/sparql' | ||
| import DataVoyager from '@/components/explorer/DataVoyager' | ||
| import spinner from '@/components/Spinner' | ||
|
|
||
| export default { | ||
| data () { | ||
| return { | ||
| loading: true, | ||
| voyagerSpec: null, | ||
| specJsonEditorOpts: { | ||
| mode: 'code', | ||
| mainMenuBar: false | ||
| } | ||
| } | ||
| }, | ||
| props: ['chartId'], | ||
| components: { | ||
| DataVoyager, | ||
| spinner | ||
| }, | ||
| computed: { | ||
| ...mapGetters('vega', ['chart']), | ||
| isNewChart () { | ||
| // TODO: Add ability to create new charts from datavoyager once new chart pipeline is set up | ||
| return false | ||
| } | ||
| }, | ||
| methods: { | ||
| ...mapActions('vega', ['loadChart']), | ||
| ...mapMutations('vega', ['setBaseSpec']), | ||
| async loadData () { | ||
| this.loading = true | ||
| if (!this.isNewChart) { | ||
| await this.loadChart(toChartUri(this.chartId)) | ||
| } | ||
| const sparqlResults = await querySparql(this.chart.query) | ||
| this.data = { values: parseSparql(sparqlResults) } | ||
| this.loading = false | ||
| }, | ||
| saveAsChart () { | ||
| // TODO: add once pipeline for creating new charts is set up | ||
| }, | ||
| selectSpec () { | ||
| // //TODO: Will be called from saveAsChart | ||
| // this.setBaseSpec(this.voyagerSpec) | ||
| // this.goToChartEditor() | ||
| }, | ||
| goToChartView () { | ||
| this.$router.push(`/explorer/chart/view/${this.chartId}`) | ||
| }, | ||
| goToChartEditor () { | ||
| // TODO: Link to chart editor once exists | ||
| }, | ||
| navBack () { | ||
| if (this.isNewChart) { | ||
| this.goToChartEditor() | ||
| } else { | ||
| this.goToChartView() | ||
| } | ||
| } | ||
| }, | ||
| mounted () { | ||
| this.loadData() | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import createWrapper from '../../../jest/script/wrapper' | ||
| import { enableAutoDestroy } from '@vue/test-utils' | ||
|
|
||
| import DataVoyager from '@/components/explorer/DataVoyager.vue' | ||
|
|
||
| describe('DataVoyager.vue', () => { | ||
| // Suppress console specifically for Data Voyager tests, not globally | ||
| beforeEach(() => { | ||
| jest.spyOn(console, 'debug').mockImplementation(() => {}) | ||
| jest.spyOn(console, 'warn').mockImplementation(() => {}) | ||
| }) | ||
|
|
||
| enableAutoDestroy(afterEach) | ||
|
|
||
| it('renders datavoyager in correct place', () => { | ||
| const wrapper = createWrapper(DataVoyager, {}, false) | ||
| const dvComponent = wrapper.findComponent('#voyager-embed > .voyager') | ||
| expect(dvComponent.exists()).toBeTruthy() | ||
| }) | ||
| it('displays field names when passed data', async () => { | ||
| const wrapper = await createWrapper(DataVoyager, { props: { data } }, true) | ||
| await wrapper.vm.$nextTick() // Render data | ||
| expect(wrapper.text()).toContain('qualFieldTest') | ||
| expect(wrapper.text()).toContain('quantFieldTest') | ||
| }) | ||
| it('displays data panel containing fields when passed data', async () => { | ||
| const wrapper = await createWrapper(DataVoyager, { props: { data } }, true) | ||
| await wrapper.vm.$nextTick() // Render data | ||
| const dataPanel = wrapper.findComponent('.Pane1') | ||
| expect(dataPanel.exists()).toBeTruthy() | ||
| expect(dataPanel.text()).toContain('Data') | ||
| expect(dataPanel.text()).toContain('qualFieldTest') | ||
| expect(dataPanel.text()).toContain('quantFieldTest') | ||
| }) | ||
| it('displays encoding panel when passed data', async () => { | ||
| const wrapper = await createWrapper(DataVoyager, { props: { data } }, true) | ||
| await wrapper.vm.$nextTick() // Render data | ||
| const encodingPanel = wrapper.findComponent('.Pane2') | ||
| expect(encodingPanel.exists()).toBeTruthy() | ||
| expect(encodingPanel.text()).toContain('Encoding') | ||
| }) | ||
| it('generates at least one example chart from data', async () => { | ||
| const wrapper = await createWrapper(DataVoyager, { props: { data } }, true) | ||
| await wrapper.vm.$nextTick() // Render data | ||
| const exampleChart = wrapper.findComponent('.chart') | ||
| expect(exampleChart.exists()).toBeTruthy() | ||
| }) | ||
| }) | ||
|
|
||
| const data = { | ||
| values: [ | ||
| { | ||
| qualFieldTest: 'ABC', | ||
| quantFieldTest: 123 | ||
| }, | ||
| { | ||
| qualFieldTest: 'DEF', | ||
| quantFieldTest: 456 | ||
| }, | ||
| { | ||
| qualFieldTest: 'GHI', | ||
| quantFieldTest: 789 | ||
| } | ||
| ] | ||
| } |