0

我正在我的 reactjs 应用程序中使用 cytoscape.js 进行图形可视化。我想要做的是为用户添加保存和呈现链接到他们的个人资料的图表的能力。我正在使用@auth0/auth0-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();
  };

总而言之，这是我现在希望实现的目标：

  • 防止我的图表在我刷新浏览器或注销应用程序时丢失。我希望他们坚持下去。
4

0 回答 0