modern-sql-flow v0.1.3

modern-sql-flow

A Sql flowchart that represents sql query in graphical way!

Examples

import { ModernSqlFlow } from 'modern-sql-flow'

const graph_data = {
  "nodes": [
    {
      "type": "table",
      "id": "result_4",
      "label": "city",
      "columns": [
        {
          "id": "column_1",
          "label": "city_id"
        }
      ]
    },
    {
      "type": "table",
      "id": "result_3",
      "label": "result_3",
      "columns": [
        {
          "id": "column_1",
          "label": "city_id"
        }
      ]
    },
    {
      "type": "table",
      "id": "result_6",
      "label": "customer_360",
      "columns": [
        {
          "id": "column_1",
          "label": "phone_number"
        }
      ]
    },
    {
      "type": "table",
      "id": "result_5",
      "label": "result_5",
      "columns": [
        {
          "id": "column_1",
          "label": "phone_number"
        }
      ]
    },
    {
      "type": "table",
      "id": "result_2",
      "label": "customer",
      "columns": [
        {
          "id": "column_1",
          "label": "first_name"
        },
        {
          "id": "column_2",
          "label": "last_name"
        },
        {
          "id": "column_3",
          "label": "email_id"
        },
        {
          "id": "column_4",
          "label": "city_id"
        },
        {
          "id": "column_5",
          "label": "phone_number"
        }
      ]
    },
    {
      "type": "table",
      "id": "result_1",
      "label": "[final result]",
      "columns": [
        {
          "id": "column_1",
          "label": "first_name"
        },
        {
          "id": "column_2",
          "label": "last_name"
        },
        {
          "id": "column_3",
          "label": "email_id"
        }
      ]
    }
  ],
  "edges": [
    {
      "type": "edge",
      "edgeType": "select",
      "source": {
        "tableId": "result_2",
        "columnId": "column_1"
      },
      "target": {
        "tableId": "result_1",
        "columnId": "column_1"
      }
    },
    {
      "type": "edge",
      "edgeType": "select",
      "source": {
        "tableId": "result_2",
        "columnId": "column_2"
      },
      "target": {
        "tableId": "result_1",
        "columnId": "column_2"
      }
    },
    {
      "type": "edge",
      "edgeType": "select",
      "source": {
        "tableId": "result_2",
        "columnId": "column_3"
      },
      "target": {
        "tableId": "result_1",
        "columnId": "column_3"
      }
    },
    {
      "type": "edge",
      "edgeType": "where",
      "source": {
        "tableId": "result_2",
        "columnId": "column_4"
      },
      "target": {
        "tableId": "result_1"
      }
    },
    {
      "type": "edge",
      "edgeType": "select",
      "source": {
        "tableId": "result_4",
        "columnId": "column_1"
      },
      "target": {
        "tableId": "result_3",
        "columnId": "column_1"
      }
    },
    {
      "type": "edge",
      "edgeType": "where",
      "source": {
        "tableId": "result_3"
      },
      "target": {
        "tableId": "result_1"
      }
    },
    {
      "type": "edge",
      "edgeType": "where",
      "source": {
        "tableId": "result_2",
        "columnId": "column_5"
      },
      "target": {
        "tableId": "result_1"
      }
    },
    {
      "type": "edge",
      "edgeType": "select",
      "source": {
        "tableId": "result_6",
        "columnId": "column_1"
      },
      "target": {
        "tableId": "result_5",
        "columnId": "column_1"
      }
    },
    {
      "type": "edge",
      "edgeType": "where",
      "source": {
        "tableId": "result_5"
      },
      "target": {
        "tableId": "result_1"
      }
    }
  ]
}

const App = () => {
    return (
        <ModernSqlFlow graph_data={graph_data}>
    )
}