Merge pull request #324 from fractal-analytics-platform/fix-performance-issue

Fixed argument popovers performance issue

Author: zonia3000

.github/workflows/end_to_end_tests.yaml

@@ -42,3 +42,6 @@ jobs:
           name: playwright-coverage
           path: coverage-playwright/
           retention-days: 30
+
+    env:
+      ENABLE_COVERAGE: "true"

.github/workflows/unit_tests.yaml

@@ -33,3 +33,6 @@ jobs:
           name: unit-coverage
           path: coverage-unit/
           retention-days: 30
+
+    env:
+      ENABLE_COVERAGE: "true"

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 # Unreleased
 
+* Fixed argument popovers performance issue (\#324).
 * Added end to end tests and coverage configuration (\#320).
 
 # 0.6.1

docs/tests.md

@@ -21,12 +21,12 @@ To execute the tests seeing the browser add the `--headed` flag or the `--debug`
 Coverage for the unit tests:
 
 ```
-npx vitest run --coverage.enabled --coverage.provider=istanbul --coverage.include=src --coverage.reporter=json --coverage.all
+ENABLE_COVERAGE=true npx vitest run --coverage.enabled --coverage.provider=istanbul --coverage.include=src --coverage.reporter=json --coverage.all
 ```
 
 Warning: coverage takes some time using the option `--coverage.all`.
 
-Coverage for the playwright tests is automatically collected when running `npx playwright test`.
+Coverage for the playwright tests is automatically collected when running `ENABLE_COVERAGE=true npx playwright test`.
 
 To generate a merged html report:
 

src/lib/components/common/jschema/PropertyDescription.svelte

@@ -3,17 +3,27 @@
 
 	export let description = undefined;
 
+	let element;
+
 	onMount(() => {
-		const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
-		// eslint-disable-next-line no-undef
-		popoverTriggerList.forEach(popoverEl => new bootstrap.Popover(popoverEl));
+		if (element) {
+			// @ts-ignore
+			// eslint-disable-next-line no-undef
+			new bootstrap.Popover(element);
+		}
 	});
-
 </script>
 
-<span class='ms-2'>
-  {#if description }
-    <a tabindex='0' role='button' data-bs-trigger='focus' class='bi bi-info-circle' data-bs-toggle='popover'
-       data-bs-content={description}></a>
-  {/if}
-</span>
+<span class="ms-2 property-description">
+	{#if description}
+		<span
+			bind:this={element}
+			tabindex="0"
+			role="button"
+			data-bs-trigger="focus"
+			class="bi bi-info-circle text-primary"
+			data-bs-toggle="popover"
+			data-bs-content={description}
+		/>
+	{/if}
+</span>

vite.config.js

@@ -7,28 +7,34 @@ const packageJsonFile = fileURLToPath(new URL('package.json', import.meta.url));
 const packageJsonData = readFileSync(packageJsonFile);
 const pkg = JSON.parse(packageJsonData);
 
+const enableIstanbul = process.env['ENABLE_COVERAGE'];
+
 /** @type {import('vite').UserConfig} */
 const config = {
 	plugins: [
 		sveltekit(),
-		istanbul({
-			include: 'src/*',
-			exclude: ['node_modules', 'tests', 'static'],
-			extension: ['.js', '.svelte'],
-			requireEnv: false,
-			forceBuildInstrument: true
-		})
+		enableIstanbul &&
+			istanbul({
+				include: 'src/*',
+				exclude: ['node_modules', 'tests', 'static'],
+				extension: ['.js', '.svelte'],
+				requireEnv: false,
+				forceBuildInstrument: true
+			})
 	],
 	define: {
 		__APP_VERSION__: JSON.stringify(pkg.version)
 	},
+	build: {
+		sourcemap: true
+	},
 	test: {
 		globals: true,
 		include: ['**/__tests__/**/*.?(c|m)[jt]s?(x)'],
 		coverage: {
 			provider: 'istanbul',
 			reporter: ['text', 'json', 'html'],
-			reportsDirectory: './coverage-unit',
+			reportsDirectory: './coverage-unit'
 		}
 	},
 	optimizeDeps: {