diff --git a/core/src/main/java/org/apache/calcite/plan/visualizer/RuleMatchVisualizer.java b/core/src/main/java/org/apache/calcite/plan/visualizer/RuleMatchVisualizer.java
index 5cbc6aa10ee..b42b895cc25 100644
--- a/core/src/main/java/org/apache/calcite/plan/visualizer/RuleMatchVisualizer.java
+++ b/core/src/main/java/org/apache/calcite/plan/visualizer/RuleMatchVisualizer.java
@@ -95,7 +95,7 @@ public class RuleMatchVisualizer implements RelOptListener {
   private @Nullable RelOptPlanner planner = null;
 
   private boolean includeTransitiveEdges = false;
-  private boolean includeIntermediateCosts = false;
+  private boolean includeIntermediateCosts = true;
 
   private final List<StepInfo> steps = new ArrayList<>();
   private final Map<String, NodeUpdateHelper> allNodes = new LinkedHashMap<>();
@@ -133,6 +133,24 @@ public void attachTo(RelOptPlanner planner) {
     this.planner = planner;
   }
 
+  /**
+   * Register the root node of the planner and adds an INITIAL step.
+   * This method is automatically invoked when the first rule is attempted.
+   */
+  public void ensureInitialized() {
+    if (!initialized) {
+      requireNonNull(planner, "planner");
+      RelNode root = requireNonNull(planner.getRoot(), "root");
+      initialized = true;
+      updateInitialPlan(root);
+    }
+    // add the initialState
+    if (!this.allNodes.isEmpty() && this.steps.isEmpty()) {
+      this.addStep(INITIAL, null);
+      this.latestRuleID = INITIAL;
+    }
+  }
+
   /**
    * Output edges from a subset to the nodes of all subsets that satisfy it.
    */
@@ -142,6 +160,7 @@ public void setIncludeTransitiveEdges(final boolean includeTransitiveEdges) {
 
   /**
    * Output intermediate costs, including all cost updates.
+   * The default value is true.
    */
   public void setIncludeIntermediateCosts(final boolean includeIntermediateCosts) {
     this.includeIntermediateCosts = includeIntermediateCosts;
@@ -149,12 +168,7 @@ public void setIncludeIntermediateCosts(final boolean includeIntermediateCosts)
 
   @Override public void ruleAttempted(RuleAttemptedEvent event) {
     // HepPlanner compatibility
-    if (!initialized) {
-      requireNonNull(planner, "planner");
-      RelNode root = requireNonNull(planner.getRoot());
-      initialized = true;
-      updateInitialPlan(root);
-    }
+    ensureInitialized();
   }
 
   /**
@@ -217,11 +231,7 @@ private void updateFinalPlan(RelNode node) {
   @Override public void ruleProductionSucceeded(RuleProductionEvent event) {
     // method is called once before ruleMatch, and once after ruleMatch
     if (event.isBefore()) {
-      // add the initialState
-      if (latestRuleID.isEmpty()) {
-        this.addStep(INITIAL, null);
-        this.latestRuleID = INITIAL;
-      }
+      ensureInitialized();
       return;
     }
 
@@ -300,6 +310,11 @@ private void updateNodeInfo(final RelNode rel, final boolean isLastStep) {
       RelOptCost cost = planner.getCost(rel, mq);
       Double rowCount = mq.getRowCount(rel);
       helper.updateAttribute("cost", formatCost(rowCount, cost));
+      if (rel instanceof RelSubset) {
+        final RelNode best = ((RelSubset) rel).getBest();
+        final String bestId = best != null ? Integer.toString(best.getId()) : "";
+        helper.updateAttribute("best", bestId);
+      }
     }
 
     List<String> inputs = new ArrayList<>();
@@ -464,7 +479,7 @@ private static String formatCost(Double rowCount, @Nullable RelOptCost cost) {
         || originalStr.contains("tiny")) {
       return originalStr;
     }
-    return new MessageFormat("\nrowCount: {0}\nrows: {1}\ncpu:  {2}\nio:   {3}",
+    return new MessageFormat("rowCount: {0}\nrows: {1}\ncpu:  {2}\nio:   {3}",
         Locale.ROOT).format(new String[]{
             formatCostScientific(rowCount),
             formatCostScientific(cost.getRows()),
diff --git a/core/src/main/resources/org/apache/calcite/plan/visualizer/viz-template.html b/core/src/main/resources/org/apache/calcite/plan/visualizer/viz-template.html
index 84e3989326a..1bdaa9c40a1 100644
--- a/core/src/main/resources/org/apache/calcite/plan/visualizer/viz-template.html
+++ b/core/src/main/resources/org/apache/calcite/plan/visualizer/viz-template.html
@@ -21,8 +21,6 @@
 <meta charset="utf-8">
 <title>Calcite Rule Match Visualization</title>
 
-<script src="https://unpkg.com/d3@7.2.1/dist/d3.min.js" charset="utf-8"></script>
-<script src="https://unpkg.com/dagre-d3@0.6.4/dist/dagre-d3.min.js"></script>
 <script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
 <script src="planner-viz-data.js"></script>
 
@@ -37,8 +35,28 @@
     }
 
     li a {
+        padding: 0.1em 20px 0.1em 2px;
+        text-decoration: none;
+    }
+
+    ul#node-list {
+        list-style-type: none;
+        padding: 0px 20px;
+        margin: 0px;
+    }
+
+    #step-list {
+        margin: 0px;
+    }
+
+    #step-list li a {
         display: block;
-        padding: 5px 20px;
+    }
+
+    .side-section {
+        font-size: 1.2em;
+        font-weight: bold;
+        padding: 4px;
     }
 
     section {
@@ -58,7 +76,7 @@
         border: 1px solid #ccc;
     }
 
-    #step-list-column {
+    #side-column {
         border-left: 1px solid #ccc;
     }
 
@@ -107,37 +125,78 @@
         word-wrap: break-word;
     }
 
-    button {
+    .node-link,.step-link {
+        text-decoration: underline;
+	cursor: pointer;
+    }
+
+    #toolbar button {
         padding: 0.1em;
         display: inline-block;
         font-size: 2em;
         min-width: 1.5em;
     }
+
+    details {
+        overflow-y: auto;
+        min-height: 2em;
+        flex: 0 1 auto;
+    }
+
+    details summary {
+      /* always show the summary */
+      position: sticky;
+      top: 0;
+      background: white;
+      z-index: 1;
+    }
 </style>
 
 <div class="container">
     <div class="column2">
         <div id="toolbar">
-            <button id="left-button" style="display:inline-block">⤿</button>
-            <button id="right-button" style="display:inline-block">⤾</button>
-            <button id="fit-content-button" style="display:inline-block">⇿</button>
+            <button id="left-button" title="Rotate left" style="display:inline-block">⤿</button>
+            <button id="right-button" title="Rotate right" style="display:inline-block">⤾</button>
+            <button id="fit-content-button" title="Fit content" style="display:inline-block">⇿</button>
             <span>&nbsp;</span>
-            <button id="toggle-list-button">≡</button>
-            <button id="prev-button" disabled>◀</button>
-            <button id="next-button" disabled>▶</button>
-            <div id="current-step" style="display: inline-block"></div>
+            <button id="toggle-list-button" title="Toggle sidebar">≡</button>
+            <button id="prev-button" title="Previous step" disabled>◀</button>
+            <button id="next-button" title="Next step" disabled>▶</button>
+            <div id="current-step-info" style="display: inline-block"></div>
         </div>
         <svg id="svg-canvas" width="100%" height="100%" ></svg>
     </div>
-    <div id="step-list-column" class="column1">
-        <div style="width: 100%; text-align: center">
-        </div>
-        <ol id="step-list" style="overflow: auto" start="0">
-        </ol>
+    <div id="side-column" class="column1">
+        <details style="/*do not shrink*/flex-shrink:0;" open><summary class="side-section">Options:</summary>
+        <label><input id="apply-node-selection" type="checkbox" checked>apply node selection</label><br/>
+        <label><input id="show-hidden-node-paths" type="checkbox" checked>show paths through hidden nodes</label><br/>
+        <label><input id="show-sets-without-rels" type="checkbox">show sets without RelNodes</label><br/>
+        <label><input id="show-best" type="checkbox">show best of a subset</label>
+        <label><input id="show-cost" type="checkbox">show cost if available</label>
+        </details>
+        <details open><summary class="side-section">Nodes:
+            <button id="export-selection" title="Export selection to clipboard">[x]→📋</button>
+            <button id="import-selection" title="Import selection from clipboard">📋→[x];</button><br/>
+            <button id="select-all" title="Select everything">[x] all</button>
+            <button id="deselect-all" title="Deselect everything">[ ] all</button>
+            <button id="select-all-sets" title="Select all sets">[x] all sets</button>
+            <button id="deselect-all-sets" title="Deselect all sets">[ ] all sets</button>
+            <br/>
+            <button id="select-network" title="Select the nodes and the nodes on the paths between them">[x] network:</button>
+            <button id="deselect-network" title="Deselect the nodes and the nodes on the paths between them">[ ] network:</button>
+            <input id="select-network-args" type="text" value="node1 node2 ..."/>
+            </summary>
+            <ul id="node-list"/>
+        </details>
+        <details id="step-list-container" open><summary class="side-section">Steps:</summary>
+            <ol id="step-list" start="0"/>
+        </details>
     </div>
 </div>
 
-<script id="js">
+<script id="js" type="module">
+import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm";
+import * as dagreD3 from "https://cdn.jsdelivr.net/npm/dagre-d3-es@7.0.11/+esm";
 
     var rankDirs = ["BT", "RL", "TB", "LR"];
 
@@ -178,6 +237,11 @@
         }
     };
 
+    var panToNode = (nodeId) => {
+        var graphNode = g.node(nodeId);
+        zoom.translateTo(svg, graphNode.x, graphNode.y);
+    };
+
     /*
      * Global State
      */
@@ -185,6 +249,22 @@
     var currentStepIndex = 0;
     var currentRankDirIdx = 0;
 
+    /*
+     * Helper methods
+     */
+
+     var makeElement = (tag, map) => {
+        return Object.assign(document.createElement(tag), map);
+     }
+
+    var makeLinkButton = (name, onclick) => {
+        return makeElement("a", {
+            textContent: name,
+            href: "#",
+            onclick: onclick,
+        });
+     };
+
     /*
      * Event Handler functions
      */
@@ -210,18 +290,61 @@
         }
     };
 
+    var updateStepInfo = () => {
+        var lastNodeAddedStep = -Infinity;
+        var prevCostChangeStep = -Infinity;
+        var state = getCurrentState();
+        for(var nodeId of state.visibleNodeIds) {
+            var node = state.nodes[nodeId];
+            // the last node that was added BEFORE the current step
+            if (node.addedInStep < currentStepIndex) {
+                lastNodeAddedStep = Math.max(lastNodeAddedStep ?? -Infinity, node.addedInStep);
+            }
+            // the last cost/best change that was made BEFORE the current step
+            var refCostChangeStep = (!!node.lastCostChangeStep && node.lastCostChangeStep < currentStepIndex)
+                ? node.lastCostChangeStep
+                : node.prevCostChangeStep;
+            prevCostChangeStep = Math.max(prevCostChangeStep ?? -Infinity, refCostChangeStep ?? -Infinity);
+        }
+        var currentStepID = data.steps[currentStepIndex]["id"];
+        var lastChangeInfo = [];
+        var el = document.getElementById('current-step-info');
+        el.innerHTML = "Step " + currentStepIndex + ": " + currentStepID;
+        if (lastNodeAddedStep !== -Infinity || prevCostChangeStep !== -Infinity) {
+            el.innerHTML += "<br/>Most recent changes to the selected nodes: "
+        }
+        var delimiter = "";
+        if (lastNodeAddedStep !== -Infinity) {
+            el.append("node added in ");
+            el.appendChild(makeLinkButton(
+                `step ${lastNodeAddedStep}`,
+                () => {setCurrentStep(lastNodeAddedStep)},
+            ));
+            delimiter = ", ";
+        }
+        if (prevCostChangeStep !== -Infinity) {
+            el.append(delimiter + "cost/best change in ");
+            el.appendChild(makeLinkButton(
+                `step ${prevCostChangeStep}`,
+                () => {setCurrentStep(prevCostChangeStep)},
+            ));
+        }
+    };
+
     var setCurrentStep = (stepIndex) => {
         // un-highlight previous entry
-        var prevStepIndex = currentStepIndex;
+        var prevStepIndex = Math.min(data.steps.length-1, currentStepIndex);
         if (prevStepIndex !== undefined) {
-            var prevStepElement = document.getElementById(data.steps[prevStepIndex]["id"]);
-            prevStepElement.style.backgroundColor = "#FFFFFF";
+            if (prevStepIndex < data.steps.length) {
+                var prevStep = data.steps[prevStepIndex];
+                var prevStepElement = document.getElementById(prevStep["id"]);
+                prevStepElement.style.backgroundColor = "#FFFFFF";
+            }
         }
 
-        currentStepIndex = stepIndex;
-        var currentStepID = data.steps[stepIndex]["id"];
-        document.getElementById('current-step').innerText = currentStepIndex + ": " + currentStepID;
-
+        currentStepIndex = Math.min(data.steps.length-1, stepIndex);
+        document.title="Calcite Rule Match Visualization: step " + currentStepIndex;
+        var currentStepID = data.steps[currentStepIndex]["id"];
         var currentStepElement = document.getElementById(currentStepID);
         currentStepElement.style.backgroundColor = "#D3D3D3";
 
@@ -235,12 +358,12 @@
             document.getElementById("next-button").disabled = true;
         }
 
-        updateGraph();
+        updateUI();
     }
 
-    var getCurrentState = () => {
+    var getStateOfStep = (stepIdx) => {
         var nodes = {};
-        for(var i=0; i<=currentStepIndex; i++) {
+        for(var i=0; i<=stepIdx; i++) {
             // recreate state by merging all updates
             var updates = data.steps[i]["updates"];
             Object.entries(updates).forEach(e => {
@@ -248,13 +371,93 @@
                 var nodeInfo = nodes[key] ??= {
                     id: key,
                     addedInStep: i,
+                    inputs: [],
+                    parents: []
                 };
+                var lastCost = nodeInfo.cost;
+                var lastBest = nodeInfo.best;
                 Object.assign(nodeInfo, value);
+                if(lastCost !== nodeInfo.cost || lastBest !== nodeInfo.best) {
+                    nodeInfo.prevCostChangeStep = nodeInfo.lastCostChangeStep;
+                    nodeInfo.lastCostChangeStep = i;
+                }
             });
         }
-        //var newNodes = Object.values(nodes).filter(n => n.addedInStep === currentStepIndex);
-        var matchedRels = data.steps[currentStepIndex]["matchedRels"] ?? [];
-        return { nodes, matchedRels };
+        // parents relation
+        Object.values(nodes).forEach(n => {
+            if(n.inputs) {
+                for(var i of n.inputs) {
+                    nodes[i].parents = (nodes[i].parents || [])
+                    nodes[i].parents.push(n.id);
+                }
+            }
+        });
+        var matchedRels = data.steps[stepIdx]["matchedRels"] ?? [];
+
+        // determine which nodes are visible
+        var applyVisibility = document.getElementById("apply-node-selection").checked;
+        var visibleNodeIds = [];
+        for (var checkbox of document.getElementsByClassName("node-visibility-checkbox")) {
+            if (applyVisibility && !checkbox.checked) continue;
+            var id = checkbox.id.replace(/^visibility-/, "");
+            visibleNodeIds.push(id);
+        }
+        // filter the sets without RelNodes
+        if(!document.getElementById("show-sets-without-rels").checked) {
+            var nonEmptySets = new Set();
+            visibleNodeIds.forEach(nodeId => {
+                    var n = nodes[nodeId];
+                    if(!!n && n.kind !== "set" && n.kind !== "subset") nonEmptySets.add(n.set);
+            });
+            visibleNodeIds = visibleNodeIds.filter(nodeId => !nodeId.startsWith("set") || nonEmptySets.has(nodeId));
+        }
+
+        var tmpVisibleNodes = new Set(visibleNodeIds);
+        // hide nodes whose parent set is hidden
+        visibleNodeIds = visibleNodeIds.filter(nodeId => {
+            var n = nodes[nodeId];
+            if (n === undefined) return false;
+            return n.kind == "set" || tmpVisibleNodes.has(n.set);
+        });
+
+        visibleNodeIds = new Set(visibleNodeIds);
+        return { nodes, matchedRels, visibleNodeIds };
+    };
+
+    var getCurrentState = () => {
+        return getStateOfStep(currentStepIndex);
+    };
+
+    // visit a node or a collection of nodes recursively
+    // nextNodesFn maps a node to its to-be-visited neighbors
+    // acceptFn if mapping a node to false, do not visit and do not include it in the result
+    var walkNodes = (nodeIDs, state, nextNodesFn, acceptFn=(node=>true)) => {
+        var result = [];
+        var visited = new Set();
+        var fn = (nodeID) => {
+            if (visited.has(nodeID)) return;
+            visited.add(nodeID);
+            var node = state.nodes[nodeID];
+            if(!node) return;
+            if(!acceptFn(node)) return;
+
+            result.push(nodeID);
+            var nextNodes = nextNodesFn(node);
+            if (nextNodes)
+            for(var inputID of nextNodes) {
+                fn(inputID);
+            }
+        };
+        if(!nodeIDs.forEach) fn(nodeIDs)
+        else for(var id of nodeIDs) {
+            fn(id);
+        }
+        return result;
+    };
+
+    var updateUI = () => {
+        updateGraph();
+        updateStepInfo();
     };
 
     var updateGraph = () => {
@@ -267,8 +470,14 @@
         d3.select("svg g").selectAll("*").remove();
         g.nodes().slice().forEach(nodeID => g.removeNode(nodeID));
 
+        // options
+        var showHiddenNodePaths = document.getElementById("show-hidden-node-paths").checked;
+        var showBest = document.getElementById("show-best").checked;
+        var showCost = document.getElementById("show-cost").checked;
+
         for(var n of Object.values(state.nodes)) {
             var nodeID = n.id;
+            if (!state.visibleNodeIds.has(nodeID)) continue;
             if(n.kind === "set") {
                 // add set
                 var setLabel = n.Label;
@@ -281,12 +490,9 @@
                 });
             }
             else {
-                var nodeLabel;
-                if (stepID === "FINAL") {
-                    nodeLabel = n.label + "\n" + n.cost;
-                } else {
-                    nodeLabel = n.label;
-                }
+                var nodeLabel = n.label;
+                if (n.kind === "subset" && showBest) nodeLabel += "\nbest: " + n.best;
+                if (showCost) nodeLabel += "\n" + n.cost;
                 var nodeStyle;
                 if (stepID === "FINAL" && n.inFinalPlan === true) {
                     if(n.kind === "subset")
@@ -311,6 +517,22 @@
                 // create links
                 if(n.inputs)
                 for(var inputID of n.inputs) {
+                    // add edges to the closest visible descendants
+                    if (!state.visibleNodeIds.has(inputID)) {
+                        var walkUntilVisibleNodes = walkNodes(inputID, state, node => state.visibleNodeIds.has(node.id) ? undefined : node.inputs);
+                        var visibleDescendants = walkUntilVisibleNodes.filter(nodeId => state.visibleNodeIds.has(nodeId));
+                        for(var descendantID of visibleDescendants) {
+                            if(showHiddenNodePaths) {
+                                edgeOptions = { style: "stroke-dasharray: 5, 5; fill: none;" };
+                            }
+                            else {
+                                // always add the edges, to keep the same layout
+                                edgeOptions = { style: "visibility: hidden;" };
+                            }
+                            g.setEdge(descendantID, nodeID, edgeOptions);
+                        }
+                        continue;
+                    }
                     var input = state.nodes[inputID];
                     var edgeOptions = { arrowheadStyle: "normal" };
                     if (n.kind === "subset" && input.kind === "subset") {
@@ -337,43 +559,158 @@
             interactive: true,
         });
 
+        var makeBr = () => document.createElement("br");
+        var addNodeLinks = (toolTipArray, description, nodeIds) => {
+            var nodeIds = Array.isArray(nodeIds) ? nodeIds : [nodeIds];
+            toolTipArray.push(description);
+
+            var delimiter = "";
+            for(let nodeId of nodeIds) {
+                toolTipArray.push(delimiter);
+                var el = makeElement("span", {
+                    textContent: nodeId,
+                    className: "node-link",
+                    onclick: () => {panToNode(nodeId)}
+                });
+                toolTipArray.push(el);
+                delimiter = ", ";
+            }
+            toolTipArray.push(makeBr());
+        };
+
+        var createStepLink = (stepId, nodeId) => {
+            var stepName = (stepId != undefined) ? data.steps[stepId].id : "";
+            return makeElement("span", {
+                textContent: `step ${stepId}`,
+                className: "step-link",
+                onclick: () => {setCurrentStep(stepId); panToNode("" + nodeId);}
+            });
+        };
+
         var i = 0;
         allD3Nodes.each(nodeID => {
-            var nodeElement = allD3NodeElements[i];
+            var nodeElement = allD3NodeElements[i++];
             var node = state.nodes[nodeID];
-            var stepName = data.steps[node.addedInStep].id;
-            var popupContent;
-            if(node.kind === "subset")
-                popupContent = "inputs: " + node.inputs;
-            else
-                popupContent = node.explanation;
-            popupContent += "<br>Added in Step '"  + stepName + "'";
-
-            tippy(nodeElement, { content: popupContent })
-            i++;
+            var tt = []; // tooltip
+
+            var description = node.kind !== "subset" ? node.explanation: "";
+            if (description !== "") {
+                tt=tt.concat([description, makeBr()]);
+            }
+
+            addNodeLinks(tt, "Node: ", nodeID);
+            addNodeLinks(tt, "Parents: ", node.parents);
+            addNodeLinks(tt, "Inputs: ", node.inputs);
+
+            if (node.kind === "subset") {
+                addNodeLinks(tt, "Best: ", node.best);
+            }
+            tt=tt.concat([
+                "Added in ", createStepLink(node.addedInStep, nodeID), makeBr(),
+                "Last cost/best change in ", createStepLink(node.lastCostChangeStep, nodeID),
+                ]);
+            var el = document.createElement("span");
+            el.append(...tt);
+
+            tippy(nodeElement, { content: el })
         });
     }
 
+    var setVisibilityByIds = (nodeIds,visible) => {
+        for(var nodeId of nodeIds) {
+            document.getElementById("visibility-" + nodeId).checked = visible;
+        }
+    };
+
+    var propagateVisibility = event => {
+        var buttonId = event.srcElement.id;
+        var nodeId = buttonId.replace(/^propagate-visibility-[a-z]*-/, "");
+        var affectContainees = buttonId.indexOf("containees") >= 0;
+        var affectContainers = buttonId.indexOf("containers") >= 0;
+        var state = getCurrentState();
+        var node = state.nodes[nodeId];
+        var value = document.getElementById("visibility-" + nodeId).checked;
+        if(node.kind === "set") {
+            if(affectContainees) {
+                var nodesInSet = Object.values(state.nodes).filter(n => n.set === nodeId);
+                for(var n of nodesInSet) {
+                    document.getElementById("visibility-" + n.id).checked = value;
+                }
+            }
+        }
+        else {
+            if(affectContainers) {
+                document.getElementById("visibility-" + node.set).checked = value;
+                var sameSetAncestors = walkNodes(node.id, state, n=>n.parents, n=>n.set === node.set);
+                setVisibilityByIds(sameSetAncestors, value);
+            }
+            if(node.kind === "subset" && affectContainees) {
+                var sameSetDescendants = walkNodes(node.id, state, n=>n.inputs, n=>n.set === node.set);
+                setVisibilityByIds(sameSetDescendants, value);
+            }
+        }
+        updateUI();
+    };
+
     /*
-     * render HTML Element and add event hanlders
+     * render HTML Element and add event handlers
      */
 
-    // populate UI list
-    var stepListElement = document.getElementById("step-list");
-    data.steps.forEach((step, index) => {
-        var stepID = step["id"];
-        var listItem = document.createElement("li");
-        var textItem = document.createElement("a");
-        textItem.innerText = stepID;
-        textItem.id = stepID;
-        textItem.setAttribute("href", "#");
-
-        listItem.appendChild(textItem);
-        stepListElement.appendChild(listItem);
-        listItem.addEventListener("click", event => {
-            setCurrentStep(index);
+    // populate step list
+    var populateStepList = () => {
+        var stepListElement = document.getElementById("step-list");
+        data.steps.forEach((step, index) => {
+            var stepID = step["id"];
+            var listItem = document.createElement("li");
+            listItem.innerHTML = `<a id="${stepID}" href="#">${stepID}</a>`;
+            stepListElement.appendChild(listItem);
+            listItem.addEventListener("click", event => {
+                setCurrentStep(index);
+            })
         })
-    })
+    };
+    populateStepList();
+
+    // populate node list
+    var populateNodeList = () => {
+        // get the last state
+        var state = getStateOfStep(data.steps.length-1);
+        var nodeListElement = document.getElementById("node-list");
+        // sort numerically, but put sets first
+        const setNodes = Object.keys(state.nodes).filter(item => /^set/.test(item));
+        const relNodes = Object.keys(state.nodes).filter(item => !/^set/.test(item));
+        setNodes.sort((a, b) => Number(a) - Number(b));
+        relNodes.sort((a, b) => Number(a) - Number(b));
+        var nodeIds = [...setNodes, ...relNodes];
+        // add node list with settings
+        nodeIds.forEach(nodeId => {
+            var listItem = document.createElement("li");
+            var buttons = "";
+            var node = state.nodes[nodeId];
+            var properties = node.kind !== "set"
+                ? `class="propagate-visibility" id="propagate-visibility-containers-${nodeId}" title="Propagate visibility to containers"`
+                : `style="visibility: hidden;"`;
+            buttons += `<button ${properties}>∈</button>`;
+
+            properties = node.kind === "set" || node.kind === "subset"
+                ? `class="propagate-visibility" id="propagate-visibility-containees-${nodeId}" title="Propagate visibility to containees"`
+                : `style="visibility: hidden;"`;
+            buttons += `<button ${properties}>{}</button>`;
+
+            listItem.innerHTML = `<div><label>
+                <input id="visibility-${nodeId}" type="checkbox" class="node-visibility-checkbox" checked/>
+                ${buttons}
+                ${node.label}
+                &nbsp;
+                </label>
+                </div>
+                `;
+            nodeListElement.appendChild(listItem);
+        });
+        document.querySelectorAll(".node-visibility-checkbox").forEach(element => element.addEventListener("click", updateUI));
+        document.querySelectorAll(".propagate-visibility").forEach(element => element.addEventListener("click", propagateVisibility));
+    }
+    populateNodeList();
 
     document.getElementById("prev-button").addEventListener("click", event => {
         if (currentStepIndex !== 0) {
@@ -391,26 +728,103 @@
         currentRankDirIdx += 1;
         if (currentRankDirIdx >= rankDirs.length)
             currentRankDirIdx = 0;
-        updateGraph();
+        updateUI();
     });
 
     document.getElementById("right-button").addEventListener("click", event => {
         currentRankDirIdx -= 1;
         if (currentRankDirIdx < 0)
             currentRankDirIdx = 3;
-        updateGraph();
+        updateUI();
     });
 
     document.getElementById("fit-content-button").addEventListener("click", fitContent);
 
     document.getElementById("toggle-list-button").addEventListener("click", () => {
-        var col1 = document.getElementById("step-list-column");
+        var col1 = document.getElementById("side-column");
         if (col1.style.display === "none")
             col1.style.display = "";
         else
             col1.style.display = "none";
     });
 
+    // creates a function that applies the visibilityFn to the selection
+    // for all nodes where the fn returns a bool
+    function visibilitySelector(visibilityFn) {
+        return e => {
+            var lastStep = data.steps.length-1;
+            var state = getStateOfStep(lastStep);
+            for (var checkbox of document.getElementsByClassName("node-visibility-checkbox")) {
+                var nodeId = checkbox.id.replace(/^visibility-/, "");
+                var node = state.nodes[nodeId];
+                var visibility = visibilityFn(node);
+                if(typeof visibility !== "boolean") continue;
+                checkbox.checked = visibility;
+            }
+            updateUI();
+        }
+    }
+
+    document.getElementById("select-all").addEventListener("click", visibilitySelector(node => true));
+    document.getElementById("deselect-all").addEventListener("click", visibilitySelector(node => false));
+    document.getElementById("select-all-sets").addEventListener("click", visibilitySelector(node => node.kind === "set" ? true : undefined));
+    document.getElementById("deselect-all-sets").addEventListener("click", visibilitySelector(node => node.kind === "set" ? false : undefined));
+
+    document.getElementById("export-selection").addEventListener("click", async event => {
+        selection = "";
+        for (var checkbox of document.getElementsByClassName("node-visibility-checkbox")) {
+            if(checkbox.checked)
+                selection += checkbox.id.replace(/^visibility-/, "") + "\n";
+        }
+        try {
+            await navigator.clipboard.writeText(selection);
+        } catch (err) {
+            alert('Failed to export selection to clipboard!');
+            console.error('Failed to write to clipboard: ', err);
+        }
+    });
+
+    document.getElementById("import-selection").addEventListener("click", async event => {
+        try {
+            const clipboardText = await navigator.clipboard.readText();
+            const selectedValues = new Set(clipboardText.split('\n'));
+            for (var checkbox of document.getElementsByClassName("node-visibility-checkbox")) {
+                nodeId = checkbox.id.replace(/^visibility-/, "");
+                checkbox.checked = selectedValues.has(nodeId);
+            }
+            updateUI();
+        } catch (err) {
+            alert('Failed to import selection from clipboard!');
+            console.error('Failed to read from clipboard: ', err);
+        }
+    });
+
+    var selectNetwork = (visibility) => {
+        var args = document.getElementById("select-network-args").value.split(" ");
+        var state = getCurrentState();
+        // could be done more efficiently, but let's keep it simple
+        var node1Descendants = new Set(walkNodes(args, state, n=>n.inputs));
+        var network = walkNodes(args, state, n=>n.parents, n=>node1Descendants.has(n.id));
+        for(var nodeId of network) {
+            var node = state.nodes[nodeId];
+            document.getElementById("visibility-" + nodeId).checked = visibility;
+            // ensure that the set is visible
+            if(visibility) document.getElementById("visibility-" + node.set).checked = visibility;
+        }
+        updateUI();
+
+    };
+
+    document.getElementById("select-network").addEventListener("click", event => { selectNetwork(true); });
+    document.getElementById("deselect-network").addEventListener("click", event => { selectNetwork(false); });
+
+
+    document.getElementById("apply-node-selection").addEventListener("click", updateUI);
+    document.getElementById("show-hidden-node-paths").addEventListener("click", updateUI);
+    document.getElementById("show-sets-without-rels").addEventListener("click", updateUI);
+    document.getElementById("show-best").addEventListener("click", updateGraph);
+    document.getElementById("show-cost").addEventListener("click", updateGraph);
+
     // render initial state
 
     parseLocation();
diff --git a/core/src/test/java/org/apache/calcite/test/RuleMatchVisualizerTest.java b/core/src/test/java/org/apache/calcite/test/RuleMatchVisualizerTest.java
index 7a1e3fd9a0e..5d31f17f42f 100644
--- a/core/src/test/java/org/apache/calcite/test/RuleMatchVisualizerTest.java
+++ b/core/src/test/java/org/apache/calcite/test/RuleMatchVisualizerTest.java
@@ -94,7 +94,6 @@ public static void checkActualAndReferenceFiles() {
     RuleMatchVisualizer viz = new RuleMatchVisualizer();
     viz.attachTo(planner);
 
-
     final RelOptFixture fixture = sql(sql)
         .withPlanner(planner)
         .withFactory(t ->
@@ -116,6 +115,7 @@ private String normalize(String str) {
             Pattern.compile("\"([0-9]+)\"|"
                 + "\"label\" *: *\"#([0-9]+)-|"
                 + "\"label\" *: *\"subset#([0-9]+)-|"
+                + "\"best\" *: *\"([0-9]+)\"|"
                 + "\"explanation\" *: *\"\\{subset=rel#([0-9]+):"),
             1000);
     // rename rule call ids
diff --git a/core/src/test/resources/org/apache/calcite/test/RuleMatchVisualizerTest.xml b/core/src/test/resources/org/apache/calcite/test/RuleMatchVisualizerTest.xml
index 7f07d0b85c1..564d5bbfa24 100644
--- a/core/src/test/resources/org/apache/calcite/test/RuleMatchVisualizerTest.xml
+++ b/core/src/test/resources/org/apache/calcite/test/RuleMatchVisualizerTest.xml
@@ -54,30 +54,35 @@ LogicalSort(sort0=[$0], dir0=[ASC], fetch=[10])
       "1000":{
         "label":"#1000-LogicalTableScan",
         "explanation":"{table=[CATALOG, SALES, DEPT]}",
-        "set":"default"
+        "set":"default",
+        "cost":"rowCount: 4E0\nrows: 4E0\ncpu:  0E0\nio:   0E0"
       },
       "1001":{
         "label":"#1001-LogicalProject",
         "explanation":"{NAME=$1}",
         "set":"default",
+        "cost":"rowCount: 4E0\nrows: 8E0\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1000" ]
       },
       "1002":{
         "label":"#1002-LogicalUnion",
         "explanation":"{all=true}",
         "set":"default",
+        "cost":"rowCount: 8E0\nrows: 2.4E1\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1001", "1001" ]
       },
       "1003":{
         "label":"#1003-LogicalProject",
         "explanation":"{NAME=$0}",
         "set":"default",
+        "cost":"rowCount: 8E0\nrows: 3.2E1\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1002" ]
       },
       "1004":{
         "label":"#1004-LogicalSort",
         "explanation":"{sort0=$0, dir0=ASC, fetch=10}",
         "set":"default",
+        "cost":"rowCount: 8E0\nrows: 4E1\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1003" ]
       },
       "default":{
@@ -90,6 +95,7 @@ LogicalSort(sort0=[$0], dir0=[ASC], fetch=[10])
     "id":"100-ProjectSetOpTransposeRule",
     "updates":{
       "1004":{
+        "cost":"rowCount: 8E0\nrows: 3.2E1\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1002" ]
       }
     },
@@ -101,18 +107,21 @@ LogicalSort(sort0=[$0], dir0=[ASC], fetch=[10])
         "label":"#1005-LogicalSort",
         "explanation":"{sort0=$0, dir0=ASC, fetch=10}",
         "set":"default",
+        "cost":"rowCount: 4E0\nrows: 1.2E1\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1001" ]
       },
       "1006":{
         "label":"#1006-LogicalUnion",
         "explanation":"{all=true}",
         "set":"default",
+        "cost":"rowCount: 8E0\nrows: 3.2E1\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1005", "1005" ]
       },
       "1007":{
         "label":"#1007-LogicalSort",
         "explanation":"{sort0=$0, dir0=ASC, fetch=10}",
         "set":"default",
+        "cost":"rowCount: 8E0\nrows: 4E1\ncpu:  0E0\nio:   0E0",
         "inputs":[ "1006" ]
       }
     },
@@ -151,12 +160,15 @@ EnumerableProject(NAME=[$1])
         "explanation":"{subset=rel#1000:RelSubset#0.NONE.[]}",
         "set":"set-0",
         "kind":"subset",
+        "cost":"{inf}",
+        "best":"",
         "inputs":[ "1001" ]
       },
       "1001":{
         "label":"#1001-LogicalTableScan",
         "explanation":"{table=[CATALOG, SALES, DEPT]}",
-        "set":"set-0"
+        "set":"set-0",
+        "cost":"{inf}"
       },
       "set-1":{
         "label":"set-1",
@@ -167,12 +179,15 @@ EnumerableProject(NAME=[$1])
         "explanation":"{subset=rel#1002:RelSubset#1.NONE.[]}",
         "set":"set-1",
         "kind":"subset",
+        "cost":"{inf}",
+        "best":"",
         "inputs":[ "1003" ]
       },
       "1003":{
         "label":"#1003-LogicalProject",
         "explanation":"{NAME=$1}",
         "set":"set-1",
+        "cost":"{inf}",
         "inputs":[ "1000" ]
       },
       "1004":{
@@ -180,12 +195,15 @@ EnumerableProject(NAME=[$1])
         "explanation":"{subset=rel#1004:RelSubset#1.ENUMERABLE.[], NAME=$1}",
         "set":"set-1",
         "kind":"subset",
+        "cost":"{inf}",
+        "best":"",
         "inputs":[ "1005" ]
       },
       "1005":{
         "label":"#1005-AbstractConverter",
         "explanation":"{convention=ENUMERABLE, sort=[]}",
         "set":"set-1",
+        "cost":"{inf}",
         "inputs":[ "1002" ]
       }
     },
@@ -198,12 +216,15 @@ EnumerableProject(NAME=[$1])
         "explanation":"{subset=rel#1006:RelSubset#0.ENUMERABLE.[], table=[CATALOG, SALES, DEPT]}",
         "set":"set-0",
         "kind":"subset",
+        "cost":"rowCount: 4E0\nrows: 4E0\ncpu:  5E0\nio:   0E0",
+        "best":"1007",
         "inputs":[ "1007" ]
       },
       "1007":{
         "label":"#1007-EnumerableTableScan",
         "explanation":"{table=[CATALOG, SALES, DEPT]}",
-        "set":"set-0"
+        "set":"set-0",
+        "cost":"rowCount: 4E0\nrows: 4E0\ncpu:  5E0\nio:   0E0"
       }
     },
     "matchedRels":[ "1001" ]
@@ -211,12 +232,15 @@ EnumerableProject(NAME=[$1])
     "id":"101-EnumerableProjectRule(in:NONE,out:ENUMERABLE)",
     "updates":{
       "1004":{
+        "cost":"rowCount: 4E0\nrows: 8E0\ncpu:  9E0\nio:   0E0",
+        "best":"1008",
         "inputs":[ "1005", "1008" ]
       },
       "1008":{
         "label":"#1008-EnumerableProject",
         "explanation":"{NAME=$1}",
         "set":"set-1",
+        "cost":"rowCount: 4E0\nrows: 8E0\ncpu:  9E0\nio:   0E0",
         "inputs":[ "1006" ]
       }
     },
@@ -224,36 +248,17 @@ EnumerableProject(NAME=[$1])
   }, {
     "id":"FINAL",
     "updates":{
-      "1000":{
-        "cost":"{inf}"
-      },
-      "1001":{
-        "cost":"{inf}"
-      },
-      "1002":{
-        "cost":"{inf}"
-      },
-      "1003":{
-        "cost":"{inf}"
-      },
       "1004":{
-        "inFinalPlan":true,
-        "cost":"\nrowCount: 4E0\nrows: 8E0\ncpu:  9E0\nio:   0E0"
-      },
-      "1005":{
-        "cost":"{inf}"
+        "inFinalPlan":true
       },
       "1006":{
-        "inFinalPlan":true,
-        "cost":"\nrowCount: 4E0\nrows: 4E0\ncpu:  5E0\nio:   0E0"
+        "inFinalPlan":true
       },
       "1007":{
-        "inFinalPlan":true,
-        "cost":"\nrowCount: 4E0\nrows: 4E0\ncpu:  5E0\nio:   0E0"
+        "inFinalPlan":true
       },
       "1008":{
-        "inFinalPlan":true,
-        "cost":"\nrowCount: 4E0\nrows: 8E0\ncpu:  9E0\nio:   0E0"
+        "inFinalPlan":true
       }
     },
     "matchedRels":[ ]