appdef to cytoscape

appdef.js

// replace `element` with what gets generated from here
// https://codesandbox.io/s/state-machine-visualizer-forked-vhky4h?file=/components/Graph.js

// original https://codesandbox.io/s/k000rnpnn7?file=/components/Graph.js

    const objects = AppState.getAppDef().objects;
    const elements = [];
    // push leaves
    Object.values(objects).forEach(o => {
      // an edge
      const edge = o;
      if (edge.from && edge.to) {

        elements.push({
          data: {
            id: edge.id,
            source: edge.from,
            target: edge.to
          }
        })
      }
      // an input or output
      const node = o;
      if (node.blockId) {
        elements.push({
          data: {
            id: node.id,
            parent: node.blockId,
            label: `${node.isInput ? 'input: ' : 'output: '} ${node.name}`
          }
        })
      }
      const block = o;
      if (block.componentId) {
        elements.push({
          data: {
            id: block.id,
            parent: block.componentId
          }
        })
      }
      const comp = o;
      if (comp.uuid) {
        elements.push({
          data: {
            id: comp.id,
            label: comp.name
          }
        })
      }
    });