1. 项目简介

1.1. 项目简述

  • 规则可视化引擎的主要目标是对regchain平台的规则进行可视化，主要目标是生成可读性高，美化程度好的可视化图像。
  • 规则可视化编辑的目标是创建可视化编辑引擎，能够做到通过生成可视化图像以及通过图像和节点的拖拉生成可以部署于regchain应用上的规则引擎。

1.2. 可视化规则及编辑引擎流程

  • 通过点击Regchain-Explorer的Rule界面的规则文件，可以跳转到规则可视化的网站。

    • 这个过程中，规则文件的URIEncode网址的Rule参数被传入规则可视化网站，其中一个样例为链接。
    • 注意，如果在网址框中输入之后没有反应，可以通过再次刷新完成进入页面。
    • 其中，网址中rule代码的原文案例为下文代码，可以通过F12中浏览器命令行输入encodeURI('你的代码')完成编码。
regulation hello_worldentities {entity Hello {World}
}rules {rule r1 {Hello.World >= 0}
}
  • 完成可视化的图像样例如下图所示：

1.2.1. 界面以及可以进行的操作

1.2.1.1. 界面整体概览

  • 左边是文件浏览框，内部有工作区，规则文件名和单个规则。
  • 右侧是可视化图形框/编辑框，上方是导航，下方是文本编辑框。

1.2.1.2. 操作

  • 每次新打开一个网页就会新建一个工作区，工作区默认格式名为：newWorkspace_{No.}。
  • 工作区下方就是文件规则名，文件规则名下方是不同的规则。
  • 每点击一个规则，右侧就会出现一个Tab窗口，代表着这个规则所对应的可视化图像。
  • 在可视化图像上，你可以对节点进行拖拽，赋值，放大及缩小。
  • 能在节点之间进行连线。
  • 你可以通过点击导航上不同的tab切换不同的规则。
  • 下方的文本编辑栏中的规则就代表着当前所处的规则文件。(TODO)
  • 在编辑栏中按下Ctrl+Enter就可以对规则代码进行可视化。(TODO)
  • 键盘键入tab键，可视化编辑栏中心会出现一个小型的编辑框，在编辑框中输入文字即可搜索节点，例如键入“>=”，则中心的筛选框中出现">="节点。(模仿blender)，此时键入"Enter"即可在编辑器中显示节点。(TODO)
  • 可以自由的拖动规则，链接连线，下方的文本会自动进行更新。(TODO)
  • 可以通过左侧的这个按钮新建规则。(TODO)
  • 也可以通过这个按钮新建规则文件。(TODO)

1.3. 规则可视化及编辑整体技术思路

1.3.1. 规则可视化框架思路

  • 这幅图描述了可视化的基本流程。
  • Antlr4方向生成的语法书可以供树上遍历时做参考。
  • 生成的语法树如下图所示：
  • 通过Antlr4生成的语法树可以供我们在编写算法时作参考，但是无法作为前端实时编译遍历的资源。(下面会介绍如何用Antlr4编译出语法树)。
  • Antlr4ts编译生成是可供遍历的代码文件，我们通过引入AbstractParseTreeVisitor来获取语法树上的节点和连接信息。
  • 我们在遍历语法树之前在前端界面上生成react-diagram的画布，在我们遍历的同时，我们把树上的信息和我们要进行的操作打入一个虚拟栈中。
  • 这个虚拟栈保存了我们遍历这个树的节点和和我们要进行的动作；建立这个虚拟栈的原因是我们不知道树上的可视化节点生成位置。因为你在绘制某个树节点的同时不知道后续节点的信息，你无法确定当前这个节点的位置[1]。
  • 这个时候需要通过第一轮遍历获取树的信息后，通过请求pymag-trees的API，获取树的位置。
  • pymag-trees的代码已经在项目中重写，已经将Python2的部分改写成了python3。

1.3.2. 规则可视化编辑框架整体思路

  • 总的来说规则可视化编辑的思路要比可视化的思路简单。
  • 他主要通过定义每个节点的代码片段还原代码原来的功能，例如递归到">=“这个节点，则会被描述成”片段1 >= 片段2"。[2]
  • 然后我们递归进入片段1，片段1则会重复执行一遍递归的代码，通过自适应选择代码片段，它会进入合适的函数。
  • 如果这个函数会进一步递归，那么重复上面的步骤；如果不会，就直接返回节点所代表的值。
  • 下面通过一个案例做一个演示
  • 首先从根节点开始递归，生成规则周围的代码，目前的代码块为
rules {rule r1 {}
}
  • 然后进入到大于等于节点，此时返回一个大于等于号，执行的伪代码如下
mid = ">="
left = recur(node_in_1)
right = recur(node_in_2)
return left+" "+mid+" "+right
  • 在node_in_1中获得了变量Hello.World，则直接返回，此时left=Hello.World。
  • 同理right就直接等于0
  • 所以最后的代码块为：
rules {rule r1 {Hello.World >= 0}
}

1.4. 使用框架介绍

1.4.1. React

  • 流行的前端框架，语法和相关概念参见官方文档和教程。

1.4.2. Antlr4

  • 用于定义Domain Specific Language语法的工具，可以通过其生成具有完整功能的语法树。
  • 它的组成部分主要有g4文件，示例代码文件。
  • g4文件主要定义的是语法树不同的切割规则和操作符。
  • 它在mac快速部署的方案可以参考antlr4官网。
  • windows的部署相对麻烦一些，主要可以参考antlr4手册。

1.4.3. Antlr4ts

  • 全称是antlr4 typescript版本。
  • 主要是生成typescript可以使用的库文件。
  • 因为目前react主要是使用typescript作为开发语言，Antlr4ts可以自动的生成相关的visitor类库，以供语法树的遍历。
  • antlr4ts有它关于visitor遍历特定的语法，具体可以参考他们github主页。
  • 目前项目中的按antlr4对于visitor的使用也比较规范，参考当前项目也是可以的。

1.4.4. React-Diagram

  • 一个仿Blender，Unreal Blueprint引擎的图形化前端API接口集。
  • 它的画布允许默认的节点绘制，节点拖动，分层，接口连接等功能。
  • 它的API允许添加各种颜色的节点，为节点命名，修改节点位置，序列化节点信息，添加接口，为接口命名，添加连线，自动分层，并预留了复制，点击等各种事件的实现接口。
  • 最好的入门资料来自于最基础的React-Diagram+Antlr4项目，以及他们的官方项目。
  • 阅读官方项目的gallery对理解整个项目的运作方式很有帮助。

1.4.5. Remix-Project

  • 由于我们可视化编辑的项目非常类似于在线编辑Solidity，并编译部署上链的设计，所以我们选用remix-project作为我们整个可视化最底层的框架。
  • 从他的视觉展示功能的角度，他们具有大型的编辑面板，具有文件浏览器，这都是我们需要的功能。
  • 不仅如此，它对编辑器有所拓展，只要注册它的组件，就能够模仿编辑器的切换tab，保存过去信息的功能。
  • 这个项目以javascript为主，这导致融合antlr4ts存在困难，这一个部分可以通过特殊的融合方法进行处理。
  • remix-project还有一种特殊的持久化存储系统，在初次上手的时候相对难以理解。
  • 上面有对remix-project的基本界面信息做介绍，在下面的部分会对remix-project整体的项目做一个介绍。

1.5. 目前项目启动方法

1.5.1. 安装配置rule-visualization-web

  • npm install -g @nrwl/cli
  • git clone https://github.com/RegTech-OXH/rule-visualization-web.git
  • cd rule-visualization-web
  • npm install
  • nx build remix-ide --with-deps
  • nx serve
  • 访问: localhost:8000。
  • (还需要启动n元树绘制位置的后台服务)

可能遇到的问题

  • 需要先安装node，目前版本为16.6.1，windows，mac以及ubuntu都可。
  • npm版本为7.20.3。
  • 必要的运行库apt-get install build-essential。

1.5.2. n元树绘制后台服务

  • git clone https://github.com/MrWater98/pymag-trees.git
  • 自行安装flask和flask_cors库
  • python3 service.py
  • 成功标志：

测试网址

  • http://localhost:8090/#optimize=false&runs=200&evmVersion=null&version=soljson-v0.8.4+commit.c7e474f2.js&rule=regulation%20hello_world%0A%0Aentities%20%7B%0A%20%20%20%20entity%20Hello%20%7B%0A%20%20%20%20%20%20%20%20World%0A%20%20%20%20%7D%0A%7D%0A%0Arules%20%7B%0A%20%20%20%20rule%20r1%20%7B%0A%20%20%20%20%20%20%20%20Hello.World%20%3E%3D%200%0A%20%20%20%20%7D%0A%7D

2. Rule-Visualization-Web 项目核心框架

2.1. 框架架构图

  • 注1： Node fs为Node中对其所在文件系统进行封装的特殊文件系统。
  • 住2：remix注册组件以及remix事务来自于remix原生的事务管理库。

2.2. 框架修改关键位置解析

  • 整个框架的入口位置为app.js。
  • app.js引入了file-panel.js组件，它通过URL参数获得了规则文件信息。
  • 然后file-panel.js将规则文件信息交给ruleInit.tsx，此时可以对规则文件进行一个初筛，获取分开注释的单个规则——这用于将一个规则文件的多个规则分开。
  • 然后通过初始化工作区的过程，将信息交给filManager.js。
  • fileManager.js把信息传递给editor.js，然后editor.js通过ParserAlg，利用React的渲染机制，把自己editor的界面交给RuleParser.tsx进行渲染。
  • RuleParser.tsx根据之前获取的所有文件信息，在通过8802端口中的位置信息进行画面的渲染。

3. RuleParser算法与数据结构解析

3.1. Antlr4ts的安装和配置

  • npm install antlr4ts --save
  • npm install antlr4ts-cli --save-dev
  • 将g4文件放入apps\remix-ide\src\app\ruleparser\antlrScript(可以自选位置)。
  • 在package.json的scripts加入下面这行
"generate-visitor": "antlr4ts -o apps/remix-ide/src/app/ruleparser/_g4_script -visitor apps/remix-ide/src/app/ruleparser/antlrScript/RuleParser.g4"
  • 运行npm run generate-visitor
  • 运行成功后尝试引入import { RuleParserVisitor } from "./_g4_script/RuleParserVisitor";，引入成功即为Antlr4ts安装成功。

3.2. Visitor基本工作原理

  • 首先如果要用visitor遍历语法树，那么则需要实现RuleParserVisitor<object>的接口，其中object这里意味着每个树节点返回上一个节点的类型属性，你也可以修改成string或者其他的类型。
  • 通过实际的语法树来理一遍visitor的访问顺序：
  • 这个是hello_world实际的语法树文件，上面关于antlr4配置生成语法树的链接有很完整的介绍：就是要注意在windows中，终止语法树读取的快捷键是Ctrl+Z外加回车。
  • 对于visitor而言，root为遍历的入口，那么遍历这个root就需要一个实现visitRoot，我们需要遍历它的每个子节点，那么就需要通过一个for循环，访问它的每个孩子this.visit(context.getChild(i));,那么这个函数就会写成：
visitRoot(context: RootContext){for(let i = 0;i < context.childCount;++i){this.visit(context.getChild(i));}return {};}
  • 继续，当我我们要访问ruleBlocks的时候，我们就需要实现visitRuleBlocks，在visitRuleBlocks中我们可以实现我们接下来的逻辑。
/** Note: Visit `ruleBlocks` node* Assumption: ruleList is the third child*/visitRulesBlock(context:RulesBlockContext){this.visit(context.getChild(2));return {};}
  • 当然，每个节点有它当时设定的一些前提，我们要利用这一些前提对访问进行构造。

4. 可视化绘制原理

4.1. 算法流程描述

  • 首先，算法从遍历树节点开始，在会渲染的节点增加层数和构建连接情况，把这些存储在一个叫treeStr的字符串中。
  • 一个treeStr的例子是：Tree("root",Tree("m",Tree("leave"),Tree("leave")))，Tree的第一个参数为参数名，第二个参数为子树，这是一个递归结构的字符串，这个结构将会被发送到后台的service.py解析并返回节点位置，上面这个字符串返回的节点位置为：
finished v = m children
shift: leave: x=1.0 mod=0 0 0
shift: leave: x=0.0 mod=0 0 0
finished v = root children
shift: m: x=0.5 mod=0 0 0
  • 同理，遍历树节点时，将节点的数据存储的tree_instr如下图所示，每个tree_instr的元素为一个object，有着key和value：
  • 它的遍历方式类似访问一个类似一个栈，渲染一个节点的时候总会和栈顶节点作连线。
  • 每一个不同的key的渲染方式都是不同的。

4.2. n元树绘制优化算法演示

  • [1]

4.3. 树指令算法(tree_instr)演示(TODO)

  • 首先，声明一个栈St，作为上一个遍历的位置。
  • 首先遍历这个数组，第0位为render_rule，则在画布上渲染一个rule节点；
    • 然后检索St的栈顶，发现没有元素，不做操作。
    • 跟着往St中推入这个节点。
  • 然后遍历第1位，发现是render_rs3，代表着有三个子节点(语法树种)的RelationExpr，在画布上渲染一个Relation节点。
    • 然后检索栈顶，发现栈顶为rule的节点，则将其相连。
    • 往St中推入这个节点。
  • 遍历第2位，发现instr且指令不是out，忽略；
  • 遍历第3位，发现reander_ea，代表着entity.attributeName节点，在画布上渲染一个entity.attributeName节点。
    • 检索栈顶，发现是RelationExpr的节点，将其相连。
    • 往St中推入这个节点。
  • 遍历第4位，发现是out，推出栈顶节点。
  • 以下略

5. 可视化编辑系统(TODO)

参考文献：

[1] https://llimllib.github.io/pymag-trees/
[2] https://developers.google.com/blockly

规则引擎代码可视化编辑全梳理相关推荐

  1. PHP可视化告警规则引擎,开源可视化规则引擎 决策引擎与规则引擎有什么区别？...

    如何部署JBoss Drools的可视化规则设计工具包 JBoss Drools的可视化规则设计工具包在Drools 4.0的时候叫drools-jbrms. drools-jbrms需要JDK1.5 ...

  2. drools规则引擎的在项目中的使用手记

    需求 按照登录用户的会员等级 和签到周期 根据一定的计算规则送积分.由于之前都是通过if else去做的控制.规则变更的时候可能需要重新调整代码甚至发布服务. 由于不想再每次规则变更后需要调整代码,于 ...

  3. Drools规则引擎-memberOf操作

    场景 规则引擎技术讨论2群(715840230)有同学提出疑问,memberOf的使用过程中如果,memberOf之后的参数不是集合也不是数组,而是格式如"1,2,3,4"的字符串 ...

  4. drools 规则引擎 javaDemo版

    导航 一.简单规则使用 二.有状态的session会话规则使用 -------------------------------------------------------------------- ...

  5. drools规则引擎可视化_一文看懂开源工作流引擎 Flowable「转」

    原文链接:[https://xie.infoq.cn/article/ece75889c715e0bc87a73e44c]. 一.工作流引擎使用场景 工作流在企业管理系统中是高频使用的功能,一个最常见 ...

  6. 数据可视化（全彩）（大数据丛书，首次全面细致地梳理了可视化理论，方法、工具与应用案例。马匡六教授、石教英教授鼎力推荐，十二五国家重点图书出版规划项目）...

    大数据丛书 数据可视化(全彩)(大数据丛书,首次全面细致地梳理了可视化理论,方法.工具与应用案例.马匡六教授.石教英教授鼎力推荐,十二五国家重点图书出版规划项目) 陈为  沈则潜等编著 ISBN 97 ...

  7. Fibo Rule规则引擎可视化

    本篇主要讲述决策引擎可视化进阶之路的重要实践,如何通过产品上的创新和技术突破,实现工作效率.系统性能的提升.希望对大家有所帮助! 01 什么是决策引擎 决策引擎是指企业针对其客户提供个性化服务的决策平 ...

  8. drools规则引擎可视化

    参考:drools规则引擎可视化 Drools是一款基于Java的优秀的规则引擎,将复杂多变的业务规则从硬编码中解放出来,以规则脚本的形式存放在文件中,使得修改规则不需要改动代码重启服务就能生效. D ...

  9. 规则引擎：大厂营销系统资格设计全解

    业务进行营销活动目的是用最少的钱实现更好的营销效果,此时就需要针对营销活动的资格进行控制,其中就包括了用户身份.用户所处的环境等等一系列因素的考虑,且为了防止恶意套取营销费用和做到营销效果的持续性,会 ...

最新文章

  1. 吴恩达机器学习笔记-梯度下降
  2. Oracle的登陆问题和初级学习增删改查(省略安装和卸载)
  3. git show查看本地文件的修改部分，git diff 如何比较文件，git grep 搜索
  4. MySQL / B + 树算法在 mysql 中能存多少行数据？
  5. 手动添加ubuntu服务
  6. 内温的整体优先效应实验_陕西师范大学《普通心理学》第四章-知觉
  7. layui2.4.0前的table隐藏列
  8. linux 自定义vi dd,Vim常用命令及配置方案
  9. ubuntu16.04搞出百度的方法
  10. kinect内参数的标定
  11. 第三次作业 词频统计
  12. 让我们一起ML吧（一）聚类分析
  13. Qt调用工业相机之海康威视相机
  14. C#写的ActiveX弹出窗口在Delphi程序中的应用时出现了问题。
  15. Axure RP8 授权码亲测可用
  16. c语言break后要分号吗,C语言程序每行结尾处都必须加分号(;)作为结束符号。
  17. 微博html5版打不开,PC端网页版微博就是打不开是什么问题啊！缓 – 手机爱问
  18. 团队协作与团队内部竞争_从个人团队到竞争组织
  19. ASP.NET Ajax调用WCF服务示例dudu
  20. python使用虚拟内存_虚拟内存、物理内存

热门文章

  1. 利用Base64对文本进行加密解密操作
  2. 大数据分析案例-基于KNN算法对茅台股票进行预测
  3. android service常驻通知栏,android实现常驻通知栏遇到的问题及解决办法
  4. windows电脑安装python教程
  5. 适配 iPhone13、iPhone13 pro、iPhone13 proMax
  6. 安卓讲课笔记3.4 网格布局
  7. 广大华软html5期末试卷,广州大学华软软件学院2019年广东录取分数线（2019广大华软工科IT类专业受热捧）...
  8. 如何让便签的提醒事项间隔一段时间再次提醒
  9. linux运维面试题3
  10. win10pe制作方法