将图形保存到链接到 cytoscape.js 中的用户配置文件的数据库

问题描述

我正在我的 reactjs 应用程序中使用 cytoscape.js 进行图形可视化。我想要做的是为用户添加保存和呈现链接到他们的个人资料的图表的能力。我正在使用 @auth0/auth0-react 验证我的 React 应用程序。我通过将图形下载为 JSON 文件然后导入来将图形导出到 JSON 图表回到我的应用程序。将图形导出到 JSON 文件并将相同的 JSON 文件上传回应用程序工作正常，但是，我想实现保存到内存/数据库（postresdb）功能，并且保存的图形应该与当前用户相关联。我唯一的代码是下载到 JSON 文件并上传回应用程序。任何有关代码片段的帮助将不胜感激。

下载图表的代码：

const exportJson = () => {
    // GET GRAPHS AND ELEMENTS
    const jsonGraph = graph.json();
    const { elements } = jsonGraph;
    // ATTACH STYLES
    if ('nodes' in elements) {
      elements.nodes.forEach((node,index) => {
        const sNode = graph.$(`#${node.data.id}`);
        elements.nodes[index].style = sNode.style();
      });
    }
    if ('edges' in elements) {
      elements.edges.forEach((edge,index) => {
        const sEdge = graph.$(`#${edge.data.id}`);
        elements.edges[index].style = sEdge.style();
      });
    }
    // DOWNLOAD JSON FILE
    const data = { graph: graph.json(),styleGraph: jsonGraph };
    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data))}`;
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute('href',dataStr);
    downloadAnchorNode.setAttribute('download',`cag.json`);
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  };

以及上传图表的代码：

const uploadJson = (contents) => {
    let json;
    try {
      json = JSON.parse(contents);
    } catch (e) {
      return setError('Json file is not properly formatted.');
    }

    graph.json(json.graph);
    // APPLY STYLES
    const { elements } = json.styleGraph;
    if ('nodes' in elements) {
      elements.nodes.forEach((node) => {
        const sNode = graph.$(`#${node.data.id}`);
        sNode.style(node.style);
      });
    }
    if ('edges' in elements) {
      elements.edges.forEach((edge) => {
        const sEdge = graph.$(`#${edge.data.id}`);
        sEdge.style(edge.style);
      });
    }
    return resetAppValues();
  };

总而言之，这就是我现在想要实现的目标：

防止我的图表在刷新浏览器或退出应用程序。我希望他们坚持下去。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cytoscape cytoscape-web cytoscape.js