index.ts

import '@mapd/connector/dist/browser-connector';
import { Transforms2SQL } from './transforms2sql';
import { NormalizedUnitSpec, extractTransforms, selectedFields } from 'vega-lite/build/src/spec';
import { defaultConfig } from 'vega-lite/build/src/config';

// connect to MapD server; start session
const connection = new (window as any).MapdCon()
  .protocol("https")
  .host("metis.mapd.com")
  .port("443")
  .dbName("mapd")
  .user("mapd")
  .password("HyperInteractive")

const session = connection.connectAsync();

const table = "flights_donotmodify";

const vlHeatmap: NormalizedUnitSpec = {
  title: "Average Daily Flight Departure Delay",
  mark: "rect",
  encoding: {
    x: { field: "flight_dayofmonth", type: "ordinal", title: "day" },
    y: { field: "flight_month", type: "ordinal", title: "month" },
    color: {
      aggregate: "average",
      field: "depdelay",
      type: "quantitative",
      title: "average delay"
    }
  }
};

const vlBarchart: NormalizedUnitSpec = {
  title: "Number of Flights by Airline",
  mark: "bar",
  encoding: {
    x: { field: "carrier_name", type: "ordinal", title: "Airline" },
    y: { aggregate: "count", type: "quantitative", title: "Number of Flights"}
  }
};

function loadDemo(containerName: string, spec: NormalizedUnitSpec): void {
  const container = document.getElementById(containerName + "-container");
  // Insert original vega spec
  const ogSpecContainer = <HTMLDivElement>(document.createElement('div'));
  const ogSpecCode = <HTMLElement>(document.createElement('pre'));
  ogSpecCode.classList.add('prettyprint');
  ogSpecCode.innerHTML = JSON.stringify(spec, null, 4);

  ogSpecContainer.innerHTML = "<h3>Original Specification</h3>";
  ogSpecContainer.appendChild(ogSpecCode);
  container.appendChild(ogSpecContainer);

  // Insert modified vega spec
  const modifiedSpec = extractTransforms(spec, defaultConfig);

  const modifiedSpecContainer = <HTMLDivElement>(document.createElement('div'));
  const modifiedSpecCode = <HTMLElement>(document.createElement('pre'));
  modifiedSpecCode.classList.add('prettyprint');
  modifiedSpecCode.innerHTML = JSON.stringify(modifiedSpec, null, 4);

  modifiedSpecContainer.innerHTML = "<h3>Specification w/ Extracted Transforms</h3>"
  modifiedSpecContainer.appendChild(modifiedSpecCode);
  container.appendChild(modifiedSpecContainer);

  // Insert transformation SQL
  const transforms = modifiedSpec.transform;
  const selects = selectedFields(spec);
  selects.splice(selects.length - 1, 1);
  delete modifiedSpec.transform;
  const sql = Transforms2SQL.convert(table, selects, transforms);

  const sqlContainer = <HTMLDivElement>(document.createElement('div'));
  const sqlCode = <HTMLElement>(document.createElement('pre'));
  sqlCode.classList.add('prettyprint');
  sqlCode.innerHTML = sql;

  sqlContainer.innerHTML = "<h3>Transforms as SQL</h3>"
  sqlContainer.appendChild(sqlCode);
  container.appendChild(sqlContainer);

  // Insert visualization
  session.then(s => {
    s.queryAsync(sql).then((values) => {
      // load visualization
      vegaEmbed("#" + containerName + "-viz", Object.assign({"data": {values}}, modifiedSpec), {defaultStyle: true})
      console.log(values);
    });
  });

}

loadDemo('barchart', vlBarchart);
loadDemo('heatmap', vlHeatmap);