alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-22 01:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
webgl-e1
OpenFrontIO/tests/pathfinding/playground/public/styles.css
T
Arkadiusz Sygulski b090f2f624 HPA* Pathfinding (#2815) 
## Pathfinding with HPA*

Hi! The primary objective of this PR is to replace per-tile A* with
hierarchical pathfinding - HPA*. In practice, this means we create an
abstract graph on top of the actual map with far fewer points and use it
to decide on general path structure. Only then we go back to tile-level
and build path between selected waypoints. This speeds up long distance
pathfinding by over 1000x in some cases. To make the review easier, it
comes with a benchmark and visual playground.

## PREPROCESSING

H part of HPA* means "hierarchical" and requires preprocessing.

This PR includes pre-processing as part inside `new Game()` constructor.
It takes about 135ms for `giantworldmap` on my machine, which increases
the effective initialization from ~95ms to ~230ms. This time could be
reduced in different ways, which are **out of scope** for this PR.

After confirming the initialization time is bearable on low-end devices,
I argue merging this PR as-is is acceptable tradeoff. It creates small
lag at the beginning of a round but pays for itself in the first minute
of the match.

## Nerdy details

**Architecture**
- HPA*-style hierarchical pathfinding
- 32×32 sectors on minimap with gateway nodes on borders
- Gateway graph built via BFS during preprocessing
- Water component optimization skips unreachable gateway pairs
- A* on gateway graph → local A* within sectors → Bresenham path
smoothing
- Minimap upscaling identical to currently used in MiniAStar

**Key Optimizations**
- Typed arrays instead of high-level primitives
- Stamp-based visited tracking (no need to recreate buffers, O(1)
clearing)
- Optional - enabled by default - caching of tile paths between gateways
- Line of sight smoothing for the final path

## Review Focus

Play with included tools, benchmark and visualization. Pathfinding
should be safe to merge as a black box - you do not need to understand
the details. Outcomes can be tested empirically in-game. Visualize (and
share!) edge cases with included playground. Confirm the 100x speedup is
real with benchmark.

If you plan to dive into the code, I suggest the following order:
- Pathfinding abstraction in `src/core/pathfinding/`
- Pathfinding tests in `tests/core/pathfinding/`
- NavMesh in `src/core/pathfinding/navmesh/` + integration with
`Game.ts`
- Benchmark in `tests/pathfinding/benchmark/`

Do not look at playground's code, it has been created with a clanker.
The design is 100% mine and I spent way too long polishing it, but I
haven't even once edited the code manually. There is probably no
abstraction whatsoever, just do not look at the code, let it play.

## Core Changes

#### Pathfinding (`src/core/pathfinding/navmesh/`)
- HPA* + refinement -> three phased pathfinding: A* over the graph ->
naive path -> refinement
- comes with A* and BFS optimized for for specific needs

#### Pre-Processing (`src/core/pathfinding/navmesh/`)
- identify water bodies to avoid pathfinding between disconnected nodes
- create high-level graph of gateways on top of tile map

#### Abstraction (`src/core/pathfinding/`)

- common `PathFinder` interface that can return full path and also act
as state machine (`.next()`)
- adapters for both new and legacy algorithm with fallback to legacy if
navigation mesh not available

#### Benchmark (`tests/pathfinding/benchmark/`)

- `npx tsx tests/pathfinding/benchmark/run.ts` - no guesswork, numbers
- `npx tsx tests/pathfinding/benchmark/run.ts --synthetic` - 1000s of
synthetic paths
- `npx tsc tests/pathfinding/benchmark/generate.ts` - generate more as
needed, test new maps
- includes ONE synthetic scenario to avoid PR bloat, generate more
locally / later

#### Playground (`tests/pathfinding/playground/`)

- `npx tsx tests/pathfinding/playground/server.ts` - visualize paths
with both new and legacy algorithm

## Benchmarks

### Compared with legacy in default - hand picked - scenario:
```
Initialization: 95.95ms -> 227.29ms
Pathfinding: 3038.43ms -> 6.45ms
Distance: 26972 -> 26810 tiles
```

### 42,000 synthetic routes across all maps
```
Running 42 synthetic scenarios with hpa.cached adapter...

✅ synthetic/achiran                   | Init:    93.42ms | Path:    139.07ms | Dist: 1481630 tiles | Routes: 1000/1000
✅ synthetic/africa                    | Init:    87.14ms | Path:    155.08ms | Dist: 1829414 tiles | Routes: 1000/1000
✅ synthetic/asia                      | Init:    57.60ms | Path:    112.55ms | Dist: 1204082 tiles | Routes: 1000/1000
✅ synthetic/australia                 | Init:    78.18ms | Path:     77.12ms | Dist:  978375 tiles | Routes: 1000/1000
✅ synthetic/baikal                    | Init:    78.26ms | Path:    152.14ms | Dist: 1600016 tiles | Routes: 1000/1000
✅ synthetic/baikalnukewars            | Init:    81.44ms | Path:    165.90ms | Dist: 1699283 tiles | Routes: 1000/1000
✅ synthetic/betweentwoseas            | Init:    29.29ms | Path:    114.99ms | Dist: 1338075 tiles | Routes: 1000/1000
✅ synthetic/blacksea                  | Init:    30.66ms | Path:     93.14ms | Dist:  949217 tiles | Routes: 1000/1000
✅ synthetic/britannia                 | Init:    74.12ms | Path:     85.62ms | Dist:  866752 tiles | Routes: 1000/1000
✅ synthetic/deglaciatedantarctica     | Init:   105.49ms | Path:    192.93ms | Dist: 1574684 tiles | Routes: 1000/1000
✅ synthetic/didier                    | Init:    81.51ms | Path:    153.70ms | Dist: 1734876 tiles | Routes: 1000/1000
✅ synthetic/eastasia                  | Init:    49.29ms | Path:    128.63ms | Dist: 1410270 tiles | Routes: 1000/1000
✅ synthetic/europe                    | Init:    92.55ms | Path:    178.35ms | Dist: 1525216 tiles | Routes: 1000/1000
✅ synthetic/europeclassic             | Init:    33.50ms | Path:    104.40ms | Dist: 1209759 tiles | Routes: 1000/1000
✅ synthetic/falklandislands           | Init:    63.00ms | Path:    107.41ms | Dist: 1080251 tiles | Routes: 1000/1000
✅ synthetic/faroeislands              | Init:    71.91ms | Path:     49.52ms | Dist:  604613 tiles | Routes: 1000/1000
✅ synthetic/fourislands               | Init:    45.75ms | Path:     78.91ms | Dist:  937439 tiles | Routes: 1000/1000
✅ synthetic/gatewaytotheatlantic      | Init:    81.00ms | Path:    257.06ms | Dist: 2555551 tiles | Routes: 1000/1000
✅ synthetic/giantworldmap             | Init:   214.25ms | Path:    220.42ms | Dist: 1976693 tiles | Routes: 1000/1000
✅ synthetic/gulfofstlawrence          | Init:    45.16ms | Path:     96.05ms | Dist: 1014604 tiles | Routes: 1000/1000
✅ synthetic/halkidiki                 | Init:    74.68ms | Path:    149.39ms | Dist: 1546781 tiles | Routes: 1000/1000
✅ synthetic/iceland                   | Init:    58.72ms | Path:     78.16ms | Dist: 1001554 tiles | Routes: 1000/1000
✅ synthetic/italia                    | Init:    29.78ms | Path:    139.93ms | Dist: 1412024 tiles | Routes: 1000/1000
✅ synthetic/japan                     | Init:   161.07ms | Path:    118.65ms | Dist: 1154393 tiles | Routes: 1000/1000
✅ synthetic/lemnos                    | Init:    52.59ms | Path:    136.69ms | Dist: 1481101 tiles | Routes: 1000/1000
✅ synthetic/lisbon                    | Init:    49.27ms | Path:     86.53ms | Dist: 1032011 tiles | Routes: 1000/1000
✅ synthetic/manicouagan               | Init:    53.74ms | Path:    110.52ms | Dist: 1307630 tiles | Routes: 1000/1000
✅ synthetic/mars                      | Init:    29.39ms | Path:     80.55ms | Dist: 1091702 tiles | Routes: 1000/1000
✅ synthetic/mena                      | Init:    26.37ms | Path:    120.09ms | Dist: 1272751 tiles | Routes: 1000/1000
✅ synthetic/montreal                  | Init:    26.08ms | Path:    106.77ms | Dist: 1187736 tiles | Routes: 1000/1000
✅ synthetic/newyorkcity               | Init:    56.60ms | Path:    181.19ms | Dist: 1753875 tiles | Routes: 1000/1000
✅ synthetic/northamerica              | Init:    96.29ms | Path:    123.02ms | Dist: 1217221 tiles | Routes: 1000/1000
✅ synthetic/oceania                   | Init:    52.81ms | Path:     51.96ms | Dist:  482373 tiles | Routes: 1000/1000
✅ synthetic/pangaea                   | Init:    21.29ms | Path:     56.58ms | Dist:  716189 tiles | Routes: 1000/1000
✅ synthetic/pluto                     | Init:    53.89ms | Path:    141.62ms | Dist: 1304362 tiles | Routes: 1000/1000
✅ synthetic/southamerica              | Init:    85.19ms | Path:    123.03ms | Dist: 1301403 tiles | Routes: 1000/1000
✅ synthetic/straitofgibraltar         | Init:    76.68ms | Path:    108.30ms | Dist: 1304592 tiles | Routes: 1000/1000
✅ synthetic/straitofhormuz            | Init:    38.97ms | Path:     67.78ms | Dist:  754920 tiles | Routes: 1000/1000
✅ synthetic/surrounded                | Init:    95.35ms | Path:     90.18ms | Dist: 1017142 tiles | Routes: 1000/1000
✅ synthetic/svalmel                   | Init:    60.58ms | Path:    104.75ms | Dist: 1235501 tiles | Routes: 1000/1000
✅ synthetic/twolakes                  | Init:    62.05ms | Path:     94.54ms | Dist: 1140807 tiles | Routes: 1000/1000
✅ synthetic/world                     | Init:    41.43ms | Path:     93.42ms | Dist:  873406 tiles | Routes: 1000/1000

Completed 42 scenarios
Total Initialization Time: 2796.32ms
Total Pathfinding Time: 5026.64ms
Total Distance: 53160274 tiles
```

## Playground

**That's the fun part**. Watch NavMesh running circles around legacy
`PathFinder.Mini` in real time. Debug inner workings, test edge cases,
share URLs for debugging.


https://github.com/user-attachments/assets/34e2e3f5-fbc1-4b1f-917d-820766e98d5d

## Discord Tag
`moleole`
2026-01-08 13:34:18 -08:00

796 lines
13 KiB
CSS
Raw Permalink Blame History

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #3c3c3c;
color: #e0e0e0;
overflow: hidden;
}
/* Welcome screen */
.welcome-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(28, 28, 28, 0.98);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.welcome-screen.hidden {
display: none;
}
.welcome-content {
text-align: center;
max-width: 1100px;
padding: 40px;
background: rgba(42, 42, 42, 0.95);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.welcome-content h1 {
font-size: 42px;
color: #fff;
margin: 0 0 16px 0;
font-weight: 600;
}
.welcome-content p {
font-size: 18px;
color: #aaa;
margin: 0 0 30px 0;
line-height: 1.5;
}
/* Map grid */
.map-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 30px;
}
.map-card {
background: #1a1a1a;
border: 2px solid #404040;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.map-card:hover {
border-color: #0066cc;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}
.map-card img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.map-card-name {
padding: 10px;
font-size: 14px;
color: #e0e0e0;
font-weight: 500;
text-align: center;
background: #2a2a2a;
transition: opacity 0.3s ease;
}
.welcome-selector {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.welcome-selector label {
font-size: 14px;
color: #aaa;
font-weight: 400;
}
.welcome-selector select {
width: 400px;
padding: 14px 18px;
font-size: 16px;
background: #1a1a1a;
color: #e0e0e0;
border: 2px solid #404040;
border-radius: 8px;
cursor: pointer;
transition: border-color 0.2s;
}
.welcome-selector select:hover {
border-color: #0066cc;
}
.welcome-selector select:focus {
outline: none;
border-color: #0066cc;
}
/* Fullscreen canvas container */
.canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #3c3c3c;
z-index: 1;
}
.canvas-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #0a0a0a;
cursor: grab;
}
.canvas-wrapper:active {
cursor: grabbing;
}
.canvas-wrapper.selecting {
cursor: crosshair;
}
canvas {
position: absolute;
top: 0;
left: 0;
display: block;
transform-origin: 0 0;
}
#mapCanvas {
z-index: 1;
}
#overlayCanvas {
z-index: 2;
pointer-events: none;
}
/* Top panel - overlay on map */
.top-panel {
position: fixed;
top: 20px;
left: 20px;
max-width: 900px;
background: rgba(42, 42, 42, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.top-panel h1 {
font-size: 24px;
color: #fff;
margin: 0 0 15px 0;
}
.scenario-selector {
margin-bottom: 15px;
}
.status-section {
padding-top: 15px;
border-top: 1px solid #404040;
}
.scenario-selector select {
width: 350px;
padding: 12px 16px;
font-size: 16px;
background: #1a1a1a;
color: #e0e0e0;
border: 1px solid #404040;
border-radius: 6px;
cursor: pointer;
}
.scenario-selector select:focus {
outline: none;
border-color: #0066cc;
}
.info {
padding-top: 15px;
border-top: 1px solid #404040;
}
.info-row {
display: flex;
gap: 30px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.info-item {
display: flex;
align-items: center;
gap: 8px;
}
/* Debug panel (bottom left) */
.debug-panel {
position: fixed;
bottom: 20px;
left: 20px;
background: rgba(42, 42, 42, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 10px;
}
.debug-panel-row {
display: flex;
gap: 10px;
align-items: center;
}
/* View panel (bottom right) */
.view-panel {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(42, 42, 42, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 10px;
min-width: 160px;
}
.zoom-control {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #404040;
margin-bottom: 2px;
}
.zoom-control input[type="range"] {
width: 100%;
}
.zoom-control span {
font-size: 13px;
color: #aaa;
font-weight: 500;
}
.clear-button {
background: #cc3333;
color: white;
border: 2px solid #dd4444;
padding: 10px 12px 10px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 100%;
}
.clear-button:hover {
background: #aa2222;
border-color: #cc3333;
}
.toggle-button {
background: #333;
color: #e0e0e0;
border: 2px solid #555;
padding: 10px 12px 10px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.2s;
min-width: 100px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.toggle-button::before {
content: "☐";
font-size: 24px;
line-height: 1;
color: #888;
}
.toggle-button:hover {
background: #404040;
border-color: #666;
}
.toggle-button[data-active="true"] {
background: #0066cc;
border-color: #0088ff;
color: white;
box-shadow: 0 0 10px rgba(0, 102, 204, 0.4);
}
.toggle-button[data-active="true"]::before {
content: "☑";
color: #00ff88;
}
.toggle-button[data-active="true"]:hover {
background: #0052a3;
border-color: #0066cc;
}
/* Timings panel (left side) */
.timings-panel {
position: fixed;
top: 250px;
left: 20px;
background: rgba(42, 42, 42, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 20px 20px 15px 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
min-width: 280px;
}
.timings-header {
display: none;
}
.timing-section {
margin-bottom: 0;
padding-bottom: 0;
}
.timing-section + .timing-section {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #404040;
}
.timing-label {
font-size: 18px;
color: #e0e0e0;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.refresh-icon {
background: none;
border: none;
color: #00aaff;
font-size: 18px;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color 0.2s;
border-radius: 4px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(1px);
}
.refresh-icon span {
display: block;
line-height: 1;
}
.refresh-icon:hover {
color: #00ccff;
background: rgba(0, 170, 255, 0.1);
}
.refresh-icon.spinning span {
animation: spin 0.6s ease-in-out;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.timing-label-detail {
color: #888;
text-transform: none;
font-size: 14px;
}
.timing-value-large {
font-size: 48px;
font-weight: bold;
color: #00ff88;
font-family: "Courier New", monospace;
line-height: 1;
margin-bottom: 15px;
}
.timing-value-large.faded {
color: #888888;
opacity: 0.7;
}
.timing-value-speedup {
font-size: 36px;
font-weight: bold;
color: #ffaa00;
font-family: "Courier New", monospace;
line-height: 1;
}
.timing-breakdown {
margin-top: 15px;
}
.timing-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
font-size: 20px;
}
.timing-name {
color: #e0e0e0;
}
.timing-value {
font-family:
"Consolas", "Monaco", "SF Mono", "Roboto Mono", "Courier New", monospace;
color: #f5f5f5;
font-weight: bold;
font-size: 20px;
}
/* Legend panel (right side) */
.legend-panel {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
background: rgba(42, 42, 42, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
min-width: 160px;
}
.legend-header {
font-size: 16px;
font-weight: 600;
color: #e0e0e0;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #404040;
}
.legend {
display: flex;
flex-direction: column;
gap: 10px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #e0e0e0;
}
.legend-color {
width: 28px;
height: 4px;
border-radius: 2px;
flex-shrink: 0;
}
/* Form elements */
label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
}
input[type="range"] {
width: 120px;
}
input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
button {
background: #0066cc;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s;
}
button:hover {
background: #0052a3;
}
button:disabled {
background: #404040;
cursor: not-allowed;
opacity: 0.6;
}
.timing-button {
width: 100%;
background: #555;
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s;
}
.timing-button:hover:not(:disabled) {
background: #666;
}
.timing-button:disabled {
background: #404040;
cursor: not-allowed;
opacity: 0.6;
}
#status {
font-size: 14px;
color: #888;
font-style: italic;
}
#status.loading {
color: #00aaff;
}
#status.error {
color: #ff6b6b;
}
/* Error toast notification */
.error-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(138, 26, 26, 0.98);
color: #ff6b6b;
padding: 20px 30px;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
z-index: 100;
display: none;
max-width: 500px;
text-align: center;
border: 2px solid #ff6b6b;
animation: slideIn 0.3s ease-out;
}
.error-toast.visible {
display: block;
}
@keyframes slideIn {
from {
transform: translate(-50%, -60%);
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;
}
}
/* Tooltip */
#tooltip {
position: fixed;
background: rgba(0, 0, 0, 0.95);
color: #fff;
padding: 12px 16px;
border-radius: 8px;
font-size: 12px;
pointer-events: none;
z-index: 1000;
display: none;
border: 1px solid #666;
max-width: 350px;
line-height: 1.5;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
#tooltip.visible {
display: block;
}
/* Loading spinner */
.loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #404040;
border-top-color: #00aaff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-left: 8px;
vertical-align: middle;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Responsive adjustments */
@media (max-width: 1200px) {
.top-panel {
left: 10px;
right: 10px;
padding: 15px;
}
.debug-panel {
left: 10px;
padding: 12px;
gap: 8px;
}
.debug-panel-row {
gap: 8px;
}
.view-panel {
right: 10px;
padding: 12px;
gap: 8px;
min-width: 140px;
}
.toggle-button {
min-width: auto;
padding: 8px 10px 8px 8px;
font-size: 14px;
}
.clear-button {
padding: 8px 10px 8px 8px;
font-size: 14px;
}
.legend-panel {
right: 10px;
max-width: 200px;
}
h1 {
font-size: 20px;
}
}
@media (max-width: 768px) {
.top-panel h1 {
font-size: 18px;
}
.debug-panel {
gap: 6px;
}
.debug-panel-row {
gap: 6px;
}
.view-panel {
gap: 6px;
min-width: 120px;
}
.toggle-button {
min-width: auto;
padding: 7px 8px 7px 6px;
font-size: 13px;
}
.clear-button {
padding: 7px 8px 7px 6px;
font-size: 13px;
}
.timings-panel {
top: auto;
bottom: 180px;
left: 10px;
transform: none;
min-width: auto;
max-width: calc(100vw - 20px);
}
.legend-panel {
top: auto;
bottom: 200px;
right: 10px;
transform: none;
}
}
Reference in New Issue View Git Blame Copy Permalink