-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #177 from FederatedAI/develop-2.1.0
Develop 2.1.0
- Loading branch information
Showing
45 changed files
with
520 additions
and
465 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
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
310 changes: 155 additions & 155 deletions
310
resources-front-end/packages/fate-board/src/views/detail/Information/DataOutput.vue
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 |
|---|---|---|
| @@ -1,155 +1,155 @@ | ||
| <template> | ||
| <section class="f-info-data-container"> | ||
| <section class="f-info-data-header"> | ||
| <article class="f-info-data-title"> | ||
| Outputting {{ dataTotal[selected ? Number(selected) || 0 : 0] }} instance | ||
| <span>(only 100 instance are shown in the table)</span> | ||
| </article> | ||
| <FSelection | ||
| v-if="selections.length > 1" | ||
| v-model="selected" | ||
| :options="selections" | ||
| class="f-info-data-selection" | ||
| ></FSelection> | ||
| </section> | ||
| <section class="f-info-data-body" :key="refresh"> | ||
| <FTable | ||
| :header="dataTableHeader[selected ? Number(selected) || 0 : 0] || []" | ||
| :data="dataTableData[selected ? Number(selected) || 0 : 0] || []" | ||
| :column="true" | ||
| :index="true" | ||
| class="f-info-data-table" | ||
| ></FTable> | ||
| </section> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { onMounted, ref, watch } from 'vue'; | ||
| import { useStore } from 'vuex'; | ||
| const store = useStore(); | ||
| const selections = ref<any>([]); | ||
| const selected = ref(selections.value[0] ? selections.value[0].value : ''); | ||
| const dataTableHeader = ref<any>([]); | ||
| const dataTableData = ref<any>([]); | ||
| const dataTotal = ref([]) | ||
| const refresh = ref(0) | ||
| const dataRequest = async () => { | ||
| try { | ||
| const response = await store.dispatch('dataOutput'); | ||
| const { output_data } = response; | ||
| const options: any = []; | ||
| const tableHeader: any = []; | ||
| const tableData: any = []; | ||
| const total: any = [] | ||
| if (output_data) { | ||
| for (let i = 0; i < output_data.length; i++) { | ||
| const each = output_data[i]; | ||
| const { data, metadata } = each; | ||
| const { anonymous_summary, fields } = metadata.schema_meta; | ||
| options.push({ | ||
| label: anonymous_summary.site_name, | ||
| value: i, | ||
| }); | ||
| tableHeader.push( | ||
| (() => { | ||
| const list: any = []; | ||
| for (const item of fields) { | ||
| list.push({ | ||
| label: item.name, | ||
| prop: item.name, | ||
| }); | ||
| } | ||
| return list; | ||
| })() | ||
| ); | ||
| tableData.push( | ||
| (() => { | ||
| const header = tableHeader[tableHeader.length - 1]; | ||
| const list: any = []; | ||
| for (const item of data) { | ||
| const row: any = {}; | ||
| for (let j = 0; j < header.length; j++) { | ||
| row[header[j].prop] = item[j]; | ||
| } | ||
| list.push(row); | ||
| } | ||
| return list; | ||
| })() | ||
| ); | ||
| total.push(tableData[tableData.length - 1].length) | ||
| } | ||
| } | ||
| selections.value = options; | ||
| dataTableHeader.value = tableHeader; | ||
| dataTableData.value = tableData; | ||
| dataTotal.value = total | ||
| } catch(err) { | ||
| dataTableHeader.value = [] | ||
| dataTableData.value = [] | ||
| dataTotal.value = [] | ||
| } | ||
| refresh.value ++ | ||
| }; | ||
| watch( | ||
| () => selections.value, | ||
| () => { | ||
| selected.value = selections.value[0] ? selections.value[0].value : ''; | ||
| }, | ||
| { deep: true } | ||
| ); | ||
| watch( | ||
| () => store.state.comp.information, | ||
| () => { | ||
| dataRequest() | ||
| }, | ||
| { deep: true } | ||
| ) | ||
| onMounted(async () => { | ||
| await dataRequest(); | ||
| }); | ||
| const refreshing = () => { | ||
| dataRequest() | ||
| } | ||
| defineExpose({ | ||
| refresh: refreshing | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import '@/style/index.scss'; | ||
| .f-info-data-container { | ||
| @include box-stretch(); | ||
| @include flex-col(); | ||
| align-items: flex-start; | ||
| justify-content: flex-start; | ||
| .f-info-data-header { | ||
| width: 100%; | ||
| flex: 0 0 45px; | ||
| @include flex-row(); | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin-bottom: $pale; | ||
| } | ||
| .f-info-data-body { | ||
| position: relative; | ||
| width: 100%; | ||
| height: calc(100% - 45px); | ||
| flex: 1 1 auto; | ||
| overflow: hidden; | ||
| .f-info-data-table { | ||
| @include box-stretch(); | ||
| } | ||
| } | ||
| } | ||
| </style> | ||
| <template> | ||
| <section class="f-info-data-container"> | ||
| <section class="f-info-data-header"> | ||
| <article class="f-info-data-title"> | ||
| Outputting {{ dataTotal[selected ? Number(selected) || 0 : 0] }} instance | ||
| <span>(only 100 instance are shown in the table)</span> | ||
| </article> | ||
| <FSelection | ||
| v-if="selections.length > 1" | ||
| v-model="selected" | ||
| :options="selections" | ||
| class="f-info-data-selection" | ||
| ></FSelection> | ||
| </section> | ||
| <section class="f-info-data-body" :key="refresh"> | ||
| <FTable | ||
| :header="dataTableHeader[selected ? Number(selected) || 0 : 0] || []" | ||
| :data="dataTableData[selected ? Number(selected) || 0 : 0] || []" | ||
| :column="true" | ||
| :index="true" | ||
| class="f-info-data-table" | ||
| ></FTable> | ||
| </section> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { onMounted, ref, watch } from 'vue'; | ||
| import { useStore } from 'vuex'; | ||
| const store = useStore(); | ||
| const selections = ref<any>([]); | ||
| const selected = ref(selections.value[0] ? selections.value[0].value : ''); | ||
| const dataTableHeader = ref<any>([]); | ||
| const dataTableData = ref<any>([]); | ||
| const dataTotal = ref([]) | ||
| const refresh = ref(0) | ||
| const dataRequest = async () => { | ||
| try { | ||
| const response = await store.dispatch('dataOutput'); | ||
| const { output_data } = response; | ||
| const options: any = []; | ||
| const tableHeader: any = []; | ||
| const tableData: any = []; | ||
| const total: any = [] | ||
| if (output_data) { | ||
| for (let i = 0; i < output_data.length; i++) { | ||
| const each = output_data[i]; | ||
| const { data, metadata } = each; | ||
| const { anonymous_summary, fields } = metadata.schema_meta; | ||
| options.push({ | ||
| label: anonymous_summary.site_name, | ||
| value: i, | ||
| }); | ||
| tableHeader.push( | ||
| (() => { | ||
| const list: any = []; | ||
| for (const item of fields) { | ||
| list.push({ | ||
| label: item.name, | ||
| prop: item.name, | ||
| }); | ||
| } | ||
| return list; | ||
| })() | ||
| ); | ||
| tableData.push( | ||
| (() => { | ||
| const header = tableHeader[tableHeader.length - 1]; | ||
| const list: any = []; | ||
| for (const item of data) { | ||
| const row: any = {}; | ||
| for (let j = 0; j < header.length; j++) { | ||
| row[header[j].prop] = item[j]; | ||
| } | ||
| list.push(row); | ||
| } | ||
| return list; | ||
| })() | ||
| ); | ||
| total.push(each.total) | ||
| } | ||
| } | ||
| selections.value = options; | ||
| dataTableHeader.value = tableHeader; | ||
| dataTableData.value = tableData; | ||
| dataTotal.value = total | ||
| } catch(err) { | ||
| dataTableHeader.value = [] | ||
| dataTableData.value = [] | ||
| dataTotal.value = [] | ||
| } | ||
| refresh.value ++ | ||
| }; | ||
| watch( | ||
| () => selections.value, | ||
| () => { | ||
| selected.value = selections.value[0] ? selections.value[0].value : ''; | ||
| }, | ||
| { deep: true } | ||
| ); | ||
| watch( | ||
| () => store.state.comp.information, | ||
| () => { | ||
| dataRequest() | ||
| }, | ||
| { deep: true } | ||
| ) | ||
| onMounted(async () => { | ||
| await dataRequest(); | ||
| }); | ||
| const refreshing = () => { | ||
| dataRequest() | ||
| } | ||
| defineExpose({ | ||
| refresh: refreshing | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import '@/style/index.scss'; | ||
| .f-info-data-container { | ||
| @include box-stretch(); | ||
| @include flex-col(); | ||
| align-items: flex-start; | ||
| justify-content: flex-start; | ||
| .f-info-data-header { | ||
| width: 100%; | ||
| flex: 0 0 45px; | ||
| @include flex-row(); | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin-bottom: $pale; | ||
| } | ||
| .f-info-data-body { | ||
| position: relative; | ||
| width: 100%; | ||
| height: calc(100% - 45px); | ||
| flex: 1 1 auto; | ||
| overflow: hidden; | ||
| .f-info-data-table { | ||
| @include box-stretch(); | ||
| } | ||
| } | ||
| } | ||
| </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
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
Oops, something went wrong.