《构建个人知识图谱》006：知识节点详情和图片预览

今天为知识图谱添加详情和图片预览。这样在查看知识图谱的时候可以查看和编辑相关知识的详情。

首先看下最后的界面预览：

节点详情

之前一直忘了一件事情，就是知识节点上定义了很多东西但是在图谱上看不到。加一个点击节点显示详情的功能。

想详情显示一下主要的东西就行，大致如下：

实现一下 UI，调整下样式：

顺便实现下按着 Shift 多选的功能，：

网页快照

相比于看摘要，有时候我更喜欢欣赏哪些设计精美的主页。当不想打开主页的时候如果能直接看到网页快照截图就好了。

我们使用 Selenium 这个自动化测试工具来进行页面截图，然后把图片存储在分布式存储服务 Minio 上， 程序访问的时候从 Minio 上获取图片内容展示。

使用 Selenium 截图很简单，如果要固定的大小可以使用 set_window_size 函数。

driver = webdriver.Chrome()
driver.get(url)
driver.set_window_size(width, height)
driver.save_screenshot(filepath)

然后把图片上传到 Minio 服务器：

client = Minio(
    endpoint,
    access_key="MyPlAfOBM",
    secret_key="4RLA4T1jz7cO1i",
    secure=False,
)
client.fput_object(bucket, object_name, file_path, )

我直接用知识节点的名字做 Minio 的文件夹名字，为了避免根目录文件夹太多，我用首字母先分了一层文件夹：

第二级目录放了知识节点文件夹：

最后放了两个分辨率的截图文件：

Minio 权限设置 最后不要忘记给 Minio 设置权限哦，因为是本地用所以我把桶设置成个公共读。 {
    "Version": "2012-10-17",
    "Statement": [{
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Principal": {
        "AWS": ["*"]
      },
      "Resource": [
        "arn:aws:s3:::knowledge-graph/*"
      ],
      "Sid": ""
    }]
}

如果知识节点维护了主页，那么把主页的截图保存然后显示在详情里面：

多个知识节点带着图片的预览：

编辑

同时还在详情标题的右边加了个编辑按钮，方便快速编辑：

点击弹窗可以进行快速的修改：

修改的弹窗和新增的表单一样：

更多布局

最后看到框架作者的 Example 里面有一个 tree 布局的，我们也跟着实现一下。

不过由于数据问题，显示出来比较杂乱。

换另外一组数据效果明显一些：

在仅查看文本和仅查看节点的时候，有不同的视觉效果哦。

仅查看文本，：

查看节点：

最后看个布局切换的视频。

--- END ---