136 lines
6.8 KiB
Markdown
136 lines
6.8 KiB
Markdown
# SQLFlow frontend guide
|
||
|
||
## 原理
|
||
|
||
SQLFlow frontend 最主要依赖的接口是 [**/sqlflow/generation/sqlflow/graph**](https://github.com/sqlparser/sqlflow_public/blob/master/api/sqlflow_api.md)。从这个接口获得数据后，分析其中的 graph 和 sqlflow 字段，绘制对应的图形，并进行相关的交互。在 SQLFlow frontend 中点击不同的按钮，或者在 setting 区域做不同的设置，实质上是给这个接口传递了不同的参数，从而获得了对应的图形结果。
|
||
|
||
参考：[SQLFlow api 文档](https://github.com/sqlparser/sqlflow_public/blob/master/api/sqlflow_api.md)
|
||
|
||
## overview
|
||
|
||
|
||
|
||
### sqltext editor
|
||
|
||
|
||
|
||
在代码编辑框输入 sql 代码，点击 dbvendor 菜单选择数据库，点击 visualize 按钮或者 visualize join 按钮，可以绘制对应的图像。
|
||
|
||
点击 visualize 按钮实际上是请求了[graph 接口](#graph)，并传入了下面的参数：
|
||
|
||
| 参数 | 值 |
|
||
| ---------------- | ------------------------------------------ |
|
||
| sqltext | 代码编辑框中的代码，例如 select \* from a; |
|
||
| dbvendor | dbvendor 菜单选择的数据库，例如 dbvoracle |
|
||
| showRelationType | fdd |
|
||
| ignoreFunction | true |
|
||
|
||
点击 visualize join 按钮实际上是请求了[graph 接口](#graph)，并传入了下面的参数：
|
||
|
||
| 参数 | 值 |
|
||
| ---------------- | ------------------------------------------ |
|
||
| sqltext | 代码编辑框中的代码，例如 select \* from a; |
|
||
| dbvendor | dbvendor 菜单选择的数据库，例如 dbvoracle |
|
||
| showRelationType | join |
|
||
| ignoreFunction | true |
|
||
|
||
### switch sample sql
|
||
|
||
点击 dbvendor 菜单，选择数据库后，点击 sample sql 可以在代码编辑框中获得这个 dbvendor 对应的示例 sql，随后可以 visualize。
|
||
|
||
|
||
|
||
### visualize a column or table by dropdown menu
|
||
|
||
|
||
|
||
### hover sqltext to highlight graph
|
||
|
||
鼠标在 sqltext 上悬停，可以在图形中找到对应的图形。
|
||
|
||
|
||
|
||
### hover graph to highlight sqltext
|
||
|
||
鼠标在图形上悬停，可以在 sqltext 中找到对应的代码。
|
||
|
||
|
||
|
||
### resize left panel width
|
||
|
||
鼠标悬停在面板边缘悬停，如果有高亮效果，则可以拖动跳转宽度。
|
||
|
||
|
||
|
||
### pin graph, drag graph, and cancel
|
||
|
||
点击图形某个 column，可以固定上下游关系。长按鼠标左键，可以移动画布。
|
||
|
||
|
||
|
||
## setting
|
||
|
||
设置当前[graph 接口](#graph)接口的参数，来获得不同的分析结果：
|
||
|
||
| 参数 | 值 |
|
||
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
||
| showRelationType | 如果 direct dataflow = true，为 fdd；<br />如果 direct dataflow = true 且 indirect dataflow=true ，为 fdd,fddi,fdr,frd； |
|
||
| dataflowOfAggregateFunction | direct 或者 indirect，取决于 dataflowOfAggregateFunction |
|
||
| ignoreRecordSet | false 或者 true，取决于 show intermediate recordset |
|
||
| ignoreFunction | false 或者 true，取决于 show function |
|
||
| showConstantTable | false 或者 true，取决于 show constant |
|
||
| showTransform | false 或者 true，取决于 show transform |
|
||
|
||
切换不同的选项，观察网络请求，可以看到接口参数的变化：
|
||
|
||
|
||
|
||
### show function
|
||
|
||
|
||
|
||
### show transform
|
||
|
||
|
||
|
||
## job list
|
||
|
||
|
||
|
||
### create a job
|
||
|
||
|
||
|
||
### backwards in code
|
||
|
||
|
||
|
||
## schema
|
||
|
||
|
||
|
||
显示 sql 的 schema 结构。在 schema、database、table 上点击鼠标右键，可以 visualize。
|
||
|
||
|
||
|
||
global、summay、ignore record 表示的是[graph 接口](#graph)返回的的三个模式（json 中的 mode 字段），分别用三种不同的颜色表示。
|
||
|
||
|
||
|
||
ANALYTICS、ENTITY 前的图标为绿色，表示 mode 为 global；DATAMART 前为黑色，表示 mode 为 summary；其他节点前为灰色，表示当前节点还没有被 visualize。
|
||
|
||
### view DDL
|
||
|
||
|
||
|
||
## export
|
||
|
||
导出处理结果为 json 或者 png:
|
||
|
||
|
||
## 接口
|
||
|
||
参考：[SQLFlow api 文档](https://github.com/sqlparser/sqlflow_public/blob/master/api/sqlflow_api.md)
|
||
|
||
<span id="graph">graph 接口：</span> post /sqlflow/generation/sqlflow/graph
|