干货 | 字节跳动数据质量动态探查及相关前端实现

文 | 小哲  来自字节跳动数据平台开发套件团队

需求背景

1. 无法看到探查的数据明细以及关联的行详情，无法对数据进行预处理操作。
2. 探查还是需要资源调度，等待时长平均分钟级。
3. 与质量监控没有打通，探查数据的后续走向不明确。

1. 基于大数据预览的探查，支持对数据进行函数级别的预处理。
2. 探查结果秒级更新，实时响应。
3. 与数据监控打通，探索SQL的生成模式。

应用场景

1. 元数据管理 -> 探查 -> 数据预览探查（库表的质量报告）
2. 数据监控 <-> 数据探查
3. 动态探查 -> SQL -> 数据开发 -> 调试 -> 探查报告（质量分析）

名词解释

全量探查：

基于库表的全量探查，后端引擎执行，展示探查后列的统计分布结果。

动态探查：

基于抽样的部分数据探查，展示字段明细，可以使用操作对数据进行预处理，并实时动态的展示统计分布结果。数据获取后的过程都由前端执行。

技术实现

1. 抽样能力：对数据进行基于质量分布特征的抽取。

2. 数据展现：大容量的数据载体，支持对数据处理的实时展现。

3. 前端探查：实时探查，可视化展现数据分布，突出质量指标。

4. 数据处理能力：函数处理能力（GroupBy..）

5. 操作栈：需要对数据操作进行管理和回溯

6. 编辑器：提供完整函数的功能，需要：词法解析，智能提醒，语法高亮。

7. 生成SQL：将可视化的交互式操作转换成可执行的SQL。

• 基于链式调用生成

• 基于标签模板生成
• 基于AST（抽象语法树）去做

大数据渲染

卡片联动

 

  
   

    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    
    
// 计算卡片中点坐标 index是卡片序号，adsorbSider表示是否吸边getCardCenter(index: number, adsorbSider?: boolean) {    ...    // 获取卡片信息    const cardBox: IBaseBox = this.cardList[index];    // 获取列信息    const colBox: IBaseBox = this.colList[index];    const clientWidth = getClientWidth();    if(adsorbSider) {      // 吸边处理      if(cardBox.offset < this.cardScroll) {        return cardBox.offset;      }      if(cardBox.offset + cardBox.width - this.cardScroll > clientWidth) {        return cardBox.offset + cardBox.width - clientWidth;      }      return this.cardScroll;    }    return getTargetPosition(colBox, this.tableScroll, cardBox);}
// 获取滚动目标位置// originBox: 滚动起始对象// originScroll: 滚动起始左侧scroll// targetBox: 滚动结束对象const getTargetPosition = (originBox: IBaseBox, originScroll: number, targetBox: IBaseBox) => {  const clientWidth = getClientWidth();  if(!originBox || !targetBox) return 0;
  let offsetLeftSider = Math.max(originBox?.offset - originScroll, 0);  if(offsetLeftSider + targetBox.width >= clientWidth) {    if(targetBox.offset + targetBox.width > clientWidth) {      // 此处容易出现吸边      return targetBox.offset + targetBox.width - clientWidth;    } else {      return 0;    }  }  const scroll = targetBox?.offset - offsetLeftSider + (targetBox.width - originBox.width) / 2;  return Math.max(    Math.min(targetBox.offset, scroll),    0  );}
   


 

1. 选中卡片后，表格要自动滚动定位到下方居中对齐，无法满足对齐标准的，尽量靠近选中卡片位置。

2. 选中表格列后，卡片要自动滚动定位到上方居中对齐，无法满足对齐标准的，尽量靠近选中表格位置。

3. 搜索选中列后，卡片和表格要自动满足上面两个规则，并滚动到可视区域内。

居中对齐是对于卡片和列宽在scroll距离允许情况下的理想对齐方式，贴边对齐是针对卡片在起始和结束位置scroll不足以满足居中对齐要求时候的对齐方式，除此之外还有一种是卡片的宽度远大于列宽，并且不是起始或者结束位置的时候所采取的对齐方式，如下如卡片B因为无法滚动，卡片A的宽度又占据了底部第二列的一部分，所以此时卡片B只能高亮和底部的列进行对齐。

操作栈

1. 如何管理多种操作进行串行计算

 

  
   

    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    
    
class ColDelOpt {  run = (params: IOptEngineMetaInfo) => {    // 操作Input部分    const {      columns = [],      dataSourceMap = {}    } = params;    const {      fields = []    } = this.params;
    // 操作Logic部分    const nextColumns = columns.filter((item) => !fields.includes(item.name));        // 操作的Output    return {      columns: nextColumns,      dataSourceMap    }  }}
   

 

2. 某个操作被修改后如何进行二次计算

 

  
   

    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    
    
// 操作引擎class OptEngine {    // 操作列表  private optList: IOptEngineItem[] = [];
  // 原始数据  private metaData: IOptEngineMetaInfo = {    columns: [],    dataSourceMap: {},  };
  // 执行算子  optRun = () => {    let {      columns = [],      dataSourceMap = {}    } = this.metaData;
    if(!this.optList.length) return {      columns,      dataSourceMap    };
    for(let index = 0; index < this.optList.length; index++) {      // 读取操作算子      const optItem = this.optList[index];      let startTime = performance.now();            try {        // 执行算子计算        const result = optItem.run({          columns,          dataSourceMap        });
        // 更新算子结果        columns = result.columns || [];        dataSourceMap = result.dataSourceMap || {};      } catch(e) {        // 报错后直接直接返回        return {          columns,          dataSourceMap,          // 装填报错信息          errorInfo: {            key: optItem.key || '',            message: e.message          }        }      }    }
    return {      columns,      dataSourceMap,    }  }
  autoRun = (    metaInfo: IOptEngineMetaInfo,     optList: IOptItem[],     callback: (params: IAutoRunResult) => void  ) => {    // 装填数据    this.setupMetaData(metaInfo);    // 装填操作栈    this.setupOptList(optList.map((item) => {      // 行过滤      if(item.type === OPT_TYPE.FILTER) {        return new FilterOpt({          key: item.key,          params: item.params        })      }      // 其余类型操作      ...      // 默认原值返回      return new IdentityOpt({        key: item.key,      })    }));        // 执行操作计算    const result = this.optRun();        // 返回数据    return {      // 计算列      columns: result.columns,      // 执行结果      dataSource: Object.entries(result.dataSourceMap).map(([key, value]) => ({        field: key,        value      })),      // 操作栈执行异常信息      errorInfo: result.errorInfo    };  }}
   
 

应用实践

‍

后续计划

• 更多的探查类型和图表支持

• 操作栈的编辑器体验

• 操作流程的SQL生成