HugeGraph 部署和Hubble1.0.0的数据导入Bug修复

2023-10-19 06:30

本文主要是介绍HugeGraph 部署和Hubble1.0.0的数据导入Bug修复,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景

HugeGraph 安装部署了最新版本1.0.0,发现它的 Web 工具 Hubble 有一个大 Bug。数据导入的时候,配置节点属性映射这个选项时,下拉框只有一个选项,但实际上,元数据配置中的属性有3个,这个 Bug 是怎么产生的呢?
在这里插入图片描述

下载源码编译

去官网下载了最新版本的 Hubble 源码,本地安装看了看,Hubble 这个 Web 工程前端是 React 写的,定位到了任务映射这个前端文件 VertexMap.tsx

天啊,真的是看不下去了,一千多行,数据处理和 html 标签映射混在一起,让我这个习惯了 Vue.js ,且只用 React 写过几个简单页面的后端,怎么能定位到缺陷代码呢?太高估我自己了,我这一点 React 的皮毛,完全看不懂。

再吐槽一下,HugeGraph 不是已经捐给 Apache 了吗,为什么里面的国际化部分的 en-US 的内容也是中文呢?难道中文要占领全世界了,还是说虽然捐赠出去了,但是只有咱们才用,所以不用国际化了!
在这里插入图片描述
验证结果,1.0.0 的 Hubble 界面上的国际化「语言」切换按钮无效:
在这里插入图片描述

1.0.0 hubble-fe 前端 Bug 修复

昨天导入源码之后,今天把程序跑起来,每个页面上的告警,类似下面的页面告警,逐个解决:
在这里插入图片描述

  1. Menu 组件没有 needBorder 属性,删掉。
  2. Select 组件没有 selectorName 属性,删掉。
  3. Input 的 maxLength 属性名称写成 maxLen 了,修正。
  4. Input 没有 onClearClick 、isShowDropDown、countMode 、originalProps 之类的属性,删掉。
  5. 通过 Map 映射生成的循环 div 列表,没有设置 key 属性,加上动态的 key 。
  6. 最后定位到节点映射文件 VertexMap.tsx 中渲染下拉框的地方:
    在这里插入图片描述

对选择的节点,将其包含的除了主键之外的其他属性填充到下拉框中。测试直接将 Select.Option 的下拉选项列表,不能正常显示:
在这里插入图片描述
页面显示可选项还是只有一个:
在这里插入图片描述

意识到应该是 Select 的配置属性有问题。再拷贝一份 Select 组件,下拉选项就正常,对 Select 属性,逐个验证,发现去掉getPopupContainer={(e: any) => e.parentNode} 这个属性,下拉选项就正常了。
在这里插入图片描述
这个属性是为了解决下来选项内容过多时滚动条问题的,为什么加上后反而不能显示完整的选项了呢?

官网版本使用方法

幸运的是,找到了一个网友分享到网盘的「 0.10 版本的 Server + 1.6.0 的 Hubble 」,合起来才能用它的 Web 界面导入数据,hugegraph0.10.4 的网盘地址。

按官网的版本映射说明,0.10 Server 应该对应 1.5.0 的 Hubble 的,但是这个版本的 Hubble 又太简单了,只有一个数据分析页面,就没有其他功能了,好在搭一个高版本的 Hubble ,也能用起来,就是下面这个界面了:
在这里插入图片描述
这个才是正常的数据节点映射属性的下拉选项!但是低版本的 Hubble1.6.0 ,它的数据分析功能只有一个「Gremlin 分析」 Tab,没有 1.0.0 的「算法分析」:
在这里插入图片描述

启示录

开源软件,虽然能用,但是有没有坑咱也不知道,发现的坑,咱也改不了。最麻烦的是,官网发布的历史版本的下载地址都是失效的,只有最新 1.0.0 可以下载,但是它的数据导入功能没有办法正常配置节点属性,功能就没法正常使用了。

1.0.0 的数据导入的这个 Bug,前一天感觉自己没有能力修改,磕了一个多小时,竟然也能解决,改了这个前端的错误后,需要重新打包Web 图形化工具就正常。搞定这个Bug,我已不再是昨天的我!

另外,React 和 Vue.js 对比之下,Vue.js 对 Java 后端开发人员来说,确实很简洁啊,基于数据驱动的,页面模版+数据定义及处理+CSS 定义,各司其职,内容明了,我还是更欣赏 Vue.js !

这篇关于HugeGraph 部署和Hubble1.0.0的数据导入Bug修复的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/237958

相关文章

MySQL数据目录迁移的完整过程

《MySQL数据目录迁移的完整过程》文章详细介绍了将MySQL数据目录迁移到新硬盘的整个过程,包括新硬盘挂载、创建新的数据目录、迁移数据(推荐使用两遍rsync方案)、修改MySQL配置文件和重启验证... 目录1,新硬盘挂载(如果有的话)2,创建新的 mysql 数据目录3,迁移 MySQL 数据(推荐两

Python数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻:当你的API接口又双叒崩了!2️⃣ 神兵天降:3行代码解决验证难题3️⃣ 深度

MySQL快速复制一张表的四种核心方法(包括表结构和数据)

《MySQL快速复制一张表的四种核心方法(包括表结构和数据)》本文详细介绍了四种复制MySQL表(结构+数据)的方法,并对每种方法进行了对比分析,适用于不同场景和数据量的复制需求,特别是针对超大表(1... 目录一、mysql 复制表(结构+数据)的 4 种核心方法(面试结构化回答)方法 1:CREATE

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》:本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介:一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加

详解C++ 存储二进制数据容器的几种方法

《详解C++存储二进制数据容器的几种方法》本文主要介绍了详解C++存储二进制数据容器,包括std::vector、std::array、std::string、std::bitset和std::ve... 目录1.std::vector<uint8_t>(最常用)特点:适用场景:示例:2.std::arra

Python + Streamlit项目部署方案超详细教程(非Docker版)

《Python+Streamlit项目部署方案超详细教程(非Docker版)》Streamlit是一款强大的Python框架,专为机器学习及数据可视化打造,:本文主要介绍Python+St... 目录一、针对 Alibaba Cloud linux/Centos 系统的完整部署方案1. 服务器基础配置(阿里

MySQL中的DELETE删除数据及注意事项

《MySQL中的DELETE删除数据及注意事项》MySQL的DELETE语句是数据库操作中不可或缺的一部分,通过合理使用索引、批量删除、避免全表删除、使用TRUNCATE、使用ORDERBY和LIMI... 目录1. 基本语法单表删除2. 高级用法使用子查询删除删除多表3. 性能优化策略使用索引批量删除避免

MySQL 数据库进阶之SQL 数据操作与子查询操作大全

《MySQL数据库进阶之SQL数据操作与子查询操作大全》本文详细介绍了SQL中的子查询、数据添加(INSERT)、数据修改(UPDATE)和数据删除(DELETE、TRUNCATE、DROP)操作... 目录一、子查询:嵌套在查询中的查询1.1 子查询的基本语法1.2 子查询的实战示例二、数据添加:INSE

Linux服务器数据盘移除并重新挂载的全过程

《Linux服务器数据盘移除并重新挂载的全过程》:本文主要介绍在Linux服务器上移除并重新挂载数据盘的整个过程,分为三大步:卸载文件系统、分离磁盘和重新挂载,每一步都有详细的步骤和注意事项,确保... 目录引言第一步:卸载文件系统第二步:分离磁盘第三步:重新挂载引言在 linux 服务器上移除并重新挂p

使用MyBatis TypeHandler实现数据加密与解密的具体方案

《使用MyBatisTypeHandler实现数据加密与解密的具体方案》在我们日常的开发工作中,经常会遇到一些敏感数据需要存储,比如用户的手机号、身份证号、银行卡号等,为了保障数据安全,我们通常会对... 目录1. 核心概念:什么是 TypeHandler?2. 实战场景3. 代码实现步骤步骤 1:定义 E