?作者 ｜ 董哲

需求背景

數(shù)據(jù)探查上線之前，數(shù)據(jù)驗證都是通過寫 SQL 方式進行查詢的，從編寫 SQL，到解析運行出結果，不僅時間長，還會反復消耗計算資源，探查上線后，只需要一次探查，就可以得到整張表的探查報告，但后續(xù)我們還發(fā)現(xiàn)了一些問題，主要有三點：

• 無法看到探查的數(shù)據(jù)明細以及關聯(lián)的行詳情，無法對數(shù)據(jù)進行預處理操作。
• 探查還是需要資源調(diào)度，等待時長平均分鐘級。
• 與質(zhì)量監(jiān)控沒有打通，探查數(shù)據(jù)的后續(xù)走向不明確。

針對這些問題，我們進一步開發(fā)了動態(tài)探查需求，解決的問題如下：

1. 基于大數(shù)據(jù)預覽的探查，支持對數(shù)據(jù)進行函數(shù)級別的預處理。
2. 探查結果秒級更新，實時響應。
3. 與數(shù)據(jù)監(jiān)控打通，探索 SQL 的生成模式。

本文主要介紹動態(tài)探查的應用場景和相關的技術實現(xiàn)。

應用場景

探查主要應用在元數(shù)據(jù)管理，數(shù)據(jù)研發(fā)，數(shù)倉的開發(fā)以及數(shù)據(jù)治理，可為對數(shù)據(jù)質(zhì)量有需求的場景提供數(shù)據(jù)質(zhì)量的發(fā)現(xiàn)和識別能力。目標用戶除了研發(fā)同學，也包含不是以 SQL 研發(fā)為主的群體，比如算法建模和數(shù)據(jù)挖掘等領域。

探查可以有效的打通三個閉環(huán)：

• 元數(shù)據(jù)管理 -> 探查 -> 數(shù)據(jù)預覽探查（庫表的質(zhì)量報告）
• 數(shù)據(jù)監(jiān)控 <-> 數(shù)據(jù)探查
• 動態(tài)探查 -> SQL -> 數(shù)據(jù)開發(fā) -> 調(diào)試 -> 探查報告（質(zhì)量分析）

名詞解釋

• 全量探查：基于庫表的全量探查，后端引擎執(zhí)行，展示探查后列的統(tǒng)計分布結果。
• 動態(tài)探查：基于抽樣的部分數(shù)據(jù)探查，展示字段明細，可以使用操作對數(shù)據(jù)進行預處理，并實時動態(tài)的展示統(tǒng)計分布結果。數(shù)據(jù)獲取后的過程都由前端執(zhí)行。

兩者的對比示意圖

技術實現(xiàn)

除了數(shù)據(jù)的抽樣部分在后端做，其他的都是前端實現(xiàn)的。包括大數(shù)據(jù)展示，探查計算，卡片聯(lián)動，操作棧交互，以及未來要做的函數(shù)編輯器以及 SQL 生成。

技術架構

1）抽樣能力：對數(shù)據(jù)進行基于質(zhì)量分布特征的抽取。

目前做的是隨機抽樣，后續(xù)嘗試基于特征來抽樣。

2）數(shù)據(jù)展現(xiàn)：大容量的數(shù)據(jù)載體，支持對數(shù)據(jù)處理的實時展現(xiàn)。

前端目前是基于虛擬滾動 Table 做的，后續(xù)打算遷移到 canvas table 上。

3)前端探查：實時探查，可視化展現(xiàn)數(shù)據(jù)分布，突出質(zhì)量指標。

4）數(shù)據(jù)處理能力：函數(shù)處理能力（GroupBy..）

5）操作棧：需要對數(shù)據(jù)操作進行管理和回溯

基于 immutable 和操作流實現(xiàn)操作棧。

6)編輯器：提供完整函數(shù)的功能，需要：詞法解析，智能提醒，語法高亮。

基于編輯器實現(xiàn)函數(shù)的功能，antlr4 實現(xiàn)詞法解析，配合 monaco editor 實現(xiàn)一些智能提醒和語法高亮。

7)生成 SQL：將可視化的交互式操作轉換成可執(zhí)行的 SQL。

目前 sql generator 有以下幾種方式：

• 基于鏈式調(diào)用生成
• 基于標簽模板生成
• 基于 AST（抽象語法樹）去做

關鍵技術及實現(xiàn)

大數(shù)據(jù)渲染

由于動態(tài)探查場景下前端需要支持最大 5000 條數(shù)據(jù)的展示和交互，所以在渲染這塊存在比較大的壓力，主要集中在探查卡片和數(shù)據(jù)預覽兩個部分。

探查卡片包含了特定列的部分關鍵信息匯總，比如 0 值、Null 值、枚舉值等，如下圖紅框部分：

探查卡片部分由于存在較多定制化內(nèi)容，所以采用了虛擬列表方案進行渲染，支持收起狀態(tài)和展開狀態(tài)：

數(shù)據(jù)預覽部分展示的是探查的全部數(shù)據(jù)集合，可以快速查看原始數(shù)據(jù)的詳細內(nèi)容，由于內(nèi)容同質(zhì)化比較高，所以數(shù)據(jù)預覽采用的是基于團隊內(nèi)部維護的 canvas 版本 Table 方案進行渲染，如下圖紅框部分：

卡片聯(lián)動

由于卡片和數(shù)據(jù)預覽列的寬度差異較大，并且上下兩部分滑動是獨立的，造成在選擇查看某個具體列的時候，上下對齊位置會比較麻煩，為了解決這個問題，這塊增加了自動定位功能，演示效果如下：

這部分需要解決的問題有兩個：卡片中間點坐標計算和自動定位邏輯。

中間點坐標計算邏輯如下：

// 計算卡片中點坐標 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) {
      // 此處容易出現(xiàn)吸邊
      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
  );
}

獲取到中點坐標后，自動定位需要符合如下規(guī)則：

1. 選中卡片后，表格要自動滾動定位到下方居中對齊，無法滿足對齊標準的，盡量靠近選中卡片位置。
2. 選中表格列后，卡片要自動滾動定位到上方居中對齊，無法滿足對齊標準的，盡量靠近選中表格位置。
3. 搜索選中列后，卡片和表格要自動滿足上面兩個規(guī)則，并滾動到可視區(qū)域內(nèi)。

規(guī)則中有幾種邊界情況，參考下圖：

居中對齊是對于卡片和列寬在 scroll 距離允許情況下的理想對齊方式，貼邊對齊是針對卡片在起始和結束位置 scroll 不足以滿足居中對齊要求時候的對齊方式，除此之外還有一種是卡片的寬度遠大于列寬，并且不是起始或者結束位置的時候所采取的對齊方式，如下如卡片 B 因為無法滾動，卡片 A 的寬度又占據(jù)了底部第二列的一部分，所以此時卡片 B 只能高亮和底部的列進行對齊。

操作棧

動態(tài)探查支持了對于探查結果的基礎分析能力，比如列刪除、過濾、排序等，如下圖紅框部分：

用戶對于探查結果的每一次操作都會被記作一次操作，多次操作串聯(lián)起來形成操作棧，可以自由的修改或者刪減操作棧里的操作，并實時查看最新結果，以過濾操作演示效果如下：

操作棧部分需要處理的問題主要有以下幾點：

1)如何管理多種操作進行串行計算

這里把所有操作都抽象成了Input + Logic = Ouput的結構，Input 是輸入?yún)?shù)，此處可以是指某一列的數(shù)據(jù)、上一步操作的結果或者其他計算值，Logic 是操作的具體邏輯，負責根據(jù) Input 轉換生成 Output，Output 可以作為最終結果進行渲染，也可以再次進入下一環(huán)節(jié)參與計算，拿列刪除操作舉個栗子，下面是大體代碼實現(xiàn)：

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
    }
  }
}

可以看到 ColDelOpt 內(nèi)部有一個 run 方法，該方法支持傳入一個包含了列信息 columns 和數(shù)據(jù)集 dataSourceMap 的 params 對象，此處 params 即被抽象的外部輸入?yún)?shù) Input，run 方法內(nèi)部的邏輯部分即被抽象的 Logic 部分，最后方法返回值包含了最新的 columns 和 dataSourceMap，即為 Output 部分?；谶@種結構，用戶所有的操作都可以被初始化成不同的 Opt 實例，由操作引擎統(tǒng)一調(diào)用實例的 run 方法，并傳入所需的參數(shù)，最終得到計算結果。

2)某個操作被修改后如何進行二次計算

操作棧的計算是由計算引擎來完成的，引擎負責根據(jù)外部事件，來自動執(zhí)行現(xiàn)有操作的數(shù)據(jù)處理工作，引擎執(zhí)行流程和大體代碼如下：

// 操作引擎
class OptEngine {

  // 操作列表
  private optList: IOptEngineItem[] = [];

  // 原始數(shù)據(jù)
  private metaData: IOptEngineMetaInfo = {
    columns: [],
    dataSourceMap: {},
  };

  // 執(zhí)行算子
  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 {
        // 執(zhí)行算子計算
        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
  ) => {
    // 裝填數(shù)據(jù)
    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,
      })
    }));

    // 執(zhí)行操作計算
    const result = this.optRun();

    // 返回數(shù)據(jù)
    return {
      // 計算列
      columns: result.columns,
      // 執(zhí)行結果
      dataSource: Object.entries(result.dataSourceMap).map(([key, value]) => ({
        field: key,
        value
      })),
      // 操作棧執(zhí)行異常信息
      errorInfo: result.errorInfo
    };
  }
}

應用實踐

以一個小例子來演示下動態(tài)探查的使用。前端開發(fā)過程中，有一個真實的場景，我們?yōu)榱伺挪橐粋€豎屏顯示器的 bug（1080*1920），想找到關聯(lián)的用戶，看其分布情況，就可以很方便的用動態(tài)探查去尋找。

后續(xù)計劃

關注動態(tài)探查的操作豐富性以及之后的數(shù)據(jù)走向，比如離線數(shù)據(jù)導出，和生成 SQL 等，技術方向上主要放在以下幾個方面：

更多的探查類型和圖表支持

動態(tài)探查目前支持空值，枚舉值，零值，數(shù)據(jù)統(tǒng)計等基礎的探查功能，未來會計劃支持包括 map，json，time，sql 語句等類型的識別和探查。同時提供更豐富的圖表支持。

操作棧的編輯器體驗

動態(tài)探查目前還是以類 Excel 的操作為主，未來主要提供編輯器級別的操作體驗，可以提供 HSQL 支持的大部分函數(shù)，包括支持多表 join 功能。

操作流程的 SQL 生成

動態(tài)探查目前的 SQL 能力還未建設完成，會在未來結合編輯器級別的操作，并支持多表，配合詞法解析功能，提供更精準的生成 SQL 能力。