Now you have successfully set up SQLFlow on-premise version on your server, and it periodically fetches SQL script from the database instance or a git server, generate the data lineage on the backend, and you can view the data lineage graphically on your browser.

You want to move one step further to integrate the data lineage graphics generated by the SQLFlow into your data governance platform. For example, you like to embed the data lineage graphics of a specific table or column into a specific web page on your platform, and this graphics should be refreshed automatically when the database structure is changed or the SQL executed in the query history is updated.

This is possible by using the SQLFlow widget, which is a javascript library that render the data lineage to dynamic graphics. You need to add several lines of javascript code to your web page to achieve this.

The JS code

1. Setup the SQLFlow widget

• create a directory such as sqlflow-widget under the web server root document directory.
• put sqlflow.widget.2.4.0.css, sqlflow.widget.2.4.0.js, index.html, index.js under sqlflow-widget.
• index.html, modify the path in index.html to sqlflow.widget.2.4.0.js like this:

  <script src="/sqlflow-widget/sqlflow.widget.2.4.0.js"></script>

• index.js, modify apiPrefix in index.js, set it to your SQLFlow on-premise server like

https://www.mysqlflow.com/api

• index.html , index.js here is for the demo only, you can use the javascript on your web page.

2. Connect to a job

// view job detail by job id, or leave it empty to view the latest job
await sqlflow.job.lineage.viewDetailById($jobid.val());

In order to show data lineage of a specific table/column, we need to tell the SQLFlow widget which job contains the data lineage information. Or leave it empty to get lineage from the latest job.

3. Display the data lineage graphics

sqlflow.job.lineage.selectGraph({
    database: $database.val(),
    schema: $schema.val(),
    table: $table.val(),
    column: $column.val(),
});

This is the most important JS code you used in your program to display the data lineage of specific table or column.

• database, this is optional, the database the table belongs to.
• schema, this is optional, the schema that contains the table.
• table, this is the table you like to display the data lineage graphics on your web page.
• column, this this optional, if specified, display the data lineage of this column which is a column-level lineage.

4. Live demo

https://www.sqlflow.net/sqlflow-widget/embed-table-column/

How to get the SQLFlow Widget

The SQLFlow widget is shipped together with the SQLFlow on-premise server.