Security News
New Python Packaging Proposal Aims to Solve Phantom Dependency Problem with SBOMs
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
react-lineage-dag
Advanced tools
用于表示表与表之间,表和其他关联实体之间关系的图
English | 简体中文
$ npm install react-lineage-dag@2.x
import LineageDag from 'react-lineage-dag';
// 需要引入样式
import 'react-lineage-dag/dist/index.css';
const data = {
tables: [
{
id: '1',
name: 'table-1',
fields: [
{
name: 'id',
title: 'id'
},
{
name: 'age',
title: 'age'
}
]
},
{
id: '2',
name: 'table-2',
fields: [
{
name: 'id',
title: 'id'
},
{
name: 'age',
title: 'age'
}
]
},
{
id: '3',
name: 'table-3',
fields: [
{
name: 'id',
title: 'id'
},
{
name: 'age',
title: 'age'
}
]
}
],
relations: [
{
srcTableId: '1',
tgtTableId: '2',
srcTableColName: 'id',
tgtTableColName: 'age'
},
{
srcTableId: '1',
tgtTableId: '3',
srcTableColName: 'id',
tgtTableColName: 'age'
}
]
}
const App = () => {
return (
<LineageDag {...data} />
)
}
属性名 | 属性类型 | 默认值 | 说明 |
---|---|---|---|
width | number | 100% | 画布宽度 |
height | number | 100% | 画布高度 |
tables | ITable[] | [] | 节点数据,具体描述位于表格下方 |
relations | IRelation[] | [] | 线段数据,具体描述位于表格下方 |
column | column[] | [] | 列的属性配置(和antd table的column概念相似),具体描述位于表格下方 |
centerId | string | undefined | 中心点,当中心点发生变化时,画布会聚焦此中心点 |
operator | operator[] | [] | 每个节点上的操作按钮渲染配置,具体描述位于表格下方 |
className | string | undefined | 画布类名 |
actionMenu | action[] | [] | 右上角操作按钮(放大、缩小、居中),具体描述位于表格下方 |
config | config | {} | 画布配置,具体描述位于表格下方 |
onLoaded | Function | noop | butterfly加载完毕时 |
interface ITable {
id: string; // 表ID
name: string; // 表名(显示名)
isCollapse: boolean; // 是否折叠所有列
fields: [] // 列数据
}
interface IRelation {
id?: string; // 关系ID,非必填,建议填写
srcTableId: string; // 源表格ID
tgtTableId: string; // 目标表格ID
srcTableColName: string; // 源表字段名
tgtTableColName: string; // 目标表字段名
}
interface operator {
id: string; // 按钮唯一标识
name: string; // 按钮中文名
icon: JSX.Element // 操作项渲染
onClick: (node: any): void // 按钮点击事件
}
interface column {
key: string, // 列的唯一标识
width?: number, // 列的宽度
primaryKey: boolean, // 这列的key对应的value是否作为键值对,与antd中的column的primaryKey概念对应
render?(text: any, record: any, index: number): void // 列渲染的方法
}
interface config {
delayDraw: number; // 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染,否则坐标都产生偏移,如:antd的
titleRender?: (title: string, node:any) => void; // 自定义节点的title render
showActionIcon?: boolean, // 是否展示操作icon:放大,缩小,聚焦
enableHoverChain: boolean, // 是否开启hover高亮链路
enableHoverAnimate: boolean, // 是否开启hover高亮血缘链路带动画
minimap?: { // 是否开启缩略图
enable: boolean,
config: {
nodeColor: any
}
}
}
# clone 本项目后
$ npm install
$ cd example
$ npm install
$ npm start
FAQs
表格/字段血缘React组件
We found that react-lineage-dag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.