Update README

README.md

@@ -4,8 +4,8 @@ Query Graphs
 
 Helping people see and understand queries - [Visualize your own query!](http://tableau.github.io/query-graphs/index.html)
 
-[<img src="media/sample_graph_simple.png" width=400 alt="Sample Visualization"/>](https://tableau.github.io/query-graphs/index.html?file=examples%2Fpostgres%2Fbitmapscan.json&title=bitmapscan.json)
-[<img src="media/sample_graph_complex.png" width=400 alt="Sample Visualization"/>](http://tableau.github.io/query-graphs/index.html?file=examples%2Fpostgres%2Flearning_to_optimize_federated_queries%2Fjob%2Funfederated%2Fdisable_nestloop%2F10a_dting-linux.json&title=10a_dting-linux.json)
+[<img src="media/tpch-q19.png" width=200 alt="Sample Visualization"/>](https://tableau.github.io/query-graphs/index.html?file=examples%2Fhyper%2Ftpch%2Ftpch-q19-analyze.plan.json&title=tpch-q19-analyze.plan.json)
+[<img src="media/tpch-q2.png" width=400 alt="Sample Visualization"/>](https://tableau.github.io/query-graphs/index.html?file=examples%2Fhyper%2Ftpch%2Ftpch-q2-analyze.plan.json&title=tpch-q2-analyze.plan.json)
 
 Description
 -----------
@@ -16,16 +16,22 @@ Query graphs is based on the experience of Tableau and the Hyper team with debug
 In contrast to many competing plan visualizers, query graphs:
 * visualizes large and complex query plans without presenting an overwhelming amount of information,
 * immediately draws your attention to tne most critical parts of the query plan through proper color coding,
-* allows you to drill down on the interesting parts of the query-plan, e.g., by hovering over individual nodes,
+* allows you to drill down on the interesting parts of the query-plan, e.g., by expanding more details by clicking on the node of interest,
 * supports multiple different plan types (currently Postgres, Hyper and PostgresQL),
 * can be easily embeded into larger tools,
-* works offline.
+* works fully offline and can be installed as a "web app" from your browser.
 
 For a first impression see our [list of example visualizations](https://tableau.github.io/query-graphs/examples.html), a few particularly examples are:
-* [PostgreSQL query plan](https://tableau.github.io/query-graphs/index.html?file=examples%2Fpostgres%2Flearning_to_optimize_federated_queries%2Fjob%2Ffederated%2Fdisable_nestloop%2F10a_ricole-lx.json&title=10a_ricole-lx.json)
-* [A complex PostgreSQL query plan](https://tableau.github.io/query-graphs/index.html?file=examples%2Fpostgres%2Flearning_to_optimize_federated_queries%2Fjob%2Funfederated%2Fdisable_nestloop%2F10a_dting-linux.json&title=10a_dting-linux.json)
-* [Hyper query plan for TPC-H Q1](https://tableau.github.io/query-graphs/index.html?file=examples%2Fhyper%2Ftpch-q1.plan.json&title=tpch-q1.plan.json)
-* [Optimizer steps of Hyper for TPC-H Q2](https://tableau.github.io/query-graphs/index.html?file=examples%2Fhyper%2Ftpch-q2-steps.plan.json&title=tpch-q2-steps.plan.json)
+* [PostgreSQL TPC-H Query 2](https://tableau.github.io/query-graphs/index.html?file=examples%2Fpostgres%2Ftpch%2Ftpch-q2-analyze.plan.json&title=tpch-q2-analyze.plan.json)
+* [Hyper TPC-H Query 2](https://tableau.github.io/query-graphs/index.html?file=examples%2Fhyper%2Ftpch%2Ftpch-q2-analyze.plan.json&title=tpch-q2-analyze.plan.json)
+* [Optimizer steps of Hyper for TPC-H Q2](https://tableau.github.io/query-graphs/index.html?file=examples%2Fhyper%2Ftpch%2Ftpch-q2-steps.plan.json&title=tpch-q2-steps.plan.json)
+
+
+Installation
+------------
+
+You can use https://tableau.github.io/query-graphs/, you do not need to install anything.
+If you still need a local deployment, see the [Developer instructions](DEVELOPMENT.md) for instructions.
 
 Usage
 -----
@@ -43,12 +49,6 @@ Supported query plan formats:
 * Hyper's query plans. You can run Hyper (the database system powering Tableau) locally through HyperAPI, and send Hyper `EXPLAIN (VERBOSE)` queries to obtain query plans. See [dump-plans.py](plan-dumper/dump-plans.py) for an example.
 * Tableau logical queries. Can be obtained from the log files of Tableau Desktop or Tableau Online.
 
-Installation
-------------
-
-You can use https://tableau.github.io/query-graphs/, you do not need to install anything.
-If you still need a local deployment, see the [Developer instructions](DEVELOPMENT.md) for instructions.
-
 Contributing
 ------------
 
@@ -62,5 +62,4 @@ To get started hacking on query graphs, see [DEVELOPMENT.md](DEVELOPMENT.md).
 Acknowledgements
 ----------------
 
-The dragging, zooming, panning, collapsing functionality originated from
-“D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with Auto-Sizing” (Rob Schmuecker’s block #7880033).
+Query Graphs uses the amazing [react-flow](https://reactflow.dev/) library for rendering. For layouting the query plan, we use [d3-flextree](https://github.com/Klortho/d3-flextree).

standalone-app/webpack/webpack-create-examples-list.ts

@@ -38,7 +38,7 @@ async function generateSubDirList(dirPath: string, createLink: CreateLink): Prom
 }
 
 async function generateExamplesList(dirPath: string, createLink: CreateLink) {
-    let html = "<html><head><title>Favorites</title></head><body><h1>Favorites</h1><ul>";
+    let html = "<html><head><title>Example Query Plans</title></head><body><h1>Example Query Plans</h1><ul>";
     html += await generateSubDirList(dirPath, createLink);
     html += "</ul></body></html>";
     return html;