This is an automated email from the ASF dual-hosted git repository.
lauraxia pushed a commit to branch kylin5
in repository https://gitbox.apache.org/repos/asf/kylin.git
The following commit(s) were added to refs/heads/kylin5 by this push:
new 2067e8d641 KYLIN-5682 er graph column pagination issue
2067e8d641 is described below
commit 2067e8d6413002234fd171edfccaea7cbc92cd3b
Author: Qian Xia <[email protected]>
AuthorDate: Wed Aug 9 17:46:01 2023 +0800
KYLIN-5682 er graph column pagination issue
---
kystudio/src/canvas/ModelTable/ModelTable.vue | 2 +-
.../common/ModelERDiagram/ModelERDiagram.vue | 36 +++++++++++++++++-----
.../components/common/ModelERDiagram/handler.js | 2 +-
.../studio/StudioModel/ModelEdit/index.vue | 10 +++---
.../studio/StudioModel/ModelEdit/table.js | 1 +
.../ModelList/ModelOverview/ModelOverview.vue | 12 ++++----
kystudio/src/util/dataGenerator.js | 32 ++++++++++---------
7 files changed, 60 insertions(+), 35 deletions(-)
diff --git a/kystudio/src/canvas/ModelTable/ModelTable.vue
b/kystudio/src/canvas/ModelTable/ModelTable.vue
index 6b929a9765..585c4721a6 100644
--- a/kystudio/src/canvas/ModelTable/ModelTable.vue
+++ b/kystudio/src/canvas/ModelTable/ModelTable.vue
@@ -3,7 +3,7 @@
<TableHeader
:width="width"
:table-alias="table.alias"
- :is-fact-table="table.type === 'FACT'"
+ :is-fact-table="table.kind === 'FACT'"
/>
</v-group>
</template>
diff --git a/kystudio/src/components/common/ModelERDiagram/ModelERDiagram.vue
b/kystudio/src/components/common/ModelERDiagram/ModelERDiagram.vue
index f978fa52d9..aee24c5ca9 100644
--- a/kystudio/src/components/common/ModelERDiagram/ModelERDiagram.vue
+++ b/kystudio/src/components/common/ModelERDiagram/ModelERDiagram.vue
@@ -2,11 +2,11 @@
<div :class="['model-er-diagram', {'is-full-screen': isFullScreen}]"
v-drag="{sizeChangeCb:dragBox}" v-loading="loadingER">
<el-alert class="alertChangeER" :title="$t('changeERTips')" type="warning"
show-icon :closable="false" v-if="changeER && showChangeAlert"></el-alert>
<div class="er-layout" ref="el-draw-layout" v-if="currentModel"
:style="getErLayoutStyle">
- <div :class="['table-box', {'is-lookup': t.type !== 'FACT'}]"
:id="t.guid" v-for="t in currentModel.tables" :key="t.guid"
:style="getTableStyles(t)">
+ <div :class="['table-box', {'is-lookup': t.kind !== 'FACT'}]"
:id="t.guid" v-for="t in modelData.tables" :key="t.guid"
:style="getTableStyles(t)">
<div :class="['table-title', {'table-spread-out': !t.spreadOut}]"
@dblclick="handleDBClick(t)">
<span class="table-sign">
- <el-tooltip :content="$t(t.type)" placement="top">
- <i class="el-ksd-n-icon-symbol-f-filled kind" v-if="t.type ===
'FACT'"></i>
+ <el-tooltip :content="$t(t.kind)" placement="top">
+ <i class="el-ksd-n-icon-symbol-f-filled kind" v-if="t.kind ===
'FACT'"></i>
<i v-else class="el-ksd-n-icon-dimention-table-filled kind"></i>
</el-tooltip>
</span>
@@ -25,6 +25,7 @@
:key="col.id"
:id="`${t.guid}_${col.name}`"
:class="{'is-pfk': isPFK(col.name, t).isPK || isPFK(col.name,
t).isFK}"
+ v-scroll.observe.reactive @scroll-bottom="handleScrollBottom(t)"
@mouseleave="(e) => handleMouseLeave(e, t, col)"
@mouseenter="(e) => handleMouseEnterColumn(e, t, col)"
>
@@ -35,6 +36,7 @@
<span :class="['col-name', {'is-link': col.isPFK}]"
v-custom-tooltip="{text: col.name, w: 30, effect: 'dark', 'popper-class':
'popper--small', 'visible-arrow': false, position: 'bottom-start', observerId:
t.guid}">{{col.name}}</span>
</span>
</li>
+ <li class="li-load-more" v-if="t.hasMoreColumns && t.hasScrollEnd
&& !showOnlyConnectedColumn"><i class="el-ksd-icon-loading_16"></i></li>
</ul>
</div>
</div>
@@ -135,7 +137,17 @@ export default class ModelERDiagram extends Vue {
return table.spreadOut ? table.columns.length > num ? `${num}`
:`${table.columns.length}` : ''
}
getColumns (t) {
- return this.showOnlyConnectedColumn ? t.columns.filter(it =>
this.isPFK(it.name, t).isPK || this.isPFK(it.name, t).isFK) : t.columns
+ return this.showOnlyConnectedColumn ? t.showColumns.filter(it =>
this.isPFK(it.name, t).isPK || this.isPFK(it.name, t).isFK) : t.showColumns
+ }
+ // 滚动加载 columns
+ handleScrollBottom (table) {
+ if (table.hasMoreColumns) {
+ table.hasScrollEnd = true
+ setTimeout(() => {
+ table.loadMoreColumns()
+ table.hasScrollEnd = false
+ }, 300)
+ }
}
async created () {
this.loadingER = true
@@ -333,9 +345,12 @@ export default class ModelERDiagram extends Vue {
exchangeTableData () {
const currentTableTitle = this.$el.querySelector('.table-title')
const modelTableBoxBorder =
+window.getComputedStyle(currentTableTitle)['borderWidth'].replace(/px/, '')
- for (let item in this.currentModel.tables) {
- const t = this.currentModel.tables[item]
+ for (let item in this.modelData.tables) {
+ const t = this.modelData.tables[item]
const canvasHeight =
this.currentModel.canvas.coordinate[`${t.alias}`].height
+ if (canvasHeight > modelRenderConfig.tableBoxHeight * 2) {
+ this.handleScrollBottom(t)
+ }
if (canvasHeight === currentTableTitle.offsetHeight +
modelTableBoxBorder * 2 + 4) {
this.$set(t, 'spreadOut', false)
this.$set(t, 'spreadHeight', modelRenderConfig.tableBoxHeight)
@@ -371,7 +386,7 @@ export default class ModelERDiagram extends Vue {
exchangePosition () {
if (this.source === 'modelList') {
if (!(this.currentModel && this.currentModel.tables)) return
- const [factTable] = this.currentModel.tables.filter(it => it.type ===
'FACT')
+ const [factTable] = this.currentModel.tables.filter(it => it.kind ===
'FACT')
const factGuid = factTable.guid
document.getElementById(factGuid).scrollIntoView()
}
@@ -573,6 +588,13 @@ export default class ModelERDiagram extends Vue {
background-color: @warning-color-3;
}
}
+ &.li-load-more {
+ text-align:center;
+ cursor:pointer;
+ font-size: 12px;
+ color: @text-disabled-color;
+ border-bottom:none;
+ }
}
}
}
diff --git a/kystudio/src/components/common/ModelERDiagram/handler.js
b/kystudio/src/components/common/ModelERDiagram/handler.js
index 85c14c28df..706960d51b 100644
--- a/kystudio/src/components/common/ModelERDiagram/handler.js
+++ b/kystudio/src/components/common/ModelERDiagram/handler.js
@@ -99,7 +99,7 @@ function autoCalcLayer (tables, model) {
height: 230,
width: 200
}
- const [factTable] = tables.filter(it => it.type === 'FACT')
+ const [factTable] = tables.filter(it => it.kind === 'FACT')
if (!factTable) {
return
}
diff --git a/kystudio/src/components/studio/StudioModel/ModelEdit/index.vue
b/kystudio/src/components/studio/StudioModel/ModelEdit/index.vue
index ee17a8a4df..2ed4f485c1 100644
--- a/kystudio/src/components/studio/StudioModel/ModelEdit/index.vue
+++ b/kystudio/src/components/studio/StudioModel/ModelEdit/index.vue
@@ -464,7 +464,7 @@ import { mapActions, mapGetters, mapMutations, mapState }
from 'vuex'
import locales from './locales'
import DataSourceBar from '../../../common/DataSourceBar'
import { handleSuccess, handleError, loadingBox, kylinMessage, kylinConfirm }
from '../../../../util/business'
-import { isIE, groupData, objectClone, filterObjectArray, handleSuccessAsync,
indexOfObjWithSomeKey, debounceEvent } from '../../../../util'
+import { isIE, groupData, objectClone, filterObjectArray, handleSuccessAsync,
indexOfObjWithSomeKey } from '../../../../util'
import $ from 'jquery'
import DimensionModal from '../DimensionsModal/index.vue'
import BatchMeasureModal from '../BatchMeasureModal/index.vue'
@@ -2223,6 +2223,9 @@ export default class ModelEdit extends Vue {
const modelTableBoxBorder =
+window.getComputedStyle(modelTableTitle)['borderWidth'].replace(/px/, '')
for (let item in this.modelRender.tables) {
const { drawSize } = this.modelRender.tables[item]
+ if (drawSize.height > modelRenderConfig.tableBoxHeight * 2) {
+ this.handleScrollBottom(this.modelRender.tables[item])
+ }
if (drawSize.height === modelTableTitle.offsetHeight +
modelTableBoxBorder * 2 + 4) {
this.modelRender.tables[item].spreadOut = false
this.modelRender.tables[item].spreadHeight =
modelRenderConfig.tableBoxHeight
@@ -2245,11 +2248,6 @@ export default class ModelEdit extends Vue {
async checkInvalidIndex () {
if (this.extraoption.action === 'edit') {
const res = await this.modelInstance.generateMetadata(true)
- // const _data = {
- // project: this.currentSelectedProject,
- // model_id: res.uuid,
- // join_tables: res.join_tables
- // }
const response = await this.invalidIndexes(res)
const result = await handleSuccessAsync(response)
const { computed_columns, anti_flatten_lookups } = result
diff --git a/kystudio/src/components/studio/StudioModel/ModelEdit/table.js
b/kystudio/src/components/studio/StudioModel/ModelEdit/table.js
index 40f92cecf8..045e729172 100644
--- a/kystudio/src/components/studio/StudioModel/ModelEdit/table.js
+++ b/kystudio/src/components/studio/StudioModel/ModelEdit/table.js
@@ -19,6 +19,7 @@ class NTable {
this.getOtherTableByGuid = options.getTableByGuid
this.kind = options.kind ? options.kind : options.fact ?
modelRenderConfig.tableKind.fact : modelRenderConfig.tableKind.lookup // table
类型
this.joinInfo = {} // 链接对象
+ this.join = options.join // ER 图传进来的join
this.guid = options.guid || sampleGuid() // identify id
this.alias = options.alias || options.table // 别名
this.source_type = options.source_type
diff --git
a/kystudio/src/components/studio/StudioModel/ModelList/ModelOverview/ModelOverview.vue
b/kystudio/src/components/studio/StudioModel/ModelList/ModelOverview/ModelOverview.vue
index 446ed951e7..17a9eff9c6 100644
---
a/kystudio/src/components/studio/StudioModel/ModelList/ModelOverview/ModelOverview.vue
+++
b/kystudio/src/components/studio/StudioModel/ModelList/ModelOverview/ModelOverview.vue
@@ -1,13 +1,13 @@
<template>
<el-tabs :class="['model-overview', {'er-overview': activeTab ===
'erDiagram'}]" v-model="activeTab" v-if="model">
- <el-tab-pane :label="$t('erDiagram')" name="erDiagram">
- <ModelERDiagram ref="$er-diagram" :model="model" />
- </el-tab-pane>
<el-tab-pane :label="$t('dimension')" name="dimension">
- <ModelDimensionList :model="model" />
+ <ModelDimensionList :model="model" v-if="activeTab === 'dimension'" />
</el-tab-pane>
<el-tab-pane :label="$t('measure')" name="measure">
- <ModelMeasureList :model="model" />
+ <ModelMeasureList :model="model" v-if="activeTab === 'measure'" />
+ </el-tab-pane>
+ <el-tab-pane :label="$t('erDiagram')" name="erDiagram">
+ <ModelERDiagram ref="$er-diagram" :model="model" v-if="activeTab ===
'erDiagram'" />
</el-tab-pane>
</el-tabs>
</template>
@@ -32,7 +32,7 @@ import ModelMeasureList from
'../../../../common/ModelMeasureList/ModelMeasureLi
locales
})
export default class ModelOverview extends Vue {
- activeTab = 'erDiagram'
+ activeTab = 'dimension'
modelData = null
// 此处有待调查：为何删除模型的瞬间，会造成模型object变化？
diff --git a/kystudio/src/util/dataGenerator.js
b/kystudio/src/util/dataGenerator.js
index d25206b7b9..5761794f80 100644
--- a/kystudio/src/util/dataGenerator.js
+++ b/kystudio/src/util/dataGenerator.js
@@ -1,3 +1,4 @@
+import NTable from '../components/studio/StudioModel/ModelEdit/table'
import { sampleGuid } from './index'
/**
* 找出lookup表的主键表和外键表
@@ -48,15 +49,24 @@ function getTablesData (modelData) {
// 所有表集合 = 事实表 + 维度表
const allTablesInfo = [factInfo, ...lookupsInfo]
// 将simplified_tables和table_info组合，成为table data列表
- tablesData = allTablesInfo.map(tableInfo => ({
- guid: sampleGuid(),
- ...tableInfo,
- ...tableColumnDataMap[tableInfo.table]
- }))
+ tablesData = allTablesInfo.map(tableInfo => {
+ const option = {
+ guid: sampleGuid(),
+ ...tableInfo,
+ ...tableColumnDataMap[tableInfo.table]
+ }
+ option.computed_columns = option.columns.filter((col) => {
+ return col.is_computed_column
+ }).map(c => ({
+ ...c,
+ tableAlias: factAlias,
+ columnName: c.name
+ }))
+ return new NTable(option)
+ })
} catch (e) {
console.warn(e)
}
-
return tablesData
}
@@ -118,7 +128,7 @@ export function getColumnNameMap (tablesData) {
for (const tableData of tablesData) {
const tableAlias = tableData.alias
- for (const column of tableData.columns) {
+ for (const column of tableData.all_columns) {
columnNameMap[`${tableAlias}.${column.name}`] = column
}
}
@@ -151,13 +161,7 @@ export function generateModel (modelData) {
guid: modelData.uuid,
name: modelData.name,
alias: modelData.alias,
- tables: tablesData.map(tableData => ({
- guid: tableData.guid,
- name: tableData.table,
- alias: tableData.alias,
- type: tableData.kind,
- spreadOut: true
- })),
+ tables: tablesData,
dimensions: dimensionsData.map(dimensionData => ({
guid: dimensionData.guid,
name: dimensionData.name,
