SQLTutor

Svelte-based SQL visualizer.

Built on top of

• svelte
• Databass query compilation database engine, extended with cutting-edge provenance instrumentation techniques
• Table visualizer from pandastutor

Develop and Run

npm install .
npx convex dev
npm run dev

If there's issues with convex

npx convex init
npx convex reinit --help

Future Features

• support for subqueries
• support for count(*)
• show schemas in interface
• example list of prewritten queries
• track usage statistics
• add new tables

Specification for lineage data

opid: id of operator
Pointers: Array<(outputTupleIdx, inputTupleIdx)>

RowLineage: Array<(sourceTableIndex, Pointers)>

// each element is the list of attribute offsets in the input table's schema
ColIndexes: Array<inputAttrIdx>

// one element for each attribute in the operator's output schema
ColLineage: Array<ColIndexes>

// list of child operator ids
OpLineage: Array<opid>  

// attributes used to filter/join
ExprCols: Array<(sourceTableIndex, ColIndexes)>

Info: {
  str: string // string representation to be displayed
  id: opid
  name: string // operator name
  schema: Array<string>  // attribute names of output schema
}

Tuple: Array<int | string>
Results: {
  columns: Array<string>  // attribute names
  rows: Array<Tuple>
}

Lineage: {
  row: {
    opid: RowLineage
  },
  col: {
    opid: ColLineage
  },
  op: { 
    // "root" is a special opid that stores the root opid in a singleton list
    opid: OpLineage  
  },
  exprs: {
    opid: ExprCols
  },
  info: {
    opid: Info
  },
  results: {
    opid: Results
  },
  qstr: string  // query string
}