Read custom visualizations (#8180)

- Closes #8077

# Important Notes
Tests are still WIP

app/gui2/.gitignore

@@ -24,3 +24,7 @@ coverage
 
 test-results/
 playwright-report/
+
+src/util/iconList.json
+src/util/iconName.ts
+src/stores/visualization/metadata.json

app/gui2/env.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="vite/client" />
 
 declare const PROJECT_MANAGER_URL: string
-declare const HISTOIRE: boolean | undefined
 declare const RUNNING_VITEST: boolean
-
-declare module 'builtins' {
-  export const VisualizationContainer: typeof import('@/components/VisualizationContainer.vue').default
-  export const useVisualizationConfig: typeof import('@/providers/visualizationConfig').useVisualizationConfig
-  export const defineKeybinds: typeof import('@/util/shortcuts').defineKeybinds
-}

app/gui2/eslint.config.js

@@ -9,7 +9,7 @@ const DIR_NAME = path.dirname(url.fileURLToPath(import.meta.url))
 
 const conf = [
   {
-    ignores: ['rust-ffi/pkg', 'dist', 'src/generated'],
+    ignores: ['rust-ffi/pkg', 'dist', 'src/generated', 'templates'],
   },
   ...compat.extends('plugin:vue/vue3-recommended'),
   eslintJs.configs.recommended,

app/gui2/histoire.config.ts

@@ -16,6 +16,7 @@ const order = [
   'All SVG Icons',
   // Visualizations
   'Selector',
+  'User Defined',
   'JSON',
   'Table',
   'Scatterplot',

app/gui2/package.json

@@ -25,8 +25,8 @@
     "build-rust-ffi": "wasm-pack build ./rust-ffi --release --target web",
     "generate-ast-schema": "cargo run -p enso-parser-schema > src/generated/ast-schema.json",
     "generate-ast-types": "tsx ./parser-codegen/index.ts src/generated/ast-schema.json src/generated/ast.ts",
-    "preinstall": "npm run build-rust-ffi && npm run generate-ast-schema && npm run generate-ast-types",
-    "generate-icon-metadata": "node scripts/generateIcons.js"
+    "preinstall": "npm run build-rust-ffi && npm run generate-ast-schema && npm run generate-ast-types && npm run generate-metadata",
+    "generate-metadata": "node scripts/generateIconMetadata.js"
   },
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^30.2.0",
@@ -79,6 +79,7 @@
     "@types/mapbox-gl": "^2.7.13",
     "@types/node": "^18.17.5",
     "@types/shuffle-seed": "^1.1.0",
+    "@types/wicg-file-system-access": "^2023.10.2",
     "@types/ws": "^8.5.5",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitejs/plugin-vue": "^4.3.1",
@@ -93,6 +94,7 @@
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.16.1",
     "floating-vue": "^2.0.0-beta.24",
+    "hash-wasm": "^4.10.0",
     "histoire": "^0.17.2",
     "jsdom": "^22.1.0",
     "postcss-nesting": "^12.0.1",

app/gui2/scripts/generateBuiltinVisualizationMetadata.js

@@ -0,0 +1,38 @@
+import * as fs from 'node:fs/promises'
+
+/** @type {{ name: string | undefined, inputType: string | undefined }[]} */
+const visualizationMetadata = []
+
+const order = [
+  'JSON',
+  'Table',
+  'Scatter Plot',
+  'Histogram',
+  'Heatmap',
+  'SQL Query',
+  'Geo Map',
+  'Image',
+  'Warnings',
+]
+
+console.info('Listing and reading visualization files...')
+for (const path of [
+  ...(await fs.readdir('./public/visualizations')).map((path) => './public/visualizations/' + path),
+  ...(await fs.readdir('./src/components/visualizations')).map(
+    (path) => './src/components/visualizations/' + path,
+  ),
+]) {
+  if (!path.endsWith('Visualization.vue')) continue
+  const file = await fs.readFile(path, 'utf-8')
+  const name = file.match(/(?<=export\s+const\s+name\s+=\s+['"])[^'"]*/)?.[0]
+  const inputType = file.match(/(?<=export\s+const\s+inputType\s+=\s+['"])[^'"]*/)?.[0]
+  visualizationMetadata.push({ name, inputType })
+}
+visualizationMetadata.sort((a, b) => order.indexOf(a.name ?? '') - order.indexOf(b.name ?? ''))
+
+console.info('Writing visualization metadata to "./src/stores/visualization/metadata.json"...')
+await fs.writeFile(
+  './src/stores/visualization/metadata.json',
+  JSON.stringify(visualizationMetadata, undefined, 2) + '\n',
+)
+console.info('Done.')