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

相关文章

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

《MySQL中查询VARCHAR类型JSON数据的问题记录》在数据库设计中,有时我们会将JSON数据存储在VARCHAR或TEXT类型字段中,本文将详细介绍如何在MySQL中有效查询存储为V... 目录一、问题背景二、mysql jsON 函数2.1 常用 JSON 函数三、查询示例3.1 基本查询3.2

SpringBatch数据写入实现

《SpringBatch数据写入实现》SpringBatch通过ItemWriter接口及其丰富的实现,提供了强大的数据写入能力,本文主要介绍了SpringBatch数据写入实现,具有一定的参考价值,... 目录python引言一、ItemWriter核心概念二、数据库写入实现三、文件写入实现四、多目标写入

使用Python将JSON,XML和YAML数据写入Excel文件

《使用Python将JSON,XML和YAML数据写入Excel文件》JSON、XML和YAML作为主流结构化数据格式,因其层次化表达能力和跨平台兼容性,已成为系统间数据交换的通用载体,本文将介绍如何... 目录如何使用python写入数据到Excel工作表用Python导入jsON数据到Excel工作表用

Mysql如何将数据按照年月分组的统计

《Mysql如何将数据按照年月分组的统计》:本文主要介绍Mysql如何将数据按照年月分组的统计方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql将数据按照年月分组的统计要的效果方案总结Mysql将数据按照年月分组的统计要的效果方案① 使用 DA

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4