Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(editor): limiting columns in table view to prevent unresponsive UI when opening NDV #4480

Merged
merged 8 commits into from
Nov 2, 2022
Merged

fix(editor): limiting columns in table view to prevent unresponsive UI when opening NDV #4480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
98df7b8
fix(editor): limiting columns in table view
cstuncsik Oct 31, 2022
953f4b3
fix(editor): adding ghost table column with tooltip to table view
cstuncsik Oct 31, 2022
a7eda37
fix(editor): limit columns to 40
cstuncsik Nov 1, 2022
389f5f3
fix(editor): show table columns if it doesn't exceed the limit
cstuncsik Nov 1, 2022
e76f579
fix(editor): rolling back globalLinkActions changes
cstuncsik Nov 1, 2022
0bd9bed
fix(editor): using i18n tag for having cleaner event handling
cstuncsik Nov 1, 2022
04dd60f
fix(editor): emphasizing magic variable
cstuncsik Nov 1, 2022
b0455f5
fix(editor): removing unused prop
cstuncsik Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/editor-ui/src/components/RunData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@
:hasDefaultHoverState="paneType === 'input'"
@mounted="$emit('tableMounted', $event)"
@activeRowChanged="onItemHover"
@displayModeChange="onDisplayModeChange"
/>

<run-data-json
Expand Down
50 changes: 40 additions & 10 deletions packages/editor-ui/src/components/RunDataTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,19 @@
</draggable>
</n8n-tooltip>
</th>
<th v-if="columnLimitExceeded" :class="$style.header">
<n8n-tooltip placement="bottom-end">
<div slot="content">
<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
<a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
</i18n>
</div>
<span>
<font-awesome-icon :class="$style['warningTooltip']" icon="exclamation-triangle"></font-awesome-icon>
{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
</span>
</n8n-tooltip>
</th>
<th :class="$style.tableRightMargin"></th>
</tr>
</thead>
Expand Down Expand Up @@ -129,6 +142,7 @@
</template>
</n8n-tree>
</td>
<td v-if="columnLimitExceeded"></td>
<td :class="$style.tableRightMargin"></td>
</tr>
</template>
Expand All @@ -138,16 +152,16 @@
</template>

<script lang="ts">
/* eslint-disable prefer-spread */

import { INodeUi, IRootState, ITableData, IUiState, NDVState } from '@/Interface';
import { INodeUi, IRootState, ITableData, NDVState } from '@/Interface';
import { getPairedItemId } from '@/pairedItemUtils';
import Vue, { PropType } from 'vue';
import mixins from 'vue-typed-mixins';
import { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
import Draggable from './Draggable.vue';
import { shorten } from './helpers';
import { externalHooks } from './mixins/externalHooks';
import Draggable from '@/components/Draggable.vue';
import { shorten } from '@/components/helpers';
import { externalHooks } from '@/components/mixins/externalHooks';

const MAX_COLUMNS_LIMIT = 40;

export default mixins(externalHooks).extend({
name: 'run-data-table',
Expand Down Expand Up @@ -189,6 +203,7 @@ export default mixins(externalHooks).extend({
hoveringPath: null as null | string,
mappingHintVisible: false,
activeRow: null as number | null,
columnLimitExceeded: false,
};
},
mounted() {
Expand All @@ -202,7 +217,7 @@ export default mixins(externalHooks).extend({
}
},
computed: {
hoveringItem(): NDVState['ndv']['hoveringItem'] {
hoveringItem(): NDVState['hoveringItem'] {
return this.$store.getters['ndv/hoveringItem'];
},
pairedItemMappings(): IRootState['workflowExecutionPairedItemMappings'] {
Expand Down Expand Up @@ -411,7 +426,14 @@ export default mixins(externalHooks).extend({

// Go over all keys of entry
entryRows = [];
leftEntryColumns = Object.keys(entry || {});
const entryColumns = Object.keys(entry || {});

if(entryColumns.length > MAX_COLUMNS_LIMIT) {
this.columnLimitExceeded = true;
leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
} else {
leftEntryColumns = entryColumns;
}

// Go over all the already existing column-keys
tableColumns.forEach((key) => {
Expand Down Expand Up @@ -450,8 +472,8 @@ export default mixins(externalHooks).extend({
// Make sure that all entry-rows have the same length
tableData.forEach((entryRows) => {
if (tableColumns.length > entryRows.length) {
// Has to less entries so add the missing ones
entryRows.push.apply(entryRows, new Array(tableColumns.length - entryRows.length));
// Has fewer entries so add the missing ones
entryRows.push(...new Array(tableColumns.length - entryRows.length));
}
});

Expand All @@ -461,6 +483,9 @@ export default mixins(externalHooks).extend({
data: tableData,
};
},
switchToJsonView(){
this.$emit('displayModeChange', 'json');
},
},
});
</script>
Expand Down Expand Up @@ -654,4 +679,9 @@ export default mixins(externalHooks).extend({
background-color: var(--color-secondary);
}
}

.warningTooltip {
color: var(--color-warning);
}

</style>
3 changes: 3 additions & 0 deletions packages/editor-ui/src/plugins/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,9 @@
"dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data",
"dataMapping.mapKeyToField": "Map '{name}' to a field",
"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden.",
"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {0} to see all data.",
"dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view",
"displayWithChange.cancelEdit": "Cancel Edit",
"displayWithChange.clickToChange": "Click to Change",
"displayWithChange.setValue": "Set Value",
Expand Down