From 78c004d8ddf3e1c186a0c90c2c4c666373c0e6e6 Mon Sep 17 00:00:00 2001
From: Yihong Wang <yh.wang@ibm.com>
Date: Mon, 27 Jan 2025 14:55:36 -0800
Subject: [PATCH] Upgrade bootstrap and jquery for single page app

this commit upgrades bootstrap and jquery in the single page application along with bug fixes in the main components like stage view page

- add bootstrap js/css and highligh.js properly to the single-page application's html.
- use proper css to hide/show component
- update nav bar css to new boostrap
- update the modal dialog to align with the new bootstrap usage.
- update d3 imports in d3utils
- fix flow error
- fix no key warning in the <ul> list
- regenerate yarn.lock to fix flow error
- fix alignments and dropdown

Co-authored-by: Shahad <shahadshamsan@gmail.com>
Co-authored-by: unidevel <unidevel@hotmail.com>
Signed-off-by: Yihong Wang <yh.wang@ibm.com>
---
 presto-ui/src/components/ClusterHUD.jsx       |   2 +-
 presto-ui/src/components/LivePlan.jsx         |  10 +-
 presto-ui/src/components/PageTitle.jsx        |   8 +-
 presto-ui/src/components/QueryDetail.jsx      |  36 +-
 presto-ui/src/components/QueryHeader.jsx      |  45 +-
 presto-ui/src/components/QueryList.jsx        |  51 +-
 presto-ui/src/components/QueryOverview.jsx    |  18 +-
 presto-ui/src/components/QueryPlanView.jsx    |   8 +-
 presto-ui/src/components/QuerySplitsView.jsx  |   2 +-
 presto-ui/src/components/QueryStageView.jsx   | 301 ++++----
 presto-ui/src/components/QueryViewer.jsx      |   2 +-
 .../src/components/ResourceGroupView.jsx      |  27 +-
 presto-ui/src/components/SQLClient.jsx        |  16 +-
 presto-ui/src/components/SQLInput.jsx         |  10 +-
 presto-ui/src/components/SessionProps.jsx     |   2 +-
 presto-ui/src/components/StageDetail.jsx      | 237 +++---
 .../src/components/StaticQueryHeader.jsx      |  27 +-
 presto-ui/src/components/WorkerStatus.jsx     |   2 +-
 presto-ui/src/d3utils.js                      |   2 +-
 presto-ui/src/static/assets/presto.css        |  12 +-
 presto-ui/src/static/dev/index.html           |  10 +-
 presto-ui/src/static/embedded_plan.html       |   4 +-
 presto-ui/src/static/index.html               |   5 +-
 presto-ui/src/static/plan.html                |  10 +-
 presto-ui/src/static/query.html               |   7 +-
 presto-ui/src/static/res_groups.html          |   8 +-
 presto-ui/src/static/sql_client.html          |   8 +-
 presto-ui/src/static/stage.html               |  15 +-
 presto-ui/src/static/timeline.html            |   8 +-
 presto-ui/src/static/worker.html              |   8 +-
 presto-ui/src/templates/query_viewer.html     |  34 +-
 presto-ui/src/webpack.config.js               |  12 +-
 presto-ui/src/yarn.lock                       | 707 +++++++++---------
 33 files changed, 824 insertions(+), 830 deletions(-)

diff --git a/presto-ui/src/components/ClusterHUD.jsx b/presto-ui/src/components/ClusterHUD.jsx
index d0a93b3e606b4..e675bb6972842 100644
--- a/presto-ui/src/components/ClusterHUD.jsx
+++ b/presto-ui/src/components/ClusterHUD.jsx
@@ -135,7 +135,7 @@ export class ClusterHUD extends React.Component {
             });
         }
 
-        $('[data-bs-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="tooltip"]')?.tooltip();
     }
 
     render() {
diff --git a/presto-ui/src/components/LivePlan.jsx b/presto-ui/src/components/LivePlan.jsx
index 32fde032ec7a8..7ac5bdb4b4848 100644
--- a/presto-ui/src/components/LivePlan.jsx
+++ b/presto-ui/src/components/LivePlan.jsx
@@ -133,7 +133,7 @@ export class PlanNode extends React.Component<PlanNodeProps, PlanNodeState> {
 
     render(): any {
         return (
-            <div style={{color: "#000"}} data-bs-toggle="tooltip" data-placement="bottom" data-container="body" data-html="true"
+            <div style={{color: "#000"}} data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-container="body" data-bs-html="true"
                  title={"<h4>" + this.props.name + "</h4>" + this.props.identifier}>
                 <strong>{this.props.name}</strong>
                 <div>
@@ -310,7 +310,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
     componentDidUpdate() {
         this.updateD3Graph();
         //$FlowFixMe
-        $('[data-bs-toggle="tooltip"]').tooltip()
+        $('[data-bs-toggle="tooltip"]')?.tooltip()
     }
 
     render(): any {
@@ -340,16 +340,14 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
             )
         }
 
-        // TODO: Refactor components to move refreshLoop to parent rather than using this property
-        const queryHeader = this.props.isEmbedded ? null : <QueryHeader query={query}/>;
         return (
             <div>
-                {queryHeader}
+                {!this.props.isEmbedded && <QueryHeader query={query}/>}
                 <div className="row">
                     <div className="col-12">
                         {loadingMessage}
                         <div id="live-plan" className="graph-container">
-                            <div className="pull-right">
+                            <div className="float-end">
                                 {this.state.ended ? "Scroll to zoom." : "Zoom disabled while query is running." } Click stage to view additional statistics
                             </div>
                             <svg id="plan-canvas"/>
diff --git a/presto-ui/src/components/PageTitle.jsx b/presto-ui/src/components/PageTitle.jsx
index 99bcec4682fea..f3c2ea0ec6b4d 100644
--- a/presto-ui/src/components/PageTitle.jsx
+++ b/presto-ui/src/components/PageTitle.jsx
@@ -72,7 +72,7 @@ export class PageTitle extends React.Component<Props, State> {
                     lastSuccess: Date.now(),
                     modalShown: false,
                 });
-                //$FlowFixMe$ Bootstrap 3 plugin
+                //$FlowFixMe$ Bootstrap 5 plugin
                 $('#no-connection-modal').hide();
                 this.resetTimer();
             })
@@ -85,7 +85,7 @@ export class PageTitle extends React.Component<Props, State> {
                 this.resetTimer();
 
                 if (!this.state.modalShown && (error || (Date.now() - this.state.lastSuccess) > 30 * 1000)) {
-                    //$FlowFixMe$ Bootstrap 3 plugin
+                    //$FlowFixMe$ Bootstrap 5 plugin
                     $('#no-connection-modal').modal();
                     this.setState({modalShown: true});
                 }
@@ -139,7 +139,7 @@ export class PageTitle extends React.Component<Props, State> {
                             <span className="navbar-toggler-icon"></span>
                             </button>
                         <div id="navbar" className="navbar-collapse collapse">
-                            <ul className="nav navbar-nav navbar-right">
+                            <ul className="nav navbar-nav navbar-right ms-auto">
                                 <li>
                                     <span className="navbar-cluster-info">
                                         <span className="uppercase">Version</span><br/>
@@ -155,7 +155,7 @@ export class PageTitle extends React.Component<Props, State> {
                                 <li>
                                     <span className="navbar-cluster-info">
                                         <span className="uppercase">Uptime</span><br/>
-                                        <span data-bs-toggle="tooltip" data-placement="bottom" title="Connection status">
+                                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Connection status">
                                         {this.renderStatusLight()}
                                          </span>
                                         &nbsp;
diff --git a/presto-ui/src/components/QueryDetail.jsx b/presto-ui/src/components/QueryDetail.jsx
index 6aca438bea614..e92aabf3b2099 100644
--- a/presto-ui/src/components/QueryDetail.jsx
+++ b/presto-ui/src/components/QueryDetail.jsx
@@ -157,7 +157,7 @@ function TaskList({tasks}) {
         },
         {
             name: (<span className="bi bi-pause-circle-fill" style={GLYPHICON_HIGHLIGHT}
-                data-bs-toggle="tooltip" data-placement="top"
+                data-bs-toggle="tooltip" data-bs-placement="top"
                 title="Pending splits"/>),
             selector: row => row.stats.queuedDrivers,
             sortable: true,
@@ -166,7 +166,7 @@ function TaskList({tasks}) {
         },
         {
             name: (<span className="bi bi-play-circle-fill" style={GLYPHICON_HIGHLIGHT}
-                data-bs-toggle="tooltip" data-placement="top"
+                data-bs-toggle="tooltip" data-bs-placement="top"
                 title="Running splits"/>),
             selector: row => row.stats.runningDrivers,
             sortable: true,
@@ -176,7 +176,7 @@ function TaskList({tasks}) {
         {
             name: (<span className="bi bi-bookmark-check-fill"
                 style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip"
-                data-placement="top"
+                data-bs-placement="top"
                 title="Blocked splits"/>),
             selector: row => row.stats.blockedDrivers,
             sortable: true,
@@ -185,7 +185,7 @@ function TaskList({tasks}) {
         },
         {
             name: (<span className="bi bi-check-lg" style={GLYPHICON_HIGHLIGHT}
-                data-bs-toggle="tooltip" data-placement="top"
+                data-bs-toggle="tooltip" data-bs-placement="top"
                 title="Completed splits"/>),
             selector: row => row.stats.completedDrivers,
             sortable: true,
@@ -321,7 +321,7 @@ class RuntimeStatsList extends React.Component {
                      <th className="info-text">Max</th>
                      <th className="expand-charts-container">
                          <a onClick={this.toggleExpanded.bind(this)} className="expand-stats-button">
-                             <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-placement="top" title="Show metrics" />
+                             <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-bs-placement="top" title="Show metrics" />
                          </a>
                      </th>
                  </tr>
@@ -457,7 +457,7 @@ class StageSummary extends React.Component {
 
     renderTaskFilterListItem(taskFilter) {
         return (
-            <li><a href="#" className={this.state.taskFilter === taskFilter ? "selected" : ""}
+            <li><a href="#" className={`dropdown-item text-dark ${this.state.taskFilter === taskFilter ? "selected" : ""}`}
                    onClick={this.handleTaskFilterClick.bind(this, taskFilter)}>{taskFilter.text}</a></li>
         );
     }
@@ -479,13 +479,13 @@ class StageSummary extends React.Component {
                     <tbody>
                     <tr>
                         <td>
-                            <div className="input-group-btn text-right">
-                                <button type="button" className="btn btn-default dropdown-toggle pull-right text-right"
+                            <div className="btn-group text-right">
+                                <button type="button" className="btn dropdown-toggle bg-white text-dark float-end text-right rounded-0"
                                         data-bs-toggle="dropdown" aria-haspopup="true"
                                         aria-expanded="false">
                                     Show: {this.state.taskFilter.text} <span className="caret"/>
                                 </button>
-                                <ul className="dropdown-menu">
+                                <ul className="dropdown-menu bg-white text-dark rounded-0">
                                     {this.renderTaskFilterListItem(TASK_FILTER.ALL)}
                                     {this.renderTaskFilterListItem(TASK_FILTER.PLANNED)}
                                     {this.renderTaskFilterListItem(TASK_FILTER.RUNNING)}
@@ -702,7 +702,7 @@ class StageSummary extends React.Component {
                             </td>
                             <td className="expand-charts-container">
                                 <a onClick={this.toggleExpanded.bind(this)} className="expand-charts-button">
-                                    <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-placement="top" title="More"/>
+                                    <span className={"bi " + this.getExpandedIcon()} style={GLYPHICON_HIGHLIGHT} data-bs-toggle="tooltip" data-bs-placement="top" title="More"/>
                                 </a>
                             </td>
                         </tr>
@@ -1043,7 +1043,7 @@ export class QueryDetail extends React.Component {
             });
         }
 
-        $('[data-bs-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="tooltip"]')?.tooltip();
         new Clipboard('.copy-button');
     }
 
@@ -1089,7 +1089,7 @@ export class QueryDetail extends React.Component {
             <div className="col-12">
                 <h3>
                     Prepared Query
-                        <a className="btn copy-button" data-clipboard-target="#prepared-query-text" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                        <a className="btn copy-button" data-clipboard-target="#prepared-query-text" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                             <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                         </a>
                 </h3>
@@ -1224,7 +1224,7 @@ export class QueryDetail extends React.Component {
                             <tr>
                                 <td className="info-title">
                                     Stack Trace
-                                    <a className="btn copy-button" data-clipboard-target="#stack-trace" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                                    <a className="btn copy-button" data-clipboard-target="#stack-trace" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                         <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                                     </a>
                                 </td>
@@ -1263,7 +1263,7 @@ export class QueryDetail extends React.Component {
         return (
             <div>
                 <QueryHeader query={query}/>
-                <div className="row">
+                <div className="row mt-3">
                     <div className="col-6">
                         <h3>Session</h3>
                         <hr className="h3-hr"/>
@@ -1276,7 +1276,7 @@ export class QueryDetail extends React.Component {
                                 <td className="info-text wrap-text">
                                     <span id="query-user">{query.session.user}</span>
                                     &nbsp;&nbsp;
-                                    <a href="#" className="copy-button" data-clipboard-target="#query-user" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                                    <a href="#" className="copy-button" data-clipboard-target="#query-user" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                         <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                                     </a>
                                 </td>
@@ -1495,7 +1495,7 @@ export class QueryDetail extends React.Component {
                                     </tr>
                                    <tr>
                                         <td className="info-title">
-                                            <span className="text" data-bs-toggle="tooltip" data-placement="right" title="The total number of rows shuffled across all query stages">
+                                            <span className="text" data-bs-toggle="tooltip" data-bs-placement="right" title="The total number of rows shuffled across all query stages">
                                                 Shuffled Rows
                                             </span>
                                         </td>
@@ -1505,7 +1505,7 @@ export class QueryDetail extends React.Component {
                                     </tr>
                                     <tr>
                                         <td className="info-title">
-                                            <span className="text" data-bs-toggle="tooltip" data-placement="right" title="The total number of bytes shuffled across all query stages">
+                                            <span className="text" data-bs-toggle="tooltip" data-bs-placement="right" title="The total number of bytes shuffled across all query stages">
                                                 Shuffled Data
                                             </span>
                                         </td>
@@ -1699,7 +1699,7 @@ export class QueryDetail extends React.Component {
                     <div className="col-12">
                         <h3>
                             Query
-                            <a className="btn copy-button" data-clipboard-target="#query-text" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                            <a className="btn copy-button" data-clipboard-target="#query-text" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                 <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                             </a>
                         </h3>
diff --git a/presto-ui/src/components/QueryHeader.jsx b/presto-ui/src/components/QueryHeader.jsx
index 90285bdd8c7a3..ab53f88011e00 100644
--- a/presto-ui/src/components/QueryHeader.jsx
+++ b/presto-ui/src/components/QueryHeader.jsx
@@ -13,6 +13,7 @@
  */
 
 import React from "react";
+import { clsx } from 'clsx';
 
 import {getHumanReadableState, getProgressBarPercentage, getProgressBarTitle, getQueryStateColor, isQueryEnded} from "../utils";
 
@@ -83,46 +84,44 @@ export class QueryHeader extends React.Component {
         );
     }
 
-    renderTab(path, name) {
-        const queryId = this.props.query.queryId;
+    isActive(path) {
         if (window.location.pathname.includes(path)) {
-            return  <a href={path + '?' + queryId} className="btn btn-info navbar-btn nav-disabled">{name}</a>;
+            return  true;
         }
 
-        return <a href={path + '?' + queryId} className="btn btn-info navbar-btn">{name}</a>;
+        return false;
     }
 
     render() {
         const query = this.props.query;
+        const queryId = this.props.query.queryId;
+        const tabs = [
+            {path: 'query.html', label: 'Overview'},
+            {path: 'plan.html', label: 'Live Plan'},
+            {path: 'stage.html', label: 'Stage Performance'},
+            {path: 'timeline.html', label: 'Splits'},
+        ];
         return (
             <div>
-                <div className="row">
+                <div className="row mt-4">
                     <div className="col-6">
                         <h3 className="query-id">
                             <span id="query-id">{query.queryId}</span>
-                            <a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                            <a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                                 <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard"/>
                             </a>
                         </h3>
                     </div>
-                    <div className="col-6">
-                        <table className="header-inline-links">
-                            <tbody>
-                            <tr>
-                                <td>
-                                    {this.renderTab("query.html", "Overview")}
-                                    &nbsp;
-                                    {this.renderTab("plan.html", "Live Plan")}
-                                    &nbsp;
-                                    {this.renderTab("stage.html", "Stage Performance")}
-                                    &nbsp;
-                                    {this.renderTab("timeline.html", "Splits")}
+                    <div className="col-6 d-flex justify-content-end">
+                        <nav className="nav nav-tabs">
+                            {tabs.map((page, _) => (
+                                <>
+                                    <a className={clsx('nav-link', 'navbar-btn', this.isActive(page.path) && 'active')} href={page.path + '?' + queryId} >{page.label}</a>
                                     &nbsp;
-                                    <a href={"/v1/query/" + query.queryId + "?pretty"} className="btn btn-info navbar-btn rounded-0" target="_blank">JSON</a>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
+                                </>
+                            ))}
+                            <a className="nav-link navbar-btn" href={"/v1/query/" + query.queryId + "?pretty"} target="_blank">JSON</a>
+                        </nav>
                     </div>
                 </div>
                 <hr className="h2-hr"/>
diff --git a/presto-ui/src/components/QueryList.jsx b/presto-ui/src/components/QueryList.jsx
index cea2a50d61bf6..7fa4556ad8770 100644
--- a/presto-ui/src/components/QueryList.jsx
+++ b/presto-ui/src/components/QueryList.jsx
@@ -144,15 +144,15 @@ export class QueryListItem extends React.Component {
 
         const splitDetails = (
             <div className="col-12 tinystat-row">
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Completed splits">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Completed splits">
                     <span className="bi bi-check-lg" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {formatCount(query.progress.completedDrivers)}
                 </span>
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Running splits">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Running splits">
                     <span className="bi bi-play-circle-fill" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {(query.queryState === "FINISHED" || query.queryState === "FAILED") ? 0 : query.progress.runningDrivers}
                 </span>
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Queued splits">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Queued splits">
                     <span className="bi bi-pause-btn-fill" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {(query.queryState === "FINISHED" || query.queryState === "FAILED") ? 0 : query.progress.queuedDrivers}
                     </span>
@@ -160,15 +160,15 @@ export class QueryListItem extends React.Component {
 
         const timingDetails = (
             <div className="col-12 tinystat-row">
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Wall time spent executing the query (not including queued time)">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Wall time spent executing the query (not including queued time)">
                     <span className="bi bi-hourglass-split" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {formatDuration(query.progress.executionTimeMillis)}
                 </span>
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Total query wall time">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Total query wall time">
                     <span className="bi bi-clock" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {formatDuration(query.progress.elapsedTimeMillis)}
                 </span>
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="CPU time spent by this query">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="CPU time spent by this query">
                     <span className="bi bi-speedometer2" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {formatDuration(query.progress.cpuTimeMillis)}
                 </span>
@@ -176,15 +176,15 @@ export class QueryListItem extends React.Component {
 
         const memoryDetails = (
             <div className="col-12 tinystat-row">
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Current reserved memory">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Current reserved memory">
                     <span className="bi bi-calendar2-event" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {formatDataSize(query.progress.currentMemoryBytes)}
                 </span>
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Peak memory">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Peak memory">
                     <span className="bi bi-fire" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {formatDataSize(query.progress.peakMemoryBytes)}
                 </span>
-                <span className="tinystat" data-bs-toggle="tooltip" data-placement="top" title="Cumulative user memory">
+                <span className="tinystat" data-bs-toggle="tooltip" data-bs-placement="top" title="Cumulative user memory">
                     <span className="bi bi-reception-3" style={GLYPHICON_HIGHLIGHT}/>&nbsp;&nbsp;
                     {formatDataSizeBytes(query.progress.cumulativeUserMemory / 1000.0)}
                 </span>
@@ -202,17 +202,17 @@ export class QueryListItem extends React.Component {
                 <div className="row">
                     <div className="col-4">
                         <div className="row stat-row query-header query-header-queryid">
-                            <div className="col-9" data-placement="bottom">
+                            <div className="col-9" data-bs-placement="bottom">
                                 <a href={"query.html?" + query.queryId} target="_blank" data-bs-toggle="tooltip" data-trigger="hover" title="Query ID">{query.queryId}</a>
                                 {this.renderWarning()}
                             </div>
-                            <div className="col-3 query-header-timestamp" data-bs-toggle="tooltip" data-placement="bottom" title="Submit time">
+                            <div className="col-3 query-header-timestamp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Submit time">
                                 <span>{formatShortTime(new Date(Date.parse(query.createTime)))}</span>
                             </div>
                         </div>
                         <div className="row stat-row">
                             <div className="col-12">
-                                <span data-bs-toggle="tooltip" data-placement="right" title="User">
+                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="User">
                                     <span className="bi bi-person-fill" style={GLYPHICON_DEFAULT}/>&nbsp;&nbsp;
                                     <span>{user}</span>
                                 </span>
@@ -220,7 +220,7 @@ export class QueryListItem extends React.Component {
                         </div>
                         <div className="row stat-row">
                             <div className="col-12">
-                                <span data-bs-toggle="tooltip" data-placement="right" title="Source">
+                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Source">
                                     <span className="bi bi-arrow-right-square-fill" style={GLYPHICON_DEFAULT}/>&nbsp;&nbsp;
                                     <span>{truncateString(query.source, 35)}</span>
                                 </span>
@@ -228,7 +228,7 @@ export class QueryListItem extends React.Component {
                         </div>
                         <div className="row stat-row">
                             <div className="col-12">
-                                <span data-bs-toggle="tooltip" data-placement="right" title="Resource Group">
+                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Resource Group">
                                     <span className="bi bi-sign-merge-left-fill" style={GLYPHICON_DEFAULT}/>&nbsp;&nbsp;
                                     <span>
                                         <ResourceGroupLinks groupId={query.resourceGroupId} length="35"/>
@@ -538,7 +538,7 @@ export class QueryList extends React.Component {
             return (
                 <li>
                     <a href="#" className="dropdown-item text-dark" onClick={this.handleSortClick.bind(this, sortType)}>
-                        {sortText} 
+                        {sortText}
                     </a>
                 </li>);
         }
@@ -648,18 +648,15 @@ export class QueryList extends React.Component {
 
         return (
             <div>
-                <div className="row toolbar-row justify-content-center">
-                    <div className="col-12 input-group gap-1 toolbar-col">    
-                        <div className="input-group-prepend">
+                <div className="row toolbar-row">
+                    <div className="col-12 input-group gap-1 toolbar-col d-flex">
+                        <div className="input-group-prepend flex-grow-1">
                             <input type="text" className="form-control search-bar rounded-0" placeholder="User, source, query ID, resource group, or query text"
+                                onChange={this.handleSearchStringChange} value={this.state.searchString} style={{backgroundColor: "white" ,color: 'black', fontSize: '12px', borderColor:"#CCCCCC"}} />
+                        </div>
 
-                                onChange={this.handleSearchStringChange} value={this.state.searchString} style={{backgroundColor: "white", flex:"0 1 500.586px", width:"500.586px" ,color: 'black', fontSize: '12px', borderColor:"#CCCCCC"}} />
-                                   </div> 
-                            <div className="input-group-prepend">
-                            <span className="input-group-text rounded-0" style={{backgroundColor: "white", color: 'black', height:"2rem", fontSize:'12px', borderColor:"#454A58" }}>State:</span>
-
-                            </div>
-                            <div className="input-group-btn">
+                            <div className="input-group-btn d-flex align-items-center ms-auto">
+                                 <span className="input-group-text input-group-prepend rounded-0" style={{backgroundColor: "white", color: 'black', height:"2rem", fontSize:'12px', borderColor:"#454A58" }}>State:</span>
                                 {this.renderFilterButton(FILTER_TYPE.RUNNING, "Running")}
                                 {this.renderFilterButton(FILTER_TYPE.QUEUED, "Queued")}
                                 {this.renderFilterButton(FILTER_TYPE.FINISHED, "Finished")}
@@ -672,7 +669,7 @@ export class QueryList extends React.Component {
                                     {this.renderErrorTypeListItem(ERROR_TYPE.INSUFFICIENT_RESOURCES, "Resources Error")}
                                     {this.renderErrorTypeListItem(ERROR_TYPE.USER_ERROR, "User Error")}
                                 </ul>
-                            
+
                             </div>
                             &nbsp;
                             <div className="input-group-btn">
@@ -717,7 +714,7 @@ export class QueryList extends React.Component {
                             </div>
                         </div>
                     </div>
-                
+
                 {queryList}
             </div>
         );
diff --git a/presto-ui/src/components/QueryOverview.jsx b/presto-ui/src/components/QueryOverview.jsx
index fa9de9d2ac5a9..418ff290ca1f0 100644
--- a/presto-ui/src/components/QueryOverview.jsx
+++ b/presto-ui/src/components/QueryOverview.jsx
@@ -554,7 +554,7 @@ function StageSummary({ index, prestoStage }: { index: number, prestoStage: Outp
 
     const renderTaskFilterListItem = (taskFilter: TaskFilter) => {
         return (
-            <li><a href="#" className={state.taskFilter === taskFilter ? "selected" : ""}
+            <li><a href="#" className={`dropdown-item text-dark ${state.taskFilter === taskFilter ? "selected" : ""}`}
                 onClick={(event) => handleTaskFilterClick(taskFilter, event)}>{taskFilter.text}</a></li>
         );
     }
@@ -570,13 +570,13 @@ function StageSummary({ index, prestoStage }: { index: number, prestoStage: Outp
                         <tbody>
                             <tr>
                                 <td>
-                                    <div className="input-group-btn text-right">
-                                        <button type="button" className="btn btn-default dropdown-toggle pull-right text-right"
+                                    <div className="btn-group text-right">
+                                        <button type="button" className="btn dropdown-toggle bg-white text-dark float-end text-right rounded-0"
                                             data-bs-toggle="dropdown" aria-haspopup="true"
                                             aria-expanded="false">
                                             Show: {state.taskFilter.text} <span className="caret" />
                                         </button>
-                                        <ul className="dropdown-menu">
+                                        <ul className="dropdown-menu bg-white text-dark rounded-0">
                                             {renderTaskFilterListItem(TASK_FILTER.ALL)}
                                             {renderTaskFilterListItem(TASK_FILTER.PLANNED)}
                                             {renderTaskFilterListItem(TASK_FILTER.RUNNING)}
@@ -1215,10 +1215,18 @@ export default function QueryOverview({ data, show }: { data: QueryData, show: b
         return;
     }
 
+    useEffect(() => {
+        /* $FlowIgnore[cannot-resolve-name] */
+        $('#query').each((i, block) => {
+            /* $FlowIgnore[cannot-resolve-name] */
+            hljs.highlightBlock(block);
+        });
+    }, [data]);
+
     const elapsedTime = (parseDuration(data.queryStats.elapsedTime) || 0) / 1000.0;
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div className="row">
                 <div className="col-6">
                     <h3>Session</h3>
diff --git a/presto-ui/src/components/QueryPlanView.jsx b/presto-ui/src/components/QueryPlanView.jsx
index 7414a3975f63d..8fa418d1ffc5f 100644
--- a/presto-ui/src/components/QueryPlanView.jsx
+++ b/presto-ui/src/components/QueryPlanView.jsx
@@ -99,8 +99,8 @@ export default function PlanView({show, data}) {
 
         // Zoom doesn't deal well with DOM changes
         const initialScale = Math.min(width / graphWidth, height / graphHeight);
-        const zoom = d3.zoom().scaleExtent([initialScale, 1]).on("zoom", function () {
-            inner.attr("transform", d3.event.transform);
+        const zoom = d3.zoom().scaleExtent([initialScale, 1]).on("zoom",(event) => {
+            inner.attr("transform", event.transform);
         });
 
         svg.call(zoom);
@@ -114,11 +114,11 @@ export default function PlanView({show, data}) {
             widgets.current.svg = d3.select("#plan-canvas");
         }
         updateD3Graph();
-        $('[data-bs-toggle="tooltip"]').tooltip()
+        $('[data-bs-toggle="tooltip"]')?.tooltip()
     }, [data, show]);
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div className="row">
             <div className="col-12">
                 <div id="plan-viewer" className="graph-container">
diff --git a/presto-ui/src/components/QuerySplitsView.jsx b/presto-ui/src/components/QuerySplitsView.jsx
index 1ea5807e01cf7..2181fd69f330c 100644
--- a/presto-ui/src/components/QuerySplitsView.jsx
+++ b/presto-ui/src/components/QuerySplitsView.jsx
@@ -126,7 +126,7 @@ export default function SplitView({ data, show }): void {
     }, [data, show]);
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div id="legend" className="row">
                 <div>
                     <div className="red bar"></div>
diff --git a/presto-ui/src/components/QueryStageView.jsx b/presto-ui/src/components/QueryStageView.jsx
index fb0ba852d98e5..198c18a76d9d8 100644
--- a/presto-ui/src/components/QueryStageView.jsx
+++ b/presto-ui/src/components/QueryStageView.jsx
@@ -24,7 +24,6 @@ import {
     formatCount,
     formatDataSize,
     formatDuration,
-    getChildren,
     getTaskNumber,
     parseDataSize,
     parseDuration
@@ -47,7 +46,7 @@ function OperatorSummary({ operator }) {
     const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
 
     return (
-        <div>
+        <div className="header-data">
             <div className="highlight-row">
                 <div className="header-row">
                     {operator.operatorType}
@@ -107,6 +106,7 @@ function OperatorSummary({ operator }) {
 const BAR_CHART_PROPERTIES = {
     barColor: '#747F96',
     barSpacing: '0',
+    chartRangeMin: 0,
     disableHiddenCheck: true,
     height: '80px',
     tooltipClassname: 'sparkline-tooltip',
@@ -210,121 +210,123 @@ function OperatorDetail({ index, operator, tasks }) {
     const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.outputDataSize)) / (totalWallTime / 1000.0);
 
     return (
-        <div className="row" key={index}>
-            <div className="col-12">
-                <div className="modal-header">
-                    <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h3>
-                        <small>Pipeline {operator.pipelineId}</small>
-                        <br />
-                        {operator.operatorType}
-                    </h3>
-                </div>
-                <div className="row">
-                    <div className="col-6">
-                        <table className="table">
-                            <tbody>
-                                <tr>
-                                    <td>
-                                        Input
-                                    </td>
-                                    <td>
-                                        {formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        Input Rate
-                                    </td>
-                                    <td>
-                                        {formatCount(rowInputRate) + " rows/s (" + formatDataSize(byteInputRate) + "/s)"}
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        Output
-                                    </td>
-                                    <td>
-                                        {formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        Output Rate
-                                    </td>
-                                    <td>
-                                        {formatCount(rowOutputRate) + " rows/s (" + formatDataSize(byteOutputRate) + "/s)"}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div className="col-6">
-                        <table className="table">
-                            <tbody>
-                                <tr>
-                                    <td>
-                                        Wall Time
-                                    </td>
-                                    <td>
-                                        {formatDuration(totalWallTime)}
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        Blocked
-                                    </td>
-                                    <td>
-                                        {formatDuration(parseDuration(operator.blockedWall))}
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        Drivers
-                                    </td>
-                                    <td>
-                                        {operator.totalDrivers}
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        Tasks
-                                    </td>
-                                    <td>
-                                        {operatorTasks.length}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-                <div className="row font-white">
-                    <div className="col-2 italic-uppercase">
-                        <strong>
-                            Statistic
-                        </strong>
+        <div className="col-12 container mx-2">
+            <div className="modal-header">
+                <h3 className="modal-title fs-5">
+                    <small>Pipeline {operator.pipelineId}</small>
+                    <br />
+                    {operator.operatorType}
+                </h3>
+                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div className="row modal-body">
+                <div className="col-12">
+                    <div className="row">
+                        <div className="col-6">
+                            <table className="table">
+                                <tbody>
+                                    <tr>
+                                        <td>
+                                            Input
+                                        </td>
+                                        <td>
+                                            {formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            Input Rate
+                                        </td>
+                                        <td>
+                                            {formatCount(rowInputRate) + " rows/s (" + formatDataSize(byteInputRate) + "/s)"}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            Output
+                                        </td>
+                                        <td>
+                                            {formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            Output Rate
+                                        </td>
+                                        <td>
+                                            {formatCount(rowOutputRate) + " rows/s (" + formatDataSize(byteOutputRate) + "/s)"}
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div className="col-6">
+                            <table className="table">
+                                <tbody>
+                                    <tr>
+                                        <td>
+                                            Wall Time
+                                        </td>
+                                        <td>
+                                            {formatDuration(totalWallTime)}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            Blocked
+                                        </td>
+                                        <td>
+                                            {formatDuration(parseDuration(operator.blockedWall))}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            Drivers
+                                        </td>
+                                        <td>
+                                            {operator.totalDrivers}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            Tasks
+                                        </td>
+                                        <td>
+                                            {operatorTasks.length}
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
-                    <div className="col-10 italic-uppercase">
-                        <strong>
-                            Tasks
-                        </strong>
+                    <div className="row font-white">
+                        <div className="col-2 italic-uppercase">
+                            <strong>
+                                Statistic
+                            </strong>
+                        </div>
+                        <div className="col-10 italic-uppercase">
+                            <strong>
+                                Tasks
+                            </strong>
+                        </div>
                     </div>
+                    {
+                        selectedStatistics.map((statistic) => {
+                            return (
+                                <OperatorStatistic
+                                    key={statistic.id}
+                                    id={statistic.id}
+                                    name={statistic.name}
+                                    supplier={statistic.supplier}
+                                    renderer={statistic.renderer}
+                                    operators={operatorTasks} />
+                            );
+                        })
+                    }
+                    <p />
+                    <p />
                 </div>
-                {
-                    selectedStatistics.map((statistic) => {
-                        return (
-                            <OperatorStatistic
-                                key={statistic.id}
-                                id={statistic.id}
-                                name={statistic.name}
-                                supplier={statistic.supplier}
-                                renderer={statistic.renderer}
-                                operators={operatorTasks} />
-                        );
-                    })
-                }
-                <p />
-                <p />
             </div>
         </div>
     );
@@ -395,23 +397,29 @@ function StageOperatorGraph({ id, stage }) {
         }
     }, [stage]);
 
-    const handleOperatorClick = (operatorCssId) => {
-        $('#operator-detail-modal').modal();
+    const handleOperatorClick = (event) => {
+        // fix this: need to figure out how to get the proper <div> node
+        if (event.target.hasOwnProperty("__data__") && event.target.__data__ !== undefined) {
+            $('#operator-detail-modal').modal("show")
 
-        const pipelineId = parseInt(operatorCssId.split('-')[1]);
-        const operatorId = parseInt(operatorCssId.split('-')[2]);
-        let operatorStageSummary = null;
-        const operatorSummaries = stage.latestAttemptExecutionInfo.stats.operatorSummaries;
-        for (let i = 0; i < operatorSummaries.length; i++) {
-            if (operatorSummaries[i].pipelineId === pipelineId && operatorSummaries[i].operatorId === operatorId) {
-                operatorStageSummary = operatorSummaries[i];
+            const pipelineId = (event?.target?.__data__ || "").split('-').length > 0 ? parseInt((event?.target?.__data__ || '').split('-')[1] || '0') : 0;
+            const operatorId = (event?.target?.__data__ || "").split('-').length > 0 ? parseInt((event?.target?.__data__ || '').split('-')[2] || '0') : 0;
+
+            let operatorStageSummary = null;
+            const operatorSummaries = stage.latestAttemptExecutionInfo.stats.operatorSummaries;
+            for (let i = 0; i < operatorSummaries.length; i++) {
+                if (operatorSummaries[i].pipelineId === pipelineId && operatorSummaries[i].operatorId === operatorId) {
+                    operatorStageSummary = operatorSummaries[i];
+                }
             }
-        }
 
-        if (!detailContainer.current) {
-            detailContainer.current = createRoot(document.getElementById('operator-detail'));
+            if (!detailContainer.current) {
+                detailContainer.current = createRoot(document.getElementById('operator-detail'));
+            }
+            detailContainer.current.render(<OperatorDetail index={event} operator={operatorStageSummary} tasks={stage.latestAttemptExecutionInfo.tasks} />);
+        } else {
+            return;
         }
-        detailContainer.current.render(<OperatorDetail index={operatorCssId} operator={operatorStageSummary} tasks={stage.latestAttemptExecutionInfo.tasks} />);
     }
 
     const computeD3StageOperatorGraph = (graph, operator, sink, pipelineNode) => {
@@ -511,22 +519,31 @@ export default function StageView({ data, show }) {
     const stageOperatorGraph = <StageOperatorGraph id={stage.stageId} stage={stage} />;
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div className="row">
                 <div className="col-12">
-                    <div className="row">
-                        <div className="col-2">
+                    <div className="row justify-content-between">
+                        <div className="col-2 align-self-end">
                             <h3>Stage {stage.plan.id}</h3>
                         </div>
-                        <div className="col-8" />
-                        <div className="col-2 stage-dropdown">
-                            <div className="input-group-btn">
-                                <button type="button" className="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    Select Stage <span className="caret" />
-                                </button>
-                                <ul className="dropdown-menu">
-                                    {allStages.map(stageId => (<li key={stageId}><a onClick={() => setState({ selectedStageId: stageId })}>{stageId}</a></li>))}
-                                </ul>
+                        <div className="col-2 align-self-end">
+                            <div className="stage-dropdown" role="group">
+                                <div className="btn-group">
+                                    <button type="button" className="btn btn-secondary dropdown-toggle"
+                                        data-bs-toggle="dropdown" aria-haspopup="true"
+                                        aria-expanded="false">Select Stage<span className="caret"/>
+                                    </button>
+                                    <ul className="dropdown-menu">
+                                        {
+                                            allStages.map(stageId => (
+                                                <li key={stageId}>
+                                                    <a className={clsx('dropdown-item', stage.plan.id === stageId && 'active')}
+                                                        onClick={() => setState({selectedStageId: stageId})}>{stageId}</a>
+                                                </li>
+                                            ))
+                                        }
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -538,11 +555,9 @@ export default function StageView({ data, show }) {
                     <svg id="operator-canvas" />
                     {stageOperatorGraph}
                 </div>
-                <div id="operator-detail-modal" className="modal" tabIndex="-1" role="dialog">
+                <div id="operator-detail-modal" className="modal fade" tabIndex="-1" role="dialog" aria-hidden="true">
                     <div className="modal-dialog modal-lg" role="document">
-                        <div className="modal-content">
-                            <div id="operator-detail" className="container"></div>
-                        </div>
+                        <div id="operator-detail" className="row modal-content"></div>
                     </div>
                 </div>
             </div>
diff --git a/presto-ui/src/components/QueryViewer.jsx b/presto-ui/src/components/QueryViewer.jsx
index ba78cd8c0207c..d5a2b8f161dc0 100644
--- a/presto-ui/src/components/QueryViewer.jsx
+++ b/presto-ui/src/components/QueryViewer.jsx
@@ -23,7 +23,7 @@ import StaticQueryHeader from './StaticQueryHeader';
 // A form to select a JSON file and read
 const FileForm = ({ onChange }) => (
     <div className="row">
-        <div className="col-4 col-offset-1 input-group">
+        <div className="col-4 offset-1 fs-6">
             <div id="title">Select a JSON file of SQL query to process</div>
             <form id='form' className="form-inline">
                 <div className="form-group">
diff --git a/presto-ui/src/components/ResourceGroupView.jsx b/presto-ui/src/components/ResourceGroupView.jsx
index 2019d5d5cc9b0..bc9f52caac805 100644
--- a/presto-ui/src/components/ResourceGroupView.jsx
+++ b/presto-ui/src/components/ResourceGroupView.jsx
@@ -13,6 +13,7 @@
  */
 
 import React from 'react';
+import { clsx } from 'clsx';
 import { addToHistory, formatDataSizeBytes, parseDataSize, truncateString } from "../utils";
 import { QueryListItem } from "./QueryList";
 
@@ -69,16 +70,14 @@ function NoGroupIdWidget({groupId, error, groups}) {
 
     if (groups.length > 0) {
         docView = (
-            <>
-            <div className="col-4 col-offset-4">
+            <div className="col-4">
                 <h4 className="text-center res-heading">Available resource groups:</h4>
                 <div className="list-group">
-                    {groups.map(grp => (
-                    <a className="list-group-item text-center" href={'./res_groups.html?group=' + encodeURIComponent(grp.id[0])}>{truncateString(grp.id[0], 35)}</a>
+                    {groups.map((grp, idx) => (
+                    <a key={idx} className="list-group-item text-center" href={'./res_groups.html?group=' + encodeURIComponent(grp.id[0])}>{truncateString(grp.id[0], 35)}</a>
                     ))}
                 </div>
             </div>
-            </>
         );
     } else if (error) {
         docView = (
@@ -90,7 +89,7 @@ function NoGroupIdWidget({groupId, error, groups}) {
     }
 
     return (
-        <div className="col-12">{docView}</div>
+        <div className="row justify-content-md-center">{docView}</div>
     );
 }
 
@@ -234,7 +233,7 @@ export default function ResourceGroupView() {
         $('#agg-running-queries-sparkline').sparkline(dataSet.current.numAggregatedRunningQueries, $.extend({}, SPARKLINE_PROPERTIES, {chartRangeMin: 0}));
         $('#agg-queued-queries-sparkline').sparkline(dataSet.current.numAggregatedQueuedQueries, $.extend({}, SPARKLINE_PROPERTIES, {chartRangeMin: 0}));
         $('#memory-usage-sparkline').sparkline(dataSet.current.memoryUsage, $.extend({}, SPARKLINE_PROPERTIES, {numberFormatter: formatDataSizeBytes}));
-        $('[data-bs-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="tooltip"]')?.tooltip();
         timerid.current = setTimeout(fetchData, 1000);
     }
 
@@ -253,12 +252,10 @@ export default function ResourceGroupView() {
 
     return (
         <>
-            <div className={values.showDoc ? 'container' : 'hide container'}>
-                <div className="row">
-                    <NoGroupIdWidget groupId={group} error={values.error} groups={values.rootGroups} />
-                </div>
+            <div className={clsx('container', !values.showDoc && 'visually-hidden')}>
+                <NoGroupIdWidget groupId={group} error={values.error} groups={values.rootGroups} />
             </div>
-            <div className={values.showResource ? 'container' : 'hide container'}>
+            <div className={clsx('container', !values.showResource && 'visually-hidden')}>
                 <div className="row">
                     {values.id.length > 0 && (
                         <div className="row">
@@ -289,8 +286,8 @@ export default function ResourceGroupView() {
                                     Sub-Groups
                                 </td>
                                 <td className="info-text">
-                                    <ul>{values.subGroups.map(grp => (
-                                        <li><a href={'./res_groups.html?group=' + encodeURIComponent(grp)}>{truncateString(grp, 35)}</a></li>
+                                    <ul>{values.subGroups.map((grp, idx) => (
+                                        <li key={idx}><a href={'./res_groups.html?group=' + encodeURIComponent(grp)}>{truncateString(grp, 35)}</a></li>
                                     ))}</ul>
                                 </td>
                             </tr>
@@ -310,7 +307,7 @@ export default function ResourceGroupView() {
                             </tbody>
                         </table>
                     </div>
-                    <div className={ values.runningQueries.length ? "col-12" : "hide col-12"}>
+                    <div className={clsx('col-12', !values.runningQueries.length && 'visually-hidden')}>
                         <h3>Running Queries</h3>
                         <hr className="h3-hr"/>
                         { values.runningQueries.map( query => (
diff --git a/presto-ui/src/components/SQLClient.jsx b/presto-ui/src/components/SQLClient.jsx
index 839f21b04ff74..65a4d2c16032f 100644
--- a/presto-ui/src/components/SQLClient.jsx
+++ b/presto-ui/src/components/SQLClient.jsx
@@ -70,26 +70,28 @@ export default function SQLClientView() {
 
     return (
         <>
-            <div className="alert alert-warning alert-dismissible fade show" role="alert" style={{display: 'block', marginLeft: 'auto', marginRight: 'auto',  marginTop: '10px', textAlign: 'center', background: '#fcf8e3', color:'#8a6d3b', borderColor:'#faebcc', borderRadius:0, fontSize:"14px"}}>
-                <button type="button" className="btn-close" data-bs-dismiss="alert" style={{filter:'contrast(0.5)'}} aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <div className="alert alert-warning alert-dismissible fade show" role="alert">
                 SQL client directly accesses the coordinator APIs and submits SQL queries. Users who can access the Web UI can use this client to query,
                 update, and even delete data in the catalogs. Be sure to enable the user authentication to protect the Web UI access if needed.
                 By default, the SQL client uses the <strong>prestoui</strong> user id. You can set
                 up <a className="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href='http://prestodb.io/docs/current/security/built-in-system-access-control.html' target='_blank'>system access controls</a>
                 &nbsp;or <a className="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href='http://prestodb.io/docs/current/security/authorization.html' target='_blank'>authorization policies</a> to
                 restrict access from the SQL client. Check detailed <a className="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover"href='http://prestodb.io/docs/current/security.html' target="_blank">documentation</a>.
+                <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             </div>
             <div className='container'>
                 <div className="row">
                     <div className="col-12">
-                        <ul className="nav nav-tabs">
+                        <nav className="nav nav-tabs">
                             {views.map((view, idx) => (
-                                <li key={idx} className={clsx(values.view === view.name && 'active')}>
-                                    <a href="#" onClick={() => switchView(view)}>{view.label}</a>
-                                </li>
+                                <a className={clsx('nav-link', values.view === view.name && 'active')} href="#" onClick={() => switchView(view)}>{view.label}</a>
                             ))}
-                        </ul>
+                        </nav>
+                    </div>
+                    <div className="col-12">
                         <hr className="h3-hr"/>
+                    </div>
+                    <div className="col-12">
                         <SQLInput
                             handleSQL={executeSQL}
                             show={values.view === 'SQL'}
diff --git a/presto-ui/src/components/SQLInput.jsx b/presto-ui/src/components/SQLInput.jsx
index e6a31098c5407..1bed7cd8c8d10 100644
--- a/presto-ui/src/components/SQLInput.jsx
+++ b/presto-ui/src/components/SQLInput.jsx
@@ -104,13 +104,13 @@ function SQLDropDown({ text, values, onSelect }) {
     }
 
     return (
-        <div className="btn-group dropdown">
-            <button type="button" className="btn btn-default dropdown-toggle"
+        <div className="btn-group">
+            <button type="button" className="btn btn-secondary dropdown-toggle"
                 data-bs-toggle="dropdown" aria-haspopup="true"
                 aria-expanded="false">{text}</button>
             <ul className="dropdown-menu">
                 {items.map((item, idx) => (
-                    <li key={idx}><a href="#" className={clsx(data.current === item && 'selected')} onClick={() => selectItem(item)}>{item}</a></li>
+                    <li key={idx}><a href="#" className={clsx('dropdown-item', data.current === item && 'active')} onClick={() => selectItem(item)}>{item}</a></li>
                 ))}
             </ul>
         </div>
@@ -204,12 +204,14 @@ export function SQLInput({ handleSQL, show, enabled, initialSQL, errorHandler })
     }, [initialSQL]);
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div className="row">
                 <div className="col-12">
                     <div className='input-group' role='group'>
                         <SQLDropDown text='Catalog' values={data.catalogs} onSelect={setCatalog} />
+                        &nbsp;
                         <SQLDropDown text='Schema' values={data.schemas} onSelect={setSchema} />
+                        &nbsp;
                         <div className="btn-group">
                             <button className={clsx('btn', 'btn-success', !enabled && 'disabled')} type="button" onClick={checkValue}>Run</button>
                         </div>
diff --git a/presto-ui/src/components/SessionProps.jsx b/presto-ui/src/components/SessionProps.jsx
index e25f09da08a2e..f1386dcffd6f8 100644
--- a/presto-ui/src/components/SessionProps.jsx
+++ b/presto-ui/src/components/SessionProps.jsx
@@ -180,7 +180,7 @@ export function SessionProps({ show, changeHandler }) {
     }, []);
 
     return (
-        <div className={clsx(!show && 'hide')}>
+        <div className={clsx(!show && 'visually-hidden')}>
             <div className="row">
                 <div className='col-12'>
                     <DataTable
diff --git a/presto-ui/src/components/StageDetail.jsx b/presto-ui/src/components/StageDetail.jsx
index 77f7af0649741..41e2c738405b7 100644
--- a/presto-ui/src/components/StageDetail.jsx
+++ b/presto-ui/src/components/StageDetail.jsx
@@ -18,6 +18,7 @@ import { createRoot } from 'react-dom/client';
 import ReactDOMServer from "react-dom/server";
 import * as dagreD3 from "dagre-d3-es";
 import * as d3 from "d3";
+import { clsx } from 'clsx';
 
 import {
     formatCount,
@@ -111,97 +112,86 @@ const BAR_CHART_PROPERTIES = {
     height: '80px',
     barColor: '#747F96',
     zeroColor: '#8997B3',
+    chartRangeMin: 0,
     tooltipClassname: 'sparkline-tooltip',
     tooltipFormat: 'Task {{offset:offset}} - {{value}}',
     disableHiddenCheck: true,
 };
 
-class OperatorStatistic extends React.Component {
-    componentDidMount() {
-        const operators = this.props.operators;
-        const statistic = operators.map(this.props.supplier);
+function OperatorStatistic({ id, name, operators, supplier, renderer }) {
+
+    React.useEffect(() => {
+        const statistic = operators.map(supplier);
         const numTasks = operators.length;
 
-        const tooltipValueLookups = {'offset': {}};
+        const tooltipValueLookups = { 'offset': {} };
         for (let i = 0; i < numTasks; i++) {
             tooltipValueLookups['offset'][i] = "" + i;
         }
 
-        const stageBarChartProperties = $.extend({}, BAR_CHART_PROPERTIES, {barWidth: 800 / numTasks, tooltipValueLookups: tooltipValueLookups});
-        $('#' + this.props.id).sparkline(statistic, $.extend({}, stageBarChartProperties, {numberFormatter: this.props.renderer}));
-    }
+        const stageBarChartProperties = $.extend({}, BAR_CHART_PROPERTIES, { barWidth: 800 / numTasks, tooltipValueLookups: tooltipValueLookups });
+        $('#operator-statics-' + id).sparkline(statistic, $.extend({}, stageBarChartProperties, { numberFormatter: renderer }));
 
-    render() {
-        return (
-            <div className="row operator-statistic">
-                <div className="col-2 italic-uppercase operator-statistic-title">
-                    {this.props.name}
-                </div>
-                <div className="col-10">
-                    <span className="bar-chart" id={this.props.id}/>
-                </div>
+    }, [operators, supplier, renderer]);
+
+    return (
+        <div className="row operator-statistic">
+            <div className="col-2 italic-uppercase operator-statistic-title">
+                {name}
             </div>
-        );
-    }
+            <div className="col-10">
+                <span className="bar-chart" id={`operator-statics-${id}`} />
+            </div>
+        </div>
+    );
 }
 
-class OperatorDetail extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            selectedStatistics: this.getInitialStatistics()
-        };
-    }
-
-    getInitialStatistics() {
-        return [
-            {
-                name: "Total Wall Time",
-                id: "totalWallTime",
-                supplier: getTotalWallTime,
-                renderer: formatDuration
-            },
-            {
-                name: "Input Rows",
-                id: "inputPositions",
-                supplier: operator => operator.inputPositions,
-                renderer: formatCount
-            },
-            {
-                name: "Input Data Size",
-                id: "inputDataSize",
-                supplier: operator => parseDataSize(operator.inputDataSize),
-                renderer: formatDataSize
-            },
-            {
-                name: "Output Rows",
-                id: "outputPositions",
-                supplier: operator => operator.outputPositions,
-                renderer: formatCount
-            },
-            {
-                name: "Output Data Size",
-                id: "outputDataSize",
-                supplier: operator => parseDataSize(operator.outputDataSize),
-                renderer: formatDataSize
-            },
-        ];
-    }
-
-    getOperatorTasks() {
+function OperatorDetail({ index, operator, tasks }) {
+    const selectedStatistics = [
+        {
+            name: "Total Wall Time",
+            id: "totalWallTime",
+            supplier: getTotalWallTime,
+            renderer: formatDuration
+        },
+        {
+            name: "Input Rows",
+            id: "inputPositions",
+            supplier: operator => operator.inputPositions,
+            renderer: formatCount
+        },
+        {
+            name: "Input Data Size",
+            id: "inputDataSize",
+            supplier: operator => parseDataSize(operator.inputDataSize),
+            renderer: formatDataSize
+        },
+        {
+            name: "Output Rows",
+            id: "outputPositions",
+            supplier: operator => operator.outputPositions,
+            renderer: formatCount
+        },
+        {
+            name: "Output Data Size",
+            id: "outputDataSize",
+            supplier: operator => parseDataSize(operator.outputDataSize),
+            renderer: formatDataSize
+        },
+    ];
+
+    const getOperatorTasks = () => {
         // sort the x-axis
-        const tasks = this.props.tasks.sort(function (taskA, taskB) {
+        const tasksSorted = tasks.sort(function (taskA, taskB) {
             return getTaskNumber(taskA.taskId) - getTaskNumber(taskB.taskId);
         });
 
-        const operatorSummary = this.props.operator;
-
         const operatorTasks = [];
-        tasks.forEach(task => {
+        tasksSorted.forEach(task => {
             task.stats.pipelines.forEach(pipeline => {
-                if (pipeline.pipelineId === operatorSummary.pipelineId) {
+                if (pipeline.pipelineId === operator.pipelineId) {
                     pipeline.operatorSummaries.forEach(operator => {
-                        if (operatorSummary.operatorId === operator.operatorId) {
+                        if (operator.operatorId === operator.operatorId) {
                             operatorTasks.push(operator);
                         }
                     });
@@ -212,28 +202,27 @@ class OperatorDetail extends React.Component {
         return operatorTasks;
     }
 
-    render() {
-        const operator = this.props.operator;
-        const operatorTasks = this.getOperatorTasks();
-        const totalWallTime = getTotalWallTime(operator);
+    const operatorTasks = getOperatorTasks();
+    const totalWallTime = getTotalWallTime(operator);
 
-        const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
-        const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
+    const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
+    const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
 
-        const rowOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputPositions) / totalWallTime;
-        const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.outputDataSize)) / (totalWallTime / 1000.0);
+    const rowOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputPositions) / totalWallTime;
+    const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.outputDataSize)) / (totalWallTime / 1000.0);
 
-        return (
-            <div className="row">
+    return (
+        <div className="col-12 container mx-2">
+            <div className="modal-header">
+                <h3 className="modal-title fs-5">
+                    <small>Pipeline {operator.pipelineId}</small>
+                    <br />
+                    {operator.operatorType}
+                </h3>
+                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div className="row modal-body">
                 <div className="col-12">
-                    <div className="modal-header">
-                        <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                        <h3>
-                            <small>Pipeline {operator.pipelineId}</small>
-                            <br/>
-                            {operator.operatorType}
-                        </h3>
-                    </div>
                     <div className="row">
                         <div className="col-6">
                             <table className="table">
@@ -325,7 +314,7 @@ class OperatorDetail extends React.Component {
                         </div>
                     </div>
                     {
-                        this.state.selectedStatistics.map(function (statistic) {
+                        selectedStatistics.map(function (statistic) {
                             return (
                                 <OperatorStatistic
                                     key={statistic.id}
@@ -335,14 +324,14 @@ class OperatorDetail extends React.Component {
                                     renderer={statistic.renderer}
                                     operators={operatorTasks}/>
                             );
-                        }.bind(this))
+                        })
                     }
                     <p/>
                     <p/>
                 </div>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 class StageOperatorGraph extends React.Component {
@@ -354,28 +343,27 @@ class StageOperatorGraph extends React.Component {
         this.updateD3Graph();
     }
 
-    handleOperatorClick(operatorCssId) {
-        if(operatorCssId.target.hasOwnProperty("__data__") && operatorCssId.target.__data__ !== undefined){
-        $('#operator-detail-modal').modal("show")
+    handleOperatorClick(event) {
+        if (event.target.hasOwnProperty("__data__") && event.target.__data__ !== undefined) {
+            $('#operator-detail-modal').modal("show")
 
-        const pipelineId = (operatorCssId?.target?.__data__ || "").split('-').length > 0 ? parseInt((operatorCssId?.target?.__data__ || '').split('-')[1] || '0') : 0;
-        const operatorId =(operatorCssId?.target?.__data__ || "").split('-').length > 0 ? parseInt((operatorCssId?.target?.__data__ || '').split('-')[2] || '0') : 0;
-       
-        const stage = this.props.stage;
+            const pipelineId = (event?.target?.__data__ || "").split('-').length > 0 ? parseInt((event?.target?.__data__ || '').split('-')[1] || '0') : 0;
+            const operatorId = (event?.target?.__data__ || "").split('-').length > 0 ? parseInt((event?.target?.__data__ || '').split('-')[2] || '0') : 0;
+            const stage = this.props.stage;
 
-        let operatorStageSummary = null;
-        const operatorSummaries = stage.latestAttemptExecutionInfo.stats.operatorSummaries;
-        for (let i = 0; i < operatorSummaries.length; i++) {
-            if (operatorSummaries[i].pipelineId === pipelineId && operatorSummaries[i].operatorId === operatorId) {
-                operatorStageSummary = operatorSummaries[i];
+            let operatorStageSummary = null;
+            const operatorSummaries = stage.latestAttemptExecutionInfo.stats.operatorSummaries;
+            for (let i = 0; i < operatorSummaries.length; i++) {
+                if (operatorSummaries[i].pipelineId === pipelineId && operatorSummaries[i].operatorId === operatorId) {
+                    operatorStageSummary = operatorSummaries[i];
+                }
             }
+            const container = document.getElementById('operator-detail');
+            const root = createRoot(container);
+            root.render(<OperatorDetail key={event} operator={operatorStageSummary} tasks={stage.latestAttemptExecutionInfo.tasks} />);
+        } else {
+            return;
         }
-        const container = document.getElementById('operator-detail');
-        const root = createRoot(container);
-        root.render(<OperatorDetail key={operatorCssId} operator={operatorStageSummary} tasks={stage.latestAttemptExecutionInfo.tasks}/>);
-    }else {
-        return;
-    }
     }
 
     computeOperatorGraphs() {
@@ -623,19 +611,28 @@ export class StageDetail extends React.Component {
                 <QueryHeader query={query}/>
                 <div className="row">
                     <div className="col-12">
-                        <div className="row">
-                            <div className="col-2">
+                        <div className="row justify-content-between">
+                            <div className="col-2 align-self-end">
                                 <h3>Stage {stage.plan.id}</h3>
                             </div>
-                            <div className="col-8"/>
-                            <div className="col-2 stage-dropdown">
-                                <div className="input-group-btn">
-                                    <button type="button" className="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                        Select Stage <span className="caret"/>
-                                    </button>
-                                    <ul className="dropdown-menu">
-                                        {allStages.map(stageId => (<li key={stageId}><a onClick={() => this.setState({selectedStageId: stageId})}>{stageId}</a></li>))}
-                                    </ul>
+                            <div className="col-2 align-self-end">
+                                <div className="stage-dropdown" role="group">
+                                    <div className="btn-group">
+                                        <button type="button" className="btn btn-secondary dropdown-toggle"
+                                            data-bs-toggle="dropdown" aria-haspopup="true"
+                                            aria-expanded="false">Select Stage<span className="caret"/>
+                                        </button>
+                                        <ul className="dropdown-menu">
+                                            {
+                                                allStages.map(stageId => (
+                                                    <li key={stageId}>
+                                                        <a className={clsx('dropdown-item', stage.plan.id === stageId && 'active')}
+                                                            onClick={() => this.setState({selectedStageId: stageId})}>{stageId}</a>
+                                                    </li>
+                                                ))
+                                            }
+                                        </ul>
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/presto-ui/src/components/StaticQueryHeader.jsx b/presto-ui/src/components/StaticQueryHeader.jsx
index 3349fad071081..84d16ac206500 100644
--- a/presto-ui/src/components/StaticQueryHeader.jsx
+++ b/presto-ui/src/components/StaticQueryHeader.jsx
@@ -13,6 +13,7 @@
  */
 
 import React from 'react';
+import { clsx } from 'clsx';
 
 import {
     getHumanReadableState,
@@ -26,18 +27,10 @@ function QueryHeaderTabs({ tabs, current, clickHandler }) {
     return (
         <>
             {tabs.map((tab, index) => (
-                <td key={index}>
-                    {tab.name === current.name ? (
-                        <span className='btn btn-info navbar-btn nav-disabled'>{tab.label}</span>
-                    ) : (
-                        <a
-                            href='#'
-                            onClick={() => clickHandler(tab)}
-                            className={'btn btn-info navbar-btn'}
-                        > {tab.label}</a>
-                    )}
+                <>
+                    <a className={clsx('nav-link', 'navbar-btn', tab.name === current.name && 'active')} href="#" onClick={() => clickHandler(tab)}>{tab.label}</a>
                     &nbsp;
-                </td>
+                </>
             ))}
         </>
     );
@@ -123,19 +116,15 @@ export default function StaticQueryHeader({ query, tabs, switchTab, tabIndex = 0
                 <div className="col-6">
                     <h3 className="query-id">
                         <span id="query-id">{query.queryId}</span>
-                        <a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-placement="right" title="Copy to clipboard">
+                        <a className="btn copy-button" data-clipboard-target="#query-id" data-bs-toggle="tooltip" data-bs-placement="right" title="Copy to clipboard">
                             <span className="bi bi-copy" aria-hidden="true" alt="Copy to clipboard" />
                         </a>
                     </h3>
                 </div>
                 <div className="col-6">
-                    <table className="header-inline-links">
-                        <tbody>
-                            <tr>
-                                <QueryHeaderTabs tabs={tabs} current={state.tab} clickHandler={clickHandler} />
-                            </tr>
-                        </tbody>
-                    </table>
+                    <nav className="nav nav-tabs">
+                        <QueryHeaderTabs tabs={tabs} current={state.tab} clickHandler={clickHandler} />
+                    </nav>
                 </div>
             </div>
             <hr className="h2-hr" />
diff --git a/presto-ui/src/components/WorkerStatus.jsx b/presto-ui/src/components/WorkerStatus.jsx
index ee49a8033c48a..adf7ee97ce1c6 100644
--- a/presto-ui/src/components/WorkerStatus.jsx
+++ b/presto-ui/src/components/WorkerStatus.jsx
@@ -92,7 +92,7 @@ export class WorkerStatus extends React.Component {
         $('#heap-percent-used-sparkline').sparkline(this.state.heapPercentUsed, $.extend({}, SMALL_SPARKLINE_PROPERTIES, {chartRangeMin: 0, numberFormatter: precisionRound}));
         $('#nonheap-used-sparkline').sparkline(this.state.nonHeapUsed, $.extend({}, SMALL_SPARKLINE_PROPERTIES, {chartRangeMin: 0, numberFormatter: formatDataSize}));
 
-        $('[data-bs-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="tooltip"]')?.tooltip();
         new Clipboard('.copy-button');
     }
 
diff --git a/presto-ui/src/d3utils.js b/presto-ui/src/d3utils.js
index 7cba2d33e65f5..de543c45aab85 100644
--- a/presto-ui/src/d3utils.js
+++ b/presto-ui/src/d3utils.js
@@ -12,7 +12,7 @@
  * limitations under the License.
  */
 
-import * as dagreD3 from "dagre-d3";
+import * as dagreD3 from "dagre-d3-es";
 import * as d3 from "d3";
 
 // DagreD3 Graph-related functions
diff --git a/presto-ui/src/static/assets/presto.css b/presto-ui/src/static/assets/presto.css
index a15e83c147362..d5921926c7c50 100644
--- a/presto-ui/src/static/assets/presto.css
+++ b/presto-ui/src/static/assets/presto.css
@@ -107,6 +107,7 @@ pre {
 }
 
 .navbar-btn {
+    padding: 6px 12px !important;
     border-bottom: none;
     margin: 0;
     color: #ffffff !important;
@@ -450,7 +451,7 @@ pre {
 }
 
 .query-snippet {
-    height: 138px;
+    height: 162px;
     overflow: hidden;
     font-size: 13px;
 }
@@ -490,7 +491,7 @@ pre {
 }
 
 .query-header-queryid {
-    margin-left: -15px;
+    margin-left: -12px;
     margin-right: -35px;
     padding: 8px 0 8px 0;
 }
@@ -498,10 +499,12 @@ pre {
 .query-header-timestamp {
     text-align: right;
     color: #b1b1b1;
+    margin-left: -12px;
+    margin-right: -35px;
 }
 
 .query-progress-container {
-    padding: 0;
+    padding: 2px 0px 2px 0px;
 }
 .text-btn-default{
     color: rgb(51,51,51);
@@ -513,14 +516,13 @@ pre {
 /** ================== **/
 
 .toolbar-row {
-    padding-right: 15px;
+    padding-right: 12px;
 }
 
 .toolbar-col {
     background-color: #454a58;
     margin-top: -5px;
     padding: 5px;
-    max-width: 1176px;
 }
 
 .toolbar-row .form-control {
diff --git a/presto-ui/src/static/dev/index.html b/presto-ui/src/static/dev/index.html
index 9151f7458c8be..039bb2040d24a 100644
--- a/presto-ui/src/static/dev/index.html
+++ b/presto-ui/src/static/dev/index.html
@@ -8,6 +8,8 @@
     <title>Plan Viewer - Presto</title>
 
     <link rel="icon" href="../assets/favicon.ico">
+    <!-- Link for btn checkmark-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     <!-- Bootstrap core -->
     <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
@@ -19,10 +21,10 @@
     <![endif]-->
 
     <!-- jQuery -->
-    <script type="text/javascript" src="../vendor/jquery/jquery-2.2.3.min.js"></script>
+    <script type="text/javascript" src="../vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="../vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
@@ -102,12 +104,12 @@
     </style>
 </head>
 
-<body>
+<body data-bs-theme="dark">
 
 <div class="container">
     <div id="title"></div>
 
-    <div id="query-view-container" style="margin-top: -20px">
+    <div id="query-view-container">
     </div>
 </div> <!-- /container -->
 
diff --git a/presto-ui/src/static/embedded_plan.html b/presto-ui/src/static/embedded_plan.html
index 9f67784b0d533..73e405560acc2 100644
--- a/presto-ui/src/static/embedded_plan.html
+++ b/presto-ui/src/static/embedded_plan.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Link for icons checkmark-->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
diff --git a/presto-ui/src/static/index.html b/presto-ui/src/static/index.html
index 119f53b479b12..5bc0d571ecd1d 100644
--- a/presto-ui/src/static/index.html
+++ b/presto-ui/src/static/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -24,9 +24,8 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
-
     <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
 
 
diff --git a/presto-ui/src/static/plan.html b/presto-ui/src/static/plan.html
index 1f1551bb86be3..855fe69cf2c6e 100644
--- a/presto-ui/src/static/plan.html
+++ b/presto-ui/src/static/plan.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Link for icons checkmark-->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
@@ -46,7 +46,7 @@
 <div class="container">
     <div id="title"></div>
 
-    <div id="live-plan-container" style="margin-top: -20px">
+    <div id="live-plan-container">
         <div class="loader">Loading...</div>
     </div>
 </div> <!-- /container -->
@@ -56,9 +56,5 @@
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
 
-<!-- Bootstrap JS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 
-
-
 </body>
 </html>
diff --git a/presto-ui/src/static/query.html b/presto-ui/src/static/query.html
index 5a7f5ef53f8db..3c0b5c6b91a73 100644
--- a/presto-ui/src/static/query.html
+++ b/presto-ui/src/static/query.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- Link for icons checkmark-->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
@@ -58,8 +58,5 @@
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
 
-<!-- Bootstrap JS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 
-
 </body>
 </html>
diff --git a/presto-ui/src/static/res_groups.html b/presto-ui/src/static/res_groups.html
index faccd70d12979..217c005662206 100644
--- a/presto-ui/src/static/res_groups.html
+++ b/presto-ui/src/static/res_groups.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Link for icons checkmark-->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
@@ -54,9 +54,5 @@
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
 
-<!-- Bootstrap JS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 
-
-
 </body>
 </html>
diff --git a/presto-ui/src/static/sql_client.html b/presto-ui/src/static/sql_client.html
index 8621192786150..90554f56ac095 100644
--- a/presto-ui/src/static/sql_client.html
+++ b/presto-ui/src/static/sql_client.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Link for icons checkmark-->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- CSS loader -->
     <link href="vendor/css-loaders/loader.css" rel="stylesheet">
@@ -51,9 +51,5 @@
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
 
-<!-- Bootstrap JS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 
-
-
 </body>
 </html>
diff --git a/presto-ui/src/static/stage.html b/presto-ui/src/static/stage.html
index 536ba95ea0a52..b8c624baa33d7 100644
--- a/presto-ui/src/static/stage.html
+++ b/presto-ui/src/static/stage.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Link for icons checkmark-->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
@@ -52,12 +52,9 @@
     <div class="graph-container">
         <svg id="operator-canvas"></svg>
     </div>
-
-    <div id="operator-detail-modal" class="modal" tabindex="-1" role="dialog">
+    <div id="operator-detail-modal" class="modal fade" tabIndex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-lg" role="document">
-            <div class="modal-content">
-                <div id="operator-detail" class="container"></div>
-            </div>
+            <div id="operator-detail" class="row modal-content"></div>
         </div>
     </div>
 </div> <!-- /container -->
@@ -67,9 +64,5 @@
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
 
-<!-- Bootstrap JS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 
-
-
 </body>
 </html>
diff --git a/presto-ui/src/static/timeline.html b/presto-ui/src/static/timeline.html
index 82e5516cf3b1b..c8f75ecdd4f9b 100644
--- a/presto-ui/src/static/timeline.html
+++ b/presto-ui/src/static/timeline.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Link for icons checkmark-->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
@@ -115,9 +115,5 @@
 
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
-
-<!-- Bootstrap JS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 
-
 </body>
 </html>
diff --git a/presto-ui/src/static/worker.html b/presto-ui/src/static/worker.html
index da35e501cb232..a92e49a09e592 100644
--- a/presto-ui/src/static/worker.html
+++ b/presto-ui/src/static/worker.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="assets/favicon.ico">
 
     <!-- Bootstrap core -->
-    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Link for icons checkmark-->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="vendor/jquery/jquery-3.7.1.min.js"></script>
 
     <!-- Bootstrap JS -->
-    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Sparkline -->
     <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>
@@ -58,9 +58,5 @@
 <!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
 
-<!-- Bootstrap JS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 
-
-
 </body>
 </html>
diff --git a/presto-ui/src/templates/query_viewer.html b/presto-ui/src/templates/query_viewer.html
index 5e7dd2833f638..7055b19762cf6 100644
--- a/presto-ui/src/templates/query_viewer.html
+++ b/presto-ui/src/templates/query_viewer.html
@@ -14,13 +14,12 @@
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
-
+    <!-- Bootstrap CSS-->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <!-- Link for btn checkmark-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <!-- jQuery -->
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
-
-    <!-- Bootstrap JS -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <!-- Sparkline -->
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
 
@@ -28,6 +27,11 @@
     <!-- vis-timeline -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.7.2/vis-timeline-graph2d.min.js"></script>
 
+    <!-- highlight.js -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/solarized-dark.min.css" integrity="sha512-BiC3DH0qMCjCYqPNGAthQ95QCndm60uhfQVwhqZ2eG1zuGkP+3T1cw6PzEC4CiRfRIbd2qvyN39RoDfil/XcMA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js" integrity="sha512-NZNzUGlVEXmvVLjUJ7oEDRRmSv1JJwx7bEbi/6tG57xgvEjrO7JYBZCzxUZTF2JRxspUHTSauuC/zR5Yf49YEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/languages/sql.min.js" integrity="sha512-VrCh1D+nBtkZ3950bTV7PQ9i/Os614Zzr0SFmXLokenBXAUggp+KT6BYOwoKqAIADVpDipT5WJN/5AIo/Loi9A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <style type="text/css">
         .vis-timeline .item {
             padding: 0px;
@@ -90,17 +94,19 @@
     </style>
 </head>
 
-<body>
+<body data-bs-theme="dark">
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
-<div class="container">
-    <div id="title"></div>
+    <div class="container">
+        <div id="title"></div>
 
-    <div id="query-view-container" style="margin-top: -20px">
-    </div>
-</div> <!-- /container -->
+        <div id="query-view-container">
+        </div>
+    </div> <!-- /container -->
 
-<!-- Fonts -->
-<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
 
 </body>
 </html>
diff --git a/presto-ui/src/webpack.config.js b/presto-ui/src/webpack.config.js
index 2821740c12249..bf89c2e4a0576 100644
--- a/presto-ui/src/webpack.config.js
+++ b/presto-ui/src/webpack.config.js
@@ -16,14 +16,13 @@ module.exports = (env) => {
             'index': './index.jsx',
             'query': './query.jsx',
             'plan': './plan.jsx',
-            'query_viewer': {import: './query_viewer.jsx', filename: path.join(outputDir, 'dev', '[name].js')},
+            'query_viewer': {import: './query_viewer.jsx', filename: path.join('dev', '[name].js')},
             'embedded_plan': './embedded_plan.jsx',
             'stage': './stage.jsx',
             'worker': './worker.jsx',
             'timeline': './timeline.jsx',
             'res_groups': './res_groups.jsx',
             'sql_client': './sql_client.jsx',
-            'bootstrap_css': path.join(__dirname, 'static', 'vendor', 'bootstrap', 'css', 'bootstrap.min.external-fonts.css'),
             'css_loader': path.join(__dirname, 'static', 'vendor', 'css-loaders', 'loader.css'),
             'css_presto': path.join(__dirname, 'static', 'assets', 'presto.css'),
         },
@@ -43,7 +42,6 @@ module.exports = (env) => {
                         template: 'templates/query_viewer.html',
                         chunks: [
                             'query_viewer',
-                            'bootstrap_css',
                             'css_loader',
                             'css_presto',
                         ]
@@ -124,10 +122,10 @@ module.exports = (env) => {
             },
             proxy: [
                 {
-               context: ['/v1'],
-               target: `http://${apiHost}:${apiPort}`,
-               secure: false, // when using http
-               changeOrigin: true, // Modify the Origin header to match the target
+                    context: ['/v1'],
+                    target: `http://${apiHost}:${apiPort}`,
+                    // secure: false, // when using http
+                    // changeOrigin: true, // Modify the Origin header to match the target
                 },
             ],
         },
diff --git a/presto-ui/src/yarn.lock b/presto-ui/src/yarn.lock
index e85aad178780a..7d6a4017108e8 100644
--- a/presto-ui/src/yarn.lock
+++ b/presto-ui/src/yarn.lock
@@ -10,7 +10,7 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0":
+"@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.2":
   version "7.26.2"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
   integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
@@ -19,39 +19,39 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.9", "@babel/compat-data@^7.26.0":
-  version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e"
-  integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.5.tgz#df93ac37f4417854130e21d72c66ff3d4b897fc7"
+  integrity sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==
 
 "@babel/core@^7.24.5":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
-  integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.7.tgz#0439347a183b97534d52811144d763a17f9d2b24"
+  integrity sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.26.0"
-    "@babel/generator" "^7.26.0"
-    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.5"
+    "@babel/helper-compilation-targets" "^7.26.5"
     "@babel/helper-module-transforms" "^7.26.0"
-    "@babel/helpers" "^7.26.0"
-    "@babel/parser" "^7.26.0"
+    "@babel/helpers" "^7.26.7"
+    "@babel/parser" "^7.26.7"
     "@babel/template" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
-    "@babel/types" "^7.26.0"
+    "@babel/traverse" "^7.26.7"
+    "@babel/types" "^7.26.7"
     convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
-  version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
-  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
+"@babel/generator@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.5.tgz#e44d4ab3176bbcaf78a5725da5f1dc28802a9458"
+  integrity sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==
   dependencies:
-    "@babel/parser" "^7.26.2"
-    "@babel/types" "^7.26.0"
+    "@babel/parser" "^7.26.5"
+    "@babel/types" "^7.26.5"
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^3.0.2"
@@ -63,20 +63,12 @@
   dependencies:
     "@babel/types" "^7.25.9"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz#f41752fe772a578e67286e6779a68a5a92de1ee9"
-  integrity sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==
-  dependencies:
-    "@babel/traverse" "^7.25.9"
-    "@babel/types" "^7.25.9"
-
-"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875"
-  integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9", "@babel/helper-compilation-targets@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8"
+  integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==
   dependencies:
-    "@babel/compat-data" "^7.25.9"
+    "@babel/compat-data" "^7.26.5"
     "@babel/helper-validator-option" "^7.25.9"
     browserslist "^4.24.0"
     lru-cache "^5.1.1"
@@ -96,12 +88,12 @@
     semver "^6.3.1"
 
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz#3e8999db94728ad2b2458d7a470e7770b7764e26"
-  integrity sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
+  integrity sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.25.9"
-    regexpu-core "^6.1.1"
+    regexpu-core "^6.2.0"
     semver "^6.3.1"
 
 "@babel/helper-define-polyfill-provider@^0.6.2", "@babel/helper-define-polyfill-provider@^0.6.3":
@@ -147,10 +139,10 @@
   dependencies:
     "@babel/types" "^7.25.9"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46"
-  integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
 
 "@babel/helper-remap-async-to-generator@^7.25.9":
   version "7.25.9"
@@ -162,21 +154,13 @@
     "@babel/traverse" "^7.25.9"
 
 "@babel/helper-replace-supers@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz#ba447224798c3da3f8713fc272b145e33da6a5c5"
-  integrity sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
   dependencies:
     "@babel/helper-member-expression-to-functions" "^7.25.9"
     "@babel/helper-optimise-call-expression" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
-
-"@babel/helper-simple-access@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz#6d51783299884a2c74618d6ef0f86820ec2e7739"
-  integrity sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==
-  dependencies:
-    "@babel/traverse" "^7.25.9"
-    "@babel/types" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
 
 "@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
   version "7.25.9"
@@ -210,20 +194,20 @@
     "@babel/traverse" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/helpers@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
-  integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
+"@babel/helpers@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.7.tgz#fd1d2a7c431b6e39290277aacfd8367857c576a4"
+  integrity sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==
   dependencies:
     "@babel/template" "^7.25.9"
-    "@babel/types" "^7.26.0"
+    "@babel/types" "^7.26.7"
 
-"@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2":
-  version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
-  integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
+"@babel/parser@^7.25.9", "@babel/parser@^7.26.5", "@babel/parser@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.7.tgz#e114cd099e5f7d17b05368678da0fb9f69b3385c"
+  integrity sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==
   dependencies:
-    "@babel/types" "^7.26.0"
+    "@babel/types" "^7.26.7"
 
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
   version "7.25.9"
@@ -269,7 +253,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
   integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
-"@babel/plugin-syntax-flow@^7.25.9":
+"@babel/plugin-syntax-flow@^7.26.0":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.26.0.tgz#96507595c21b45fccfc2bc758d5c45452e6164fa"
   integrity sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==
@@ -330,12 +314,12 @@
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/helper-remap-async-to-generator" "^7.25.9"
 
-"@babel/plugin-transform-block-scoped-functions@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz#5700691dbd7abb93de300ca7be94203764fce458"
-  integrity sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==
+"@babel/plugin-transform-block-scoped-functions@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.26.5.tgz#3dc4405d31ad1cbe45293aa57205a6e3b009d53e"
+  integrity sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
 "@babel/plugin-transform-block-scoping@^7.25.9":
   version "7.25.9"
@@ -417,12 +401,11 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-exponentiation-operator@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz#ece47b70d236c1d99c263a1e22b62dc20a4c8b0f"
-  integrity sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==
+"@babel/plugin-transform-exponentiation-operator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
+  integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-export-namespace-from@^7.25.9":
@@ -433,12 +416,12 @@
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-flow-strip-types@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.25.9.tgz#85879b42a8f5948fd6317069978e98f23ef8aec1"
-  integrity sha512-/VVukELzPDdci7UUsWQaSkhgnjIWXnIyRpM02ldxaVoFK96c41So8JcKT3m0gYjyv7j5FNPGS5vfELrWalkbDA==
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.26.5.tgz#2904c85a814e7abb1f4850b8baf4f07d0a2389d4"
+  integrity sha512-eGK26RsbIkYUns3Y8qKl362juDDYK+wEdPGHGrhzUl6CewZFo55VZ7hg+CyMFU4dd5QQakBN86nBMpRsFpRvbQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
-    "@babel/plugin-syntax-flow" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/plugin-syntax-flow" "^7.26.0"
 
 "@babel/plugin-transform-for-of@^7.25.9":
   version "7.25.9"
@@ -493,14 +476,13 @@
     "@babel/helper-module-transforms" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-commonjs@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz#d165c8c569a080baf5467bda88df6425fc060686"
-  integrity sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==
+"@babel/plugin-transform-modules-commonjs@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+  integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-module-transforms" "^7.26.0"
     "@babel/helper-plugin-utils" "^7.25.9"
-    "@babel/helper-simple-access" "^7.25.9"
 
 "@babel/plugin-transform-modules-systemjs@^7.25.9":
   version "7.25.9"
@@ -535,12 +517,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz#bcb1b0d9e948168102d5f7104375ca21c3266949"
-  integrity sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.26.6":
+  version "7.26.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz#fbf6b3c92cb509e7b319ee46e3da89c5bedd31fe"
+  integrity sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
 "@babel/plugin-transform-numeric-separator@^7.25.9":
   version "7.25.9"
@@ -697,12 +679,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-typeof-symbol@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz#224ba48a92869ddbf81f9b4a5f1204bbf5a2bc4b"
-  integrity sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==
+"@babel/plugin-transform-typeof-symbol@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.26.7.tgz#d0e33acd9223744c1e857dbd6fa17bd0a3786937"
+  integrity sha512-jfoTXXZTgGg36BmhqT3cAYK5qkmqvJpvNrPhaK/52Vgjhw4Rq29s9UqpWWV0D6yuRmgiFH/BUVlkl96zJWqnaw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
 "@babel/plugin-transform-unicode-escapes@^7.25.9":
   version "7.25.9"
@@ -736,13 +718,13 @@
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/preset-env@^7.24.5":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.0.tgz#30e5c6bc1bcc54865bff0c5a30f6d4ccdc7fa8b1"
-  integrity sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.7.tgz#24d38e211f4570b8d806337035cc3ae798e0c36d"
+  integrity sha512-Ycg2tnXwixaXOVb29rana8HNPgLVBof8qqtNQ9LE22IoyZboQbGSxI6ZySMdW3K5nAe6gu35IaJefUJflhUFTQ==
   dependencies:
-    "@babel/compat-data" "^7.26.0"
-    "@babel/helper-compilation-targets" "^7.25.9"
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/compat-data" "^7.26.5"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-plugin-utils" "^7.26.5"
     "@babel/helper-validator-option" "^7.25.9"
     "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
     "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
@@ -756,7 +738,7 @@
     "@babel/plugin-transform-arrow-functions" "^7.25.9"
     "@babel/plugin-transform-async-generator-functions" "^7.25.9"
     "@babel/plugin-transform-async-to-generator" "^7.25.9"
-    "@babel/plugin-transform-block-scoped-functions" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.26.5"
     "@babel/plugin-transform-block-scoping" "^7.25.9"
     "@babel/plugin-transform-class-properties" "^7.25.9"
     "@babel/plugin-transform-class-static-block" "^7.26.0"
@@ -767,7 +749,7 @@
     "@babel/plugin-transform-duplicate-keys" "^7.25.9"
     "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
     "@babel/plugin-transform-dynamic-import" "^7.25.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.26.3"
     "@babel/plugin-transform-export-namespace-from" "^7.25.9"
     "@babel/plugin-transform-for-of" "^7.25.9"
     "@babel/plugin-transform-function-name" "^7.25.9"
@@ -776,12 +758,12 @@
     "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
     "@babel/plugin-transform-member-expression-literals" "^7.25.9"
     "@babel/plugin-transform-modules-amd" "^7.25.9"
-    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.26.3"
     "@babel/plugin-transform-modules-systemjs" "^7.25.9"
     "@babel/plugin-transform-modules-umd" "^7.25.9"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
     "@babel/plugin-transform-new-target" "^7.25.9"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.26.6"
     "@babel/plugin-transform-numeric-separator" "^7.25.9"
     "@babel/plugin-transform-object-rest-spread" "^7.25.9"
     "@babel/plugin-transform-object-super" "^7.25.9"
@@ -798,7 +780,7 @@
     "@babel/plugin-transform-spread" "^7.25.9"
     "@babel/plugin-transform-sticky-regex" "^7.25.9"
     "@babel/plugin-transform-template-literals" "^7.25.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.25.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.26.7"
     "@babel/plugin-transform-unicode-escapes" "^7.25.9"
     "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
     "@babel/plugin-transform-unicode-regex" "^7.25.9"
@@ -829,9 +811,9 @@
     esutils "^2.0.2"
 
 "@babel/preset-react@^7.24.1":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.25.9.tgz#5f473035dc2094bcfdbc7392d0766bd42dce173e"
-  integrity sha512-D3to0uSPiWE7rBrdIICCd0tJSIGpLaaGptna2+w7Pft5xMqLpA1sz99DK5TZ1TjGbdQ/VI1eCSZ06dv3lT4JOw==
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.26.3.tgz#7c5e028d623b4683c1f83a0bd4713b9100560caa"
+  integrity sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/helper-validator-option" "^7.25.9"
@@ -841,9 +823,9 @@
     "@babel/plugin-transform-react-pure-annotations" "^7.25.9"
 
 "@babel/runtime@^7.8.4":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
-  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -856,23 +838,23 @@
     "@babel/parser" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/traverse@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
-  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
+"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.7.tgz#99a0a136f6a75e7fb8b0a1ace421e0b25994b8bb"
+  integrity sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==
   dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/generator" "^7.25.9"
-    "@babel/parser" "^7.25.9"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.5"
+    "@babel/parser" "^7.26.7"
     "@babel/template" "^7.25.9"
-    "@babel/types" "^7.25.9"
+    "@babel/types" "^7.26.7"
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.4.4":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
-  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
+"@babel/types@^7.25.9", "@babel/types@^7.26.5", "@babel/types@^7.26.7", "@babel/types@^7.4.4":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.7.tgz#5e2b89c0768e874d4d061961f3a5a153d71dc17a"
+  integrity sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==
   dependencies:
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
@@ -900,9 +882,9 @@
   integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
 "@jridgewell/gen-mapping@^0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
-  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
   dependencies:
     "@jridgewell/set-array" "^1.2.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -931,7 +913,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
-"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
   version "0.3.25"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -945,9 +927,9 @@
   integrity sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==
 
 "@jsonjoy.com/json-pack@^1.0.3":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz#33ca57ee29d12feef540f2139225597469dec894"
-  integrity sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@jsonjoy.com/json-pack/-/json-pack-1.1.1.tgz#1f2db19ab1fd3304ccac259a1ef1dc6aff6df0ba"
+  integrity sha512-osjeBqMJ2lb/j/M8NCPjs1ylqWIcTRTycIhVB5pt6LgzgeRSb0YRZ7j9RfA8wIUrsr/medIuhVyonXRZWLyfdw==
   dependencies:
     "@jsonjoy.com/base64" "^1.1.1"
     "@jsonjoy.com/util" "^1.1.2"
@@ -985,10 +967,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@prestodb/presto-js-client@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@prestodb/presto-js-client/-/presto-js-client-1.0.0.tgz#fa458866581a6ec4e0b9be7f8ab5bae3097f8c8a"
-  integrity sha512-B8d0Wl8XMrtqotRTTM45GVk6bV7GER1Pbt4vUb2Ex5dUP1/WkqKMuD0LMWoO9zaiSS70DtBpvwu372BS1GjNgQ==
+"@prestodb/presto-js-client@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@prestodb/presto-js-client/-/presto-js-client-1.0.1.tgz#978c9c22c17677f3157df80383efb23412d4aa70"
+  integrity sha512-6NHcpSi9EQZKgfYgOUYgyTuC4PAjs+23o9ANym5wZ/Omu8m586OplRVmels0MrzPC5LdHA94FWkscuunaEvcDg==
 
 "@sindresorhus/merge-streams@^2.1.0":
   version "2.3.0"
@@ -1047,9 +1029,9 @@
   integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
 
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^5.0.0":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz#812d2871e5eea17fb0bd5214dda7a7b748c0e12a"
-  integrity sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz#41fec4ea20e9c7b22f024ab88a95c6bb288f51b8"
+  integrity sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -1121,16 +1103,16 @@
     "@types/node" "*"
 
 "@types/node@*":
-  version "22.10.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.0.tgz#89bfc9e82496b9c7edea3382583fa94f75896e81"
-  integrity sha512-XC70cRZVElFHfIUB40FgZOBbgJYFKKMa5nb9lxcwYstFG/Mi+/Y0bGS+rs6Dmhmkpq4pnNiLiuZAbc02YCOnmA==
+  version "22.13.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.13.0.tgz#d376dd9a0ee2f9382d86c2d5d7beb4d198b4ea8c"
+  integrity sha512-ClIbNe36lawluuvq3+YYhnIN2CELi+6q8NpnM7PYp4hBn/TatfboPgVSm2rwKRfnV2M+Ty9GWDFI64KEe+kysA==
   dependencies:
     undici-types "~6.20.0"
 
 "@types/qs@*":
-  version "6.9.17"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.17.tgz#fc560f60946d0aeff2f914eb41679659d3310e1a"
-  integrity sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==
+  version "6.9.18"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.18.tgz#877292caa91f7c1b213032b34626505b746624c2"
+  integrity sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==
 
 "@types/range-parser@*":
   version "1.2.7"
@@ -1179,13 +1161,13 @@
   integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
 
 "@types/ws@^8.5.10":
-  version "8.5.13"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.13.tgz#6414c280875e2691d0d1e080b05addbf5cb91e20"
-  integrity sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==
+  version "8.5.14"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.14.tgz#93d44b268c9127d96026cf44353725dd9b6c3c21"
+  integrity sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==
   dependencies:
     "@types/node" "*"
 
-"@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.12.1":
+"@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.14.1.tgz#a9f6a07f2b03c95c8d38c4536a1fdfb521ff55b6"
   integrity sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==
@@ -1251,7 +1233,7 @@
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.13.2.tgz#917a20e93f71ad5602966c2d685ae0c6c21f60f1"
   integrity sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==
 
-"@webassemblyjs/wasm-edit@^1.12.1":
+"@webassemblyjs/wasm-edit@^1.14.1":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz#ac6689f502219b59198ddec42dcd496b1004d597"
   integrity sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==
@@ -1286,7 +1268,7 @@
     "@webassemblyjs/wasm-gen" "1.14.1"
     "@webassemblyjs/wasm-parser" "1.14.1"
 
-"@webassemblyjs/wasm-parser@1.14.1", "@webassemblyjs/wasm-parser@^1.12.1":
+"@webassemblyjs/wasm-parser@1.14.1", "@webassemblyjs/wasm-parser@^1.14.1":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz#b3e13f1893605ca78b52c68e54cf6a865f90b9fb"
   integrity sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==
@@ -1491,14 +1473,14 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.24.0, browserslist@^4.24.2:
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580"
-  integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
+browserslist@^4.24.0, browserslist@^4.24.3:
+  version "4.24.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b"
+  integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
   dependencies:
-    caniuse-lite "^1.0.30001669"
-    electron-to-chromium "^1.5.41"
-    node-releases "^2.0.18"
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
     update-browserslist-db "^1.1.1"
 
 buffer-from@^1.0.0:
@@ -1518,16 +1500,21 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-call-bind@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
-  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+call-bind-apply-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
   dependencies:
-    es-define-property "^1.0.0"
     es-errors "^1.3.0"
     function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    set-function-length "^1.2.1"
+
+call-bound@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
 
 camel-case@^4.1.2:
   version "4.1.2"
@@ -1542,10 +1529,10 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
   integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
 
-caniuse-lite@^1.0.30001669:
-  version "1.0.30001684"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz#0eca437bab7d5f03452ff0ef9de8299be6b08e16"
-  integrity sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==
+caniuse-lite@^1.0.30001688:
+  version "1.0.30001696"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz#00c30a2fc11e3c98c25e5125418752af3ae2f49f"
+  integrity sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==
 
 chokidar@^3.6.0:
   version "3.6.0"
@@ -1683,11 +1670,11 @@ copy-webpack-plugin@^12.0.2:
     serialize-javascript "^6.0.2"
 
 core-js-compat@^3.38.0, core-js-compat@^3.38.1:
-  version "3.39.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.39.0.tgz#b12dccb495f2601dc860bdbe7b4e3ffa8ba63f61"
-  integrity sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.40.0.tgz#7485912a5a4a4315c2fdb2cbdc623e6881c88b38"
+  integrity sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==
   dependencies:
-    browserslist "^4.24.2"
+    browserslist "^4.24.3"
 
 core-util-is@~1.0.0:
   version "1.0.3"
@@ -2017,9 +2004,9 @@ debug@2.6.9:
     ms "2.0.0"
 
 debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
-  version "4.3.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
-  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
   dependencies:
     ms "^2.1.3"
 
@@ -2041,15 +2028,6 @@ default-browser@^5.2.1:
     bundle-name "^4.1.0"
     default-browser-id "^5.0.0"
 
-define-data-property@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
-  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    gopd "^1.0.1"
-
 define-lazy-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
@@ -2134,15 +2112,24 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.5.41:
-  version "1.5.65"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.65.tgz#e2b9d84d31e187a847e3ccdcfb415ddd4a3d1ea7"
-  integrity sha512-PWVzBjghx7/wop6n22vS2MLU8tKGd4Q91aCEGhG/TYmW6PP5OcSXcdnxTe1NNt0T66N8D6jxh4kC8UsdzOGaIw==
+electron-to-chromium@^1.5.73:
+  version "1.5.90"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.90.tgz#4717e5a5413f95bbb12d0af14c35057e9c65e0b6"
+  integrity sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==
 
 encodeurl@~1.0.2:
   version "1.0.2"
@@ -2155,9 +2142,9 @@ encodeurl@~2.0.0:
   integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
 
 enhanced-resolve@^5.17.1:
-  version "5.17.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
-  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  version "5.18.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz#91eb1db193896b9801251eeff1c6980278b1e404"
+  integrity sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -2172,12 +2159,10 @@ envinfo@^7.7.3:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.14.0.tgz#26dac5db54418f2a4c1159153a0b2ae980838aae"
   integrity sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==
 
-es-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
-  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
-  dependencies:
-    get-intrinsic "^1.2.4"
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
 
 es-errors@^1.3.0:
   version "1.3.0"
@@ -2185,9 +2170,16 @@ es-errors@^1.3.0:
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
 es-module-lexer@^1.2.1:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78"
-  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.6.0.tgz#da49f587fd9e68ee2404fe4e256c0c7d3a81be21"
+  integrity sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==
+
+es-object-atoms@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
 
 escalade@^3.2.0:
   version "3.2.0"
@@ -2244,10 +2236,10 @@ events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-express@^4.19.2:
-  version "4.21.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.21.1.tgz#9dae5dda832f16b4eec941a4e44aa89ec481b281"
-  integrity sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==
+express@^4.21.2:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
@@ -2268,7 +2260,7 @@ express@^4.19.2:
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.10"
+    path-to-regexp "0.1.12"
     proxy-addr "~2.0.7"
     qs "6.13.0"
     range-parser "~1.2.1"
@@ -2287,15 +2279,15 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-glob@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
-  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
     glob-parent "^5.1.2"
     merge2 "^1.3.0"
-    micromatch "^4.0.4"
+    micromatch "^4.0.8"
 
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
@@ -2303,9 +2295,9 @@ fast-json-stable-stringify@^2.0.0:
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-uri@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.3.tgz#892a1c91802d5d7860de728f18608a0573142241"
-  integrity sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.6.tgz#88f130b77cfaea2378d56bf970dea21257a68748"
+  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
 
 fastest-levenshtein@^1.0.12:
   version "1.0.16"
@@ -2313,9 +2305,9 @@ fastest-levenshtein@^1.0.12:
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
 fastq@^1.6.0:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
-  integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.19.0.tgz#a82c6b7c2bb4e44766d865f07997785fecfdcb89"
+  integrity sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==
   dependencies:
     reusify "^1.0.4"
 
@@ -2410,16 +2402,29 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
-  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+get-intrinsic@^1.2.5, get-intrinsic@^1.2.6:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
   dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-define-property "^1.0.1"
     es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
     function-bind "^1.1.2"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-    hasown "^2.0.0"
+    get-proto "^1.0.0"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
 
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
@@ -2457,12 +2462,10 @@ globby@^14.0.0:
     slash "^5.1.0"
     unicorn-magic "^0.1.0"
 
-gopd@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
-  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
-  dependencies:
-    get-intrinsic "^1.1.3"
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
 
 graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6:
   version "4.2.11"
@@ -2479,24 +2482,12 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-property-descriptors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
-  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
-  dependencies:
-    es-define-property "^1.0.0"
-
-has-proto@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
-  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
-
-has-symbols@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
-  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
 
-hasown@^2.0.0, hasown@^2.0.2:
+hasown@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
   integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
@@ -2518,11 +2509,6 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-html-entities@^2.4.0:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
-  integrity sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==
-
 html-inline-script-webpack-plugin@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/html-inline-script-webpack-plugin/-/html-inline-script-webpack-plugin-3.2.1.tgz#32ae9a4a743c508bda854386c9af3b2e358bb5b7"
@@ -2589,11 +2575,11 @@ http-errors@~1.6.2:
     statuses ">= 1.4.0 < 2"
 
 http-parser-js@>=0.5.1:
-  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
-  integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.9.tgz#b817b3ca0edea6236225000d795378707c169cec"
+  integrity sha512-n1XsPy3rXVxlqxVioEWdC+0+M+SQw0DpJynwtOPo1X+ZlvdzTLtDBIJJlDQTnwZIFJrZSzSGmIOUdP8tu+SgLw==
 
-http-proxy-middleware@^2.0.3:
+http-proxy-middleware@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
   integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
@@ -2687,10 +2673,10 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-core-module@^2.13.0:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37"
-  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
+is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
   dependencies:
     hasown "^2.0.2"
 
@@ -2776,7 +2762,12 @@ jest-worker@^27.4.5:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-jsesc@^3.0.2, jsesc@~3.0.2:
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+jsesc@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
   integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
@@ -2869,15 +2860,20 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
 memfs@^4.6.0:
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-4.14.0.tgz#48d5e85a03ea0b428280003212fbca3063531be3"
-  integrity sha512-JUeY0F/fQZgIod31Ja1eJgiSxLn7BfQlCnqhwXFBzFHEw63OdLK7VJUJ7bnzNsWgCyoUP5tEp1VRY8rDaYzqOA==
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-4.17.0.tgz#a3c4b5490b9b1e7df5d433adc163e08208ce7ca2"
+  integrity sha512-4eirfZ7thblFmqFjywlTmuWVSvccHAJbn1r8qQLzmTO11qcqpohOjmY2mFce6x7x7WtskzRqApPD0hv+Oa74jg==
   dependencies:
     "@jsonjoy.com/json-pack" "^1.0.3"
     "@jsonjoy.com/util" "^1.3.0"
@@ -2904,7 +2900,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@^4.0.2, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -2957,7 +2953,7 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
-nanoid@^3.3.7:
+nanoid@^3.3.7, nanoid@^3.3.8:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
   integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
@@ -2990,10 +2986,10 @@ node-forge@^1:
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
   integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
-node-releases@^2.0.18:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
-  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -3007,7 +3003,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-inspect@^1.13.1:
+object-inspect@^1.13.3:
   version "1.13.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
   integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
@@ -3122,17 +3118,17 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-to-regexp@0.1.10:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
-  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+path-to-regexp@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
 
 path-type@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-5.0.0.tgz#14b01ed7aea7ddf9c7c3f46181d4d04f9c785bb8"
   integrity sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==
 
-picocolors@^1.0.0, picocolors@^1.1.0, picocolors@^1.1.1:
+picocolors@^1.0.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -3162,9 +3158,9 @@ postcss-modules-extract-imports@^3.1.0:
   integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
 
 postcss-modules-local-by-default@^4.0.5:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.1.0.tgz#b0db6bc81ffc7bdc52eb0f84d6ca0bedf0e36d21"
-  integrity sha512-rm0bdSv4jC3BDma3s9H19ZddW0aHX6EoqwDYU2IfZhRN+53QrufTRo2IdkAbRqLx4R2IYbZnbjKKxg4VN5oU9Q==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz#d150f43837831dae25e4085596e84f6f5d6ec368"
+  integrity sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==
   dependencies:
     icss-utils "^5.0.0"
     postcss-selector-parser "^7.0.0"
@@ -3207,11 +3203,11 @@ postcss@8.4.38:
     source-map-js "^1.2.0"
 
 postcss@^8.4.33:
-  version "8.4.49"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
-  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
   dependencies:
-    nanoid "^3.3.7"
+    nanoid "^3.3.8"
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
@@ -3372,7 +3368,7 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexpu-core@^6.1.1:
+regexpu-core@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
   integrity sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==
@@ -3435,11 +3431,11 @@ resolve-from@^5.0.0:
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
 resolve@^1.14.2, resolve@^1.20.0:
-  version "1.22.8"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
-  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
   dependencies:
-    is-core-module "^2.13.0"
+    is-core-module "^2.16.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
@@ -3497,7 +3493,7 @@ scheduler@^0.23.2:
   dependencies:
     loose-envify "^1.1.0"
 
-schema-utils@^3.1.1, schema-utils@^3.2.0:
+schema-utils@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
   integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
@@ -3506,10 +3502,10 @@ schema-utils@^3.1.1, schema-utils@^3.2.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-schema-utils@^4.0.0, schema-utils@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"
-  integrity sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==
+schema-utils@^4.0.0, schema-utils@^4.2.0, schema-utils@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.3.0.tgz#3b669f04f71ff2dfb5aba7ce2d5a9d79b35622c0"
+  integrity sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==
   dependencies:
     "@types/json-schema" "^7.0.9"
     ajv "^8.9.0"
@@ -3535,9 +3531,9 @@ semver@^6.3.1:
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.5.4:
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
-  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
+  integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
 
 send@0.19.0:
   version "0.19.0"
@@ -3558,7 +3554,7 @@ send@0.19.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-serialize-javascript@^6.0.1, serialize-javascript@^6.0.2:
+serialize-javascript@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
   integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
@@ -3588,18 +3584,6 @@ serve-static@1.16.2:
     parseurl "~1.3.3"
     send "0.19.0"
 
-set-function-length@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
-  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.2"
-
 setprototypeof@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
@@ -3635,19 +3619,49 @@ shebang-regex@^3.0.0:
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 shell-quote@^1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
-  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
+  integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
 
 side-channel@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
-  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
   dependencies:
-    call-bind "^1.0.7"
     es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
-    object-inspect "^1.13.1"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
 
 slash@^5.1.0:
   version "5.1.0"
@@ -3741,9 +3755,9 @@ style-loader@^4.0.0:
   integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
 
 styled-components@^6.1.11:
-  version "6.1.13"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.13.tgz#2d777750b773b31469bd79df754a32479e9f475e"
-  integrity sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==
+  version "6.1.14"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.14.tgz#addd3b645f400f8aad84c992afec58804ad1d217"
+  integrity sha512-KtfwhU5jw7UoxdM0g6XU9VZQFV4do+KrM8idiVCH5h4v49W+3p3yMe0icYwJgZQZepa5DbH04Qv8P0/RdcLcgg==
   dependencies:
     "@emotion/is-prop-valid" "1.2.2"
     "@emotion/unitless" "0.8.1"
@@ -3778,20 +3792,20 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
 terser-webpack-plugin@^5.3.10:
-  version "5.3.10"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
-  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.11.tgz#93c21f44ca86634257cac176f884f942b7ba3832"
+  integrity sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.20"
+    "@jridgewell/trace-mapping" "^0.3.25"
     jest-worker "^27.4.5"
-    schema-utils "^3.1.1"
-    serialize-javascript "^6.0.1"
-    terser "^5.26.0"
+    schema-utils "^4.3.0"
+    serialize-javascript "^6.0.2"
+    terser "^5.31.1"
 
-terser@^5.10.0, terser@^5.26.0:
-  version "5.36.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.36.0.tgz#8b0dbed459ac40ff7b4c9fd5a3a2029de105180e"
-  integrity sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==
+terser@^5.10.0, terser@^5.31.1:
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.37.0.tgz#38aa66d1cfc43d0638fab54e43ff8a4f72a21ba3"
+  integrity sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -3882,12 +3896,12 @@ unpipe@1.0.0, unpipe@~1.0.0:
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
 update-browserslist-db@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
-  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz#97e9c96ab0ae7bcac08e9ae5151d26e6bc6b5580"
+  integrity sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==
   dependencies:
     escalade "^3.2.0"
-    picocolors "^1.1.0"
+    picocolors "^1.1.1"
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -3973,9 +3987,9 @@ webpack-dev-middleware@^7.4.2:
     schema-utils "^4.0.0"
 
 webpack-dev-server@^5.0.4:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-5.1.0.tgz#8f44147402b4d8ab99bfeb9b6880daa1411064e5"
-  integrity sha512-aQpaN81X6tXie1FoOB7xlMfCsN19pSvRAeYUHOdFWOlhpQ/LlbfTqYwwmEDFV0h8GGuqmCmKmT+pxcUV/Nt2gQ==
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-5.2.0.tgz#68043886edaa3fd875ad20e01589990a79612f9c"
+  integrity sha512-90SqqYXA2SK36KcT6o1bvwvZfJFcmoamqeJY7+boioffX9g9C0wjjJRGUrQIuh43pb0ttX7+ssavmj/WN2RHtA==
   dependencies:
     "@types/bonjour" "^3.5.13"
     "@types/connect-history-api-fallback" "^1.5.4"
@@ -3990,10 +4004,9 @@ webpack-dev-server@^5.0.4:
     colorette "^2.0.10"
     compression "^1.7.4"
     connect-history-api-fallback "^2.0.0"
-    express "^4.19.2"
+    express "^4.21.2"
     graceful-fs "^4.2.6"
-    html-entities "^2.4.0"
-    http-proxy-middleware "^2.0.3"
+    http-proxy-middleware "^2.0.7"
     ipaddr.js "^2.1.0"
     launch-editor "^2.6.1"
     open "^10.0.3"
@@ -4021,15 +4034,15 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.91.0:
-  version "5.96.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.96.1.tgz#3676d1626d8312b6b10d0c18cc049fba7ac01f0c"
-  integrity sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==
+  version "5.97.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.97.1.tgz#972a8320a438b56ff0f1d94ade9e82eac155fa58"
+  integrity sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==
   dependencies:
     "@types/eslint-scope" "^3.7.7"
     "@types/estree" "^1.0.6"
-    "@webassemblyjs/ast" "^1.12.1"
-    "@webassemblyjs/wasm-edit" "^1.12.1"
-    "@webassemblyjs/wasm-parser" "^1.12.1"
+    "@webassemblyjs/ast" "^1.14.1"
+    "@webassemblyjs/wasm-edit" "^1.14.1"
+    "@webassemblyjs/wasm-parser" "^1.14.1"
     acorn "^8.14.0"
     browserslist "^4.24.0"
     chrome-trace-event "^1.0.2"