Draft a new interaction design for the Portal's information architecture

[pomelo-nwu]

as titled.We need to consider the sub-groups of GraphScope. Based on the features of engines like GIE, GAE, and GLE, design the shortest product interaction paths that cater to the target audience and adjust the existing information architecture.

[yecol]

What is GSE?

[pomelo-nwu]

What is GSE?

Typo, it's GIE

[yecol]

We may have these products,

• GraphScope One
• GraphScope Interactive
• GraphScope Insight
• GraphScope Analytics
• GraphScope Learning

[pomelo-nwu]

GraphScope Portal 信息架构升级（中文）

• 图实例

  • 图列表
    • 建模
      • 来源：接口 / CSV / SQL DDL
      • 手动拖拽 / 填写 Properties
    • 导数
      • 导数任务列表，数据的详情，用 dataset-viewer 展示
      • 创建导数
    • 查询
      • 推荐查询
      • 历史查询
      • 智能查询
  • 创建图实例
    • 命名
    • 选择引擎类型 GIE/GAE/GLE/GART

• 扩展插件

  • 存储过程
  • 图分析算法
  • 图推理模型

    导航风格选择

• 延续现在的导航，也是TigerGraph Beta 版本的设计，即每个Graph instance 的具体操作

  • design schema
  • load data
  • cypher query

都成为一个 navbar 导航，当用户进入具体的操作时，比如「design schema」需要将 graph name 也相应的展示在左上角。如果用户没有 graph name（即没有创建图实例）则会有相应的提示。

• 另一种信息架构是参考Neo4j，或者是广泛的图产品设计，三大操作都依托在图实例中，每个具体实例中，用三个大Tab去导航区分，这种设计也类似 dify.ai，对于用户的操作有强指导性

Graphs

• 创建一个图实例，只需要选择 name 和 engienType，大大降低初接触成本
• 增加 landing page，video tutorial，用户可以选择关闭，降低初始学习成本

Interactive 场景考虑：如果不支持建立空图，可以这个create graph 可以现在前端用 indexDB 存储一个假实例，等design schema 成功后，删除本地的 假实例，换成接口返回的真实例

对于图实例的三大操作

• 点击实例中的三个操作Button，即可进入到如下页面，通过tab 可以切换建模/导数/查询，未来还可以增加explore / report 两个 tabs

建模 Modeling / Design schema

针对3类用户，我们建模分别有三种操作方式

手动建模

• 针对图数据库模型设计者，用户可以在一个空白画布区域中，添加节点，通过节点拖拽边（多边/自环），点击节点和边可以进行属性字段的设置。相比于传统的表单建模，这种方式更加简单高效，更像是在「白板」上设计图模型。

  CSV 建模

• 针对拥有 CSV 数据的开源用户而言，手动建模固然方便，但是动辄上十个节点的添加以及属性编辑就有点不够节省体力，尤其用户默认自己的数据中，存在着某种潜在关系，如果我们能够智能推测出来，让用户二次编辑确认，那么就会显得很好用！

如上图所示，用户批量上传CSV（也可拖拽进来），即可 Sample 出每个CSV文件的 头信息，前三行数据，分隔符等。接下来，点击展开每个CSV文件，需要让用户手动确定（当然系统会默认给一个默认充值）

• Vertex or Edge
• Vertex
  • id
• Edge
  • source
  • target

SQL DDL 建模

用户可以上传SQL DDL，即可将其转化为图模型。

• SQL DDL（和 CSV 交互可以一致）

这里面也可以和CSV 一样，给用户一个二次手动 Mapping 的机会。让用户指定哪些是点表，哪些是边表。字段怎么映射。最后，保存的入口都在画布的右上角

导数 Import / Load data

映射字段

画布区域和 Modeling 是一样的，只是不能够编辑（不能拖拽，添加新的节点和边），如果需要编辑，则需要返回到 「Modeling」这个Tab去编辑，编辑完保存。 右边的属性面板和 Modeling 也 一样，知识将 Label 修改区域换成文件路径区域。如果路径填写OKAY，则画布上方会有「Mapped」样式字段

属性字段的映射

导数 Job 详情

• 仅日志信息！不要详细数据

  查询 Query