路径:superset-frontend/src/filters/components/Select 

源码文件:

Superset二次开发之Select 筛选器源码分析_前端

功能点:

Superset二次开发之Select 筛选器源码分析_Superset_02

作用

交互

功能

index.ts

作为模块的入口点,导出其他文件中定义的主要组件和函数。

它使其他文件中的导出可以被外部模块使用。

SelectFilterPlugin.tsx

  • 定义主要的插件类 SelectFilterPlugin 和组件 SelectFilterPlugin Component。
  • 使用 controlPanel.ts 中的配置。
  • 使用 types.ts 中定义的类型。

使用 transformProps 处理的数据,并使用 controlPanel 中定义的配置。

  • 渲染 Select 下拉框
  • 处理选择变化
  • 设置数据掩码 (setDataMask)

types.ts

定义了整个 Select 过滤器使用的类型和接口。


  • 被 SelectFilterPlugin 使用来设置可配置选项

被其他所有文件使用,确保类型安全。

buildQuery.ts

构建用于获取过滤器数据的查询。


  • 查询发送到 Superset 后端

被 Superset 的查询引擎使用来获取数据。

根据表单数据创建查询上下文。

controlPanel.ts

定义过滤器的控制面板配置

被 Superset 的控制面板使用,允许用户配置过滤器

设置可配置的选项,如多选、默认值等

transformProps.ts

转换从 Superset 后端接收的属性为组件可用的格式

  • 使用 utils.ts 中的辅助函数

在渲染 SelectFilterPlugin 组件之前被调用

处理数据格式,准备组件所需的属性

交互流程:

  1. index.ts 导出主要组件和函数。
  2. Superset 使用 buildQuery.ts 构建查询获取数据。
  3. 获取的数据通过 transformProps.ts 转换为组件可用的格式。
  4.  SelectFilterPlugin.tsx 使用转换后的属性渲染组件。
  5. 用户与组件交互时,组件使用 setDataMask 更新过滤状态。
  6. controlPanel.ts 定义的配置决定了过滤器在 Superset 中如何被配置和显示。

这种结构允许关注点分离,使得代码更易于维护和扩展。每个文件都有其特定的职责,共同工作以提供完整的过滤器功能。