perf(editor): Use virtual scrolling in RunDataJson.vue (#10838)

This commit is contained in:
Ricardo Espinoza 2024-09-19 08:43:09 -04:00 committed by GitHub
parent b86fd80fc9
commit f5474ff791
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 823 additions and 795 deletions

View file

@ -14,6 +14,7 @@ import { nonExistingJsonPath } from '@/constants';
import { useExternalHooks } from '@/composables/useExternalHooks';
import TextWithHighlights from './TextWithHighlights.vue';
import { useTelemetry } from '@/composables/useTelemetry';
import { useElementSize } from '@vueuse/core';
const LazyRunDataJsonActions = defineAsyncComponent(
async () => await import('@/components/RunDataJsonActions.vue'),
@ -45,6 +46,9 @@ const telemetry = useTelemetry();
const selectedJsonPath = ref(nonExistingJsonPath);
const draggingPath = ref<null | string>(null);
const displayMode = ref('json');
const jsonDataContainer = ref(null);
const { height } = useElementSize(jsonDataContainer);
const jsonData = computed(() => executionDataToJson(props.inputData));
@ -110,7 +114,7 @@ const getListItemName = (path: string) => {
</script>
<template>
<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
<div ref="jsonDataContainer" :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
<Suspense>
<LazyRunDataJsonActions
v-if="!editMode.enabled"
@ -141,6 +145,8 @@ const getListItemName = (path: string) => {
root-path=""
selectable-type="single"
class="json-data"
:virtual="true"
:height="height"
@update:selected-value="selectedJsonPath = $event"
>
<template #renderNodeKey="{ node }">
@ -192,11 +198,10 @@ const getListItemName = (path: string) => {
left: 0;
padding-left: var(--spacing-s);
right: 0;
overflow-y: auto;
overflow-y: hidden;
line-height: 1.5;
word-break: normal;
height: 100%;
padding-bottom: var(--spacing-3xl);
&:hover {
/* Shows .actionsGroup element from <run-data-json-actions /> child component */
@ -299,4 +304,8 @@ const getListItemName = (path: string) => {
.vjs-tree .vjs-tree__content.has-line {
border-left: 1px dotted var(--color-json-line);
}
.vjs-tree .vjs-tree-list-holder-inner {
padding-bottom: var(--spacing-3xl);
}
</style>

View file

@ -2,6 +2,22 @@ import { createTestingPinia } from '@pinia/testing';
import { screen, cleanup } from '@testing-library/vue';
import RunDataJson from '@/components/RunDataJson.vue';
import { createComponentRenderer } from '@/__tests__/render';
import { useElementSize } from '@vueuse/core'; // Import the composable to mock
vi.mock('@vueuse/core', async () => {
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
const originalModule = await vi.importActual<typeof import('@vueuse/core')>('@vueuse/core');
return {
...originalModule, // Keep all original exports
useElementSize: vi.fn(), // Mock useElementSize
};
});
(useElementSize as jest.Mock).mockReturnValue({
height: 500, // Mocked height value
width: 300, // Mocked width value
});
const renderComponent = createComponentRenderer(RunDataJson, {
props: {
@ -34,18 +50,6 @@ const renderComponent = createComponentRenderer(RunDataJson, {
disabled: false,
},
},
global: {
mocks: {
$locale: {
baseText() {
return '';
},
},
$store: {
getters: {},
},
},
},
});
describe('RunDataJson.vue', () => {