add very basic conversion to vega-lite

Author: Dev-Lan

package.json

@@ -27,6 +27,9 @@
     "@duckdb/duckdb-wasm": "^1.29.0",
     "arquero": "^7.2.0",
     "pinia": "^2.3.1",
+    "vega": "^5.30.0",
+    "vega-embed": "^6.29.0",
+    "vega-lite": "^5.23.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {

src/components/ParserComponent.stories.ts

@@ -37,6 +37,56 @@ export const Default = {
   },
 };
 
+export const example2 = {
+  args: {
+    spec: {
+      dataSource: {
+        key: 'penguins',
+        source: './data/penguins.csv',
+      },
+      dataRepresentation: {
+        type: 'GoGComponent',
+        mark: 'point',
+        encoding: {
+          x: { source: 'penguins', field: 'flipper_length_mm' },
+          y: { source: 'penguins', field: 'flipper_length_mm' },
+          color: { source: 'penguins', field: 'flipper_length_mm' },
+        },
+      },
+    },
+  },
+};
+
+export const Layering = {
+  args: {
+    spec: {
+      dataSource: {
+        key: 'penguins',
+        source: './data/penguins.csv',
+      },
+      dataRepresentation: [
+        {
+          type: 'GoGComponent',
+          mark: 'point',
+          encoding: {
+            x: { source: 'penguins', field: 'bill_length_mm' },
+            y: { source: 'penguins', field: 'flipper_length_mm' },
+          },
+        },
+        {
+          type: 'GoGComponent',
+          mark: 'circle',
+          encoding: {
+            x: { source: 'penguins', field: 'bill_length_mm' },
+            y: { source: 'penguins', field: 'flipper_length_mm' },
+            color: { source: 'penguins', field: 'sex' },
+          },
+        },
+      ],
+    },
+  },
+};
+
 // export const Test2 = {
 //   args: {
 //     blarg: 'test 2!',

src/components/ParserComponent.vue

@@ -1,34 +1,116 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
+import VegaLite from './VegaLite.vue';
 import {
   type ParsedUDIGrammar,
   type UDIGrammar,
   parseSpecification,
 } from './Parser';
 import { useDataSourcesStore } from '@/stores/DataSourcesStore';
+import { storeToRefs } from 'pinia';
 
 const dataSourcesStore = useDataSourcesStore();
+const { loading } = storeToRefs(dataSourcesStore);
 
 export interface ParserProps {
   spec: UDIGrammar;
 }
 
+// TODO: infer based on data, or assume schema
+const columnTypes = {
+  species: 'nominal',
+  island: 'nominal',
+  bill_length_mm: 'quantitative',
+  bill_depth_mm: 'quantitative',
+  flipper_length_mm: 'quantitative',
+  body_mass_g: 'quantitative',
+  sex: 'nominal',
+};
+
 const props = defineProps<ParserProps>();
 
 const parsedSpec = ref<ParsedUDIGrammar | null>(null);
 
+const isGoGComponent = ref<boolean>(false);
+const vegaLiteSpec = ref<string>('');
 onMounted(() => {
   // parse/validate grammar
   parsedSpec.value = parseSpecification(props.spec);
   for (const dataSource of parsedSpec.value.dataSource) {
     dataSourcesStore.initDataSource(dataSource);
   }
+  buildVisualization();
+
+  // if (isVegaLiteCompatible(parsedSpec.value)) {
+  //   vegaLiteSpec.value = convertToVegaSpec(parsedSpec.value);
+  //   isGoGComponent.value = true;
+  // }
 });
+
+watch(loading, () => buildVisualization());
+
+function buildVisualization(): void {
+  console.log('build vis');
+  // // parse/validate grammar
+  // parsedSpec.value = parseSpecification(props.spec);
+  // for (const dataSource of parsedSpec.value.dataSource) {
+  //   dataSourcesStore.initDataSource(dataSource);
+  // }
+
+  if (isVegaLiteCompatible(parsedSpec.value)) {
+    vegaLiteSpec.value = convertToVegaSpec(parsedSpec.value);
+    isGoGComponent.value = true;
+  }
+}
+
+function isVegaLiteCompatible(spec: ParsedUDIGrammar): boolean {
+  return Array.isArray(spec.dataRepresentation);
+}
+
+function convertToVegaSpec(spec: ParsedUDIGrammar): string {
+  const vegaSpec = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    // data: { url: './data/penguins.csv' },
+    data: { values: [] },
+  };
+
+  // add data
+  // TODO: assume one data source
+  const dataInterface = spec.dataSource[0];
+  vegaSpec.data.values = dataSourcesStore.getDataObject(dataInterface.key);
+  console.log(vegaSpec);
+  // TODO: perform transformations
+
+  // dataInterface.
+
+  // add layers
+  const inputLayers = spec.dataRepresentation;
+  if (!Array.isArray(inputLayers)) {
+    throw new Error('invalid spec passed to vega conversion');
+  }
+  const outputLayers = inputLayers.map((gogComponent) => {
+    let encoding = {};
+    for (let [key, value] of Object.entries(gogComponent.encoding)) {
+      encoding[key] = {
+        field: value.field,
+        type: columnTypes[value.field],
+      };
+    }
+    return {
+      mark: gogComponent.mark,
+      encoding,
+    };
+  });
+  vegaSpec['layer'] = outputLayers;
+
+  return JSON.stringify(vegaSpec);
+}
 </script>
 
 <template>
   <div>Blargen Flargen</div>
   <div>{{ props.spec }}</div>
+  <VegaLite v-if="isGoGComponent" :spec="vegaLiteSpec" />
 </template>
 
 <style scoped lang="scss"></style>

src/components/VegaLite.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import vegaEmbed from 'vega-embed';
+import { defineProps } from 'vue';
+import { watch } from 'vue';
+
+const props = defineProps({
+  spec: {
+    type: String,
+    required: true,
+  },
+});
+
+const vegaContainer = ref(null);
+
+const errorMessage = ref(null);
+
+function updateVegaChart() {
+  let specObject;
+  try {
+    specObject = JSON.parse(props.spec);
+  } catch (error) {
+    console.error('Error parsing spec', error);
+    errorMessage.value = 'Error parsing spec: ' + error;
+    // clear the container so the chart doesn't show up
+    vegaContainer.value.innerHTML = '';
+    return;
+  }
+
+  vegaEmbed(vegaContainer.value, specObject)
+    .then((result) => {
+      console.log('Chart rendered successfully');
+      errorMessage.value = null;
+    })
+    .catch((error) => {
+      console.error('Error rendering chart', error);
+      errorMessage.value = 'Error rendering chart: ' + error;
+      // clear the container so the chart doesn't show up
+      vegaContainer.value.innerHTML = '';
+    });
+}
+
+onMounted(() => {
+  updateVegaChart();
+});
+
+watch(() => props.spec, updateVegaChart);
+</script>
+
+<template>
+  <div ref="vegaContainer" class="vega-chart-container"></div>
+  <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
+</template>
+
+<style scoped>
+.vega-chart-container {
+  width: 100%;
+  height: 100%;
+  max-width: 600px;
+  overflow-x: auto;
+}
+
+.error-message {
+  color: red;
+}
+</style>

src/stores/DataSourcesStore.ts

@@ -23,20 +23,29 @@ export const useDataSourcesStore = defineStore('DataSourcesStore', () => {
   //   connection = await db.connect();
   // });
 
+  const loading = ref<boolean>(true);
+
   async function initDataSource(dataSource: DataSource): Promise<void> {
     if (getDataSource(dataSource.key)) return;
-    const dest: ColumnTable = await loadCSV(dataSource.source, {
-      delimiter: '\t',
-    });
+    const dest: ColumnTable = await loadCSV(dataSource.source);
     dataSources.value[dataSource.key] = { source: dataSource, dest };
     // TODO: actually create data interface object
     console.log(dataSources.value);
+    loading.value = false;
   }
 
   function getDataSource(key: string): DataInterface | null {
     if (!(key in dataSources.value)) return null;
     return dataSources.value[key];
   }
 
-  return { dataSources, initDataSource };
+  function getDataObject(key: string): any {
+    const dataInterface = getDataSource(key);
+    if (dataInterface === null) return null;
+    // TODO, incorporate data transformations
+    // maybe filter to only fields used?
+    return dataInterface.dest.objects();
+  }
+
+  return { dataSources, loading, initDataSource, getDataObject };
 });