robotframework-dashboard 2.2.0__tar.gz → 2.4.0__tar.gz

{robotframework_dashboard-2.2.0/robotframework_dashboard.egg-info → robotframework_dashboard-2.4.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: robotframework-dashboard
-Version: 2.2.0
+Version: 2.4.0
 Summary: Output processor and dashboard generator for Robot Framework output files
 Home-page: https://github.com/marketsquare/robotframework-dashboard
 Author: Tim de Groot
@@ -84,14 +84,15 @@ For all available CLI options see the [Basic CLI docs](https://marketsquare.gith
 - 📄 **Dashboard Pages** - Overview, Dashboard, and Compare pages for multi-level insights.  
 - 🎛️ **Customizable Layouts** - Drag-and-drop sections with adjustable size and order.  
 - 📊 **Graph Customization** - Toggle legends, axis titles, labels, and control animations.  
-- 🔎 **Global Filters** - Filter runs by name, tags, date, metadata, or quantity.  
+- 🔎 **Global Filters** - Filter runs by name, tags, date, metadata, or quantity. Drag across the runs-over-time histogram to zoom into a period. Every filter option shows how many runs it still matches, and options that match none are greyed out.  
 - ⚖️ **Comparison Mode** - Compare up to 4 runs side by side with visual statistics.  
 - 🔗 **Automatic Log Linking** - Open Robot Framework logs directly from the dashboard.  
 - 🛠️ **Custom Database Classes** - Extend or replace the database processor for custom backends.  
 - 🖥️ **Server Mode** - Host your dashboard for multi-user access and automatic updates.  
 - 🎧 **Listener Integration** - Automatically updates dashboard after every test run.  
-- 📝 **Message Config Support** - Group similar test failures using regex-based patterns.  
-- ⚙️ **Configurable Defaults** - Preload dashboard settings via JSON for consistent appearance.  
+- 📝 **Message Config Support** - Group similar test failures using regex-based patterns.
+- 🚨 **Exception Tracking** - Track exception messages caught by TRY/EXCEPT blocks across runs, with a dedicated graph and table.
+- ⚙️ **Configurable Defaults** - Preload dashboard settings via JSON for consistent appearance.
 
 …and many more advanced features to help you visualize, analyze, and manage your Robot Framework test results with ease!
 

{robotframework_dashboard-2.2.0 → robotframework_dashboard-2.4.0}/README.md

@@ -54,13 +54,15 @@ For all available CLI options see the [Basic CLI docs](https://marketsquare.gith
 - 📄 **Dashboard Pages** - Overview, Dashboard, and Compare pages for multi-level insights.  
 - 🎛️ **Customizable Layouts** - Drag-and-drop sections with adjustable size and order.  
 - 📊 **Graph Customization** - Toggle legends, axis titles, labels, and control animations.  
-- 🔎 **Global Filters** - Filter runs by name, tags, date, metadata, or quantity.  
+- 🔎 **Global Filters** - Filter runs by name, tags, date, metadata, or quantity (applied per project). Drag across the runs-over-time histogram to zoom into a period. Every filter option shows how many runs it still matches, and options that match none are greyed out.  
 - ⚖️ **Comparison Mode** - Compare up to 4 runs side by side with visual statistics.  
 - 🔗 **Automatic Log Linking** - Open Robot Framework logs directly from the dashboard.  
+- 🔁 **Rerun History** - Merged `--rerunfailed` outputs keep the status of every attempt per test.  
 - 🛠️ **Custom Database Classes** - Extend or replace the database processor for custom backends.  
 - 🖥️ **Server Mode** - Host your dashboard for multi-user access and automatic updates.  
 - 🎧 **Listener Integration** - Automatically updates dashboard after every test run.  
 - 📝 **Message Config Support** - Group similar test failures using regex-based patterns.  
+- 🚨 **Exception Tracking** - Track exception messages caught by TRY/EXCEPT blocks across runs, with a dedicated graph and table.  
 - ⚙️ **Configurable Defaults** - Preload dashboard settings via JSON for consistent appearance.  
 
 …and many more advanced features to help you visualize, analyze, and manage your Robot Framework test results with ease!
@@ -83,6 +85,7 @@ For detailed usage instructions, advanced examples, and full documentation, visi
 - 🗄️ [**Custom Database Class**](https://marketsquare.github.io/robotframework-dashboard/custom-database-class.html) - Extend or replace the default database backend to suit your storage needs, including SQLite, MySQL, or custom implementations.
 - 🔔 [**Listener Integration**](https://marketsquare.github.io/robotframework-dashboard/listener-integration.html) - Use a listener to automatically push test results to the dashboard for every executed run, integrating seamlessly into CI/CD pipelines.
 - 📂 [**Log Linking**](https://marketsquare.github.io/robotframework-dashboard/log-linking.html) - Enable clickable log navigation from dashboard graphs, covering file naming conventions, local and server usage, and remote log uploads.
+- 🔁 [**Reruns**](https://marketsquare.github.io/robotframework-dashboard/reruns.html) - Feed merged `--rerunfailed` outputs to the dashboard and see the attempt history of every re-executed test.
 - 📈 [**Performance**](https://marketsquare.github.io/robotframework-dashboard/performance.html) - Performance results across different workload sizes, guidance on scaling to hundreds of runs, and tips for large result sets.
 
 
@@ -94,7 +97,7 @@ robotframework-dashboard is designed to stay fast even as your result set grows.
 - **Dashboard generation** is nearly always **under 1 second** regardless of scale — data is already aggregated in the database, so re-generating HTML after adding new runs is essentially free.
 - **Incremental processing** — output files already in the database are automatically skipped, so you can safely re-run against a folder of XMLs without re-processing old results.
 - **HTML size** stays modest (~500 KB–1 MB for typical workloads) thanks to zlib compression of the embedded data.
-- **Dashboard rendering** (Chart.js in the browser) depends on how many runs are displayed. The default limit is **20 runs** (near-instant). Raising it to **50 runs** takes a few seconds as Chart.js renders all graphs. At **100+ runs**, initial rendering can approach **~10 seconds or more!**. This is also affected by your suite and test size — selecting **"All Suites"** or **"All Tests"** in their respective sections amplifies render time significantly, since each unique name becomes a separate data series. Use the quantity filter to keep the displayed run count manageable.
+- **Dashboard rendering** (Chart.js in the browser) depends on how many runs are displayed. The default limit is **20 runs per project** (near-instant). Raising it to **50 runs** takes a few seconds as Chart.js renders all graphs. At **100+ runs**, initial rendering can approach **~10 seconds or more!**. This is also affected by your suite and test size — selecting **"All Suites"** or **"All Tests"** in their respective sections amplifies render time significantly, since each unique name becomes a separate data series. Use the quantity filter to keep the displayed run count manageable.
 
 For detailed results and scaling guidance, see the [Performance docs](https://marketsquare.github.io/robotframework-dashboard/performance.html).
 

{robotframework_dashboard-2.2.0 → robotframework_dashboard-2.4.0}/robotframework_dashboard/arguments.py

@@ -78,9 +78,8 @@ class ArgumentParser:
         lets users write the combo with the regular comma separator (e.g.
         '-r "limit=10,tag=nightly"') instead of ';'.
 
-        Scope note (matches issue #309): only 'limit' can be scoped by tags.
-        'age' + 'tags' is intentionally NOT supported here — combining them
-        just runs as two independent operations, same as on main.
+        Only 'limit' can be scoped by tags; 'age' + 'tags' run as two
+        independent operations.
 
         Rules:
         - No tags, or tags without a 'limit' partner -> no combination, every
@@ -104,8 +103,8 @@ class ArgumentParser:
         combo = limit_parts[0] + "".join(f";tag={value}" for value in tag_values)
         print(
             f"  INFO: Combining 'limit' with 'tag(s)' -> keeping the {limit_value} most recent "
-            f"run(s) tagged with [{', '.join(tag_values)}] and removing older matching runs "
-            f"(runs without these tags are left untouched)."
+            f"run(s) per project tagged with [{', '.join(tag_values)}] and removing older "
+            f"matching runs (runs without these tags are left untouched)."
         )
         # other independent options (index/run_start/alias) run before the combo
         return other_parts + [combo]
@@ -315,10 +314,11 @@ class ArgumentParser:
                 "  • '-r index=0,index=1:4;9,index=10'\n"
                 "  • '-r run_start=2024-07-30 15:27:20.184407' -> remove specified run\n"
                 "  • '-r alias=some_alias,tag=prod'\n"
-                "  • '-r limit=10' -> keep only the 10 most recent runs\n"
-                "  • '-r limit=10,tag=nightly' -> keep 10 newest 'nightly' runs, leave others\n"
+                "  • '-r limit=10' -> keep only the 10 most recent runs per project\n"
+                "  • '-r limit=10,tag=nightly' -> keep 10 newest 'nightly' runs per project, leave others\n"
                 "  • '-r age=10d' -> remove runs older than 10 days\n"
                 "  • '-r age=-10d' -> remove runs younger than 10 days\n"
+                "  • a project is a run name and every 'project_' run tag\n"
                 "  • (y)ear/(d)ay/(h)our/(m)inute/(s)econd supported\n"
             ),
             action="append",
@@ -410,7 +410,8 @@ class ArgumentParser:
             "--quantity",
             metavar="INT",
             help=(
-                "Number of runs shown on initial dashboard load (default: 20).\n"
+                "Number of runs per project shown on initial dashboard load (default: 20).\n"
+                "  • a project is a run name and every 'project_' run tag\n"
                 "  • Higher values slow initial load\n"
                 "Examples:\n"
                 "  • '-q 25'\n"

{robotframework_dashboard-2.2.0 → robotframework_dashboard-2.4.0}/robotframework_dashboard/css/base.css

@@ -169,6 +169,15 @@ body {
   padding-right: 0px !important;
 }
 
+/* Bootstrap locks the page behind a modal with overflow:hidden on <body>, but the dashboard's
+   scrollbar sits on <html> (.html-scroll above), so the page keeps scrolling without this.
+   scrollbar-gutter keeps the scrollbar width reserved, otherwise the layout jumps sideways
+   every time a modal opens. */
+html:has(body.modal-open) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
 h4,
 h5,
 h6 {
@@ -213,7 +222,6 @@ body.lock-scroll {
   cursor: pointer;
 }
 
-/* ── Info label + small icon (tooltip on label hover) ── */
 .info-label {
   display: inline-flex !important;
   align-items: center;
@@ -266,6 +274,10 @@ body.lock-scroll {
   overflow: hidden;
 }
 
+#navigation {
+  min-height: 54px;
+}
+
 #mainNavItems {
   white-space: nowrap;
   min-width: 0;
@@ -283,7 +295,35 @@ body.lock-scroll {
   display: block;
 }
 
-/* ── Sidebar (off-canvas menu for overflowed items) ── */
+.nav-tracks-hidden .nav-track {
+  display: none;
+}
+.nav-track {
+  display: flex;
+  align-items: center;
+  /* the navbar row stretches its flex items, which made the track fill the bar top to bottom */
+  align-self: center;
+  gap: 2px;
+  padding: 3px;
+  margin: 0 6px;
+  border-radius: 999px;
+  background: var(--color-track-bg);
+  border: 1px solid var(--color-track-border);
+  flex-shrink: 0;
+}
+.navbar .nav-track-item {
+  padding: 3px 13px;
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.navbar .nav-track-item.active,
+.navbar .nav-track-item.active:hover {
+  background: var(--color-highlight);
+  color: var(--color-on-highlight);
+}
+
 .sidenav-backdrop {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
@@ -345,29 +385,80 @@ body.lock-scroll {
   color: var(--color-text-muted);
   letter-spacing: 0.05em;
 }
+.sidenav-group-header {
+  display: flex;
+  align-items: center;
+  border-left: 3px solid transparent;
+}
+.sidenav-group-header:hover {
+  background: var(--color-menu-hover-bg);
+}
+.sidenav-group-header.active {
+  border-left-color: var(--color-highlight);
+  background: var(--color-highlight-tint);
+}
 .sidenav-body .sidenav-nav-item {
+  flex: 1;
+  min-width: 0;
+  padding: 7px 4px 7px 16px;
+  font-weight: 500;
+  color: var(--color-menu-text);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidenav-group-header:hover .sidenav-nav-item {
+  color: var(--color-highlight);
+}
+.sidenav-group-header.active .sidenav-nav-item {
+  font-weight: 600;
+  color: var(--color-highlight);
+}
+.sidenav-group-toggle {
+  background: none;
+  border: none;
+  padding: 8px 14px 8px 8px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: flex;
+}
+.sidenav-group-header.active .sidenav-group-toggle {
+  color: var(--color-highlight);
+}
+.sidenav-group-toggle svg {
+  width: 15px;
+  height: 15px;
   display: block;
-  padding: 6px 16px;
+}
+.sidenav-subgroup {
+  display: flex;
+  flex-direction: column;
+  margin: 2px 0 6px 22px;
+  border-left: 1px solid var(--color-border);
+}
+.sidenav-body .sidenav-sub-item {
+  display: block;
+  padding: 6px 12px 6px 14px;
+  margin-left: -1px;
+  font-size: 0.84375rem;
   color: var(--color-menu-text);
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-left: 3px solid transparent;
+  border-left: 2px solid transparent;
 }
-.sidenav-body .sidenav-nav-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+.sidenav-body .sidenav-sub-item:hover {
+  background: var(--color-menu-hover-bg);
   color: var(--color-highlight);
 }
-.sidenav-body .sidenav-nav-item.active {
+.sidenav-body .sidenav-sub-item.active {
   border-left-color: var(--color-highlight);
   color: var(--color-highlight);
 }
-.sidenav-body .sidenav-nav-submenu {
-  padding-left: 32px;
-  font-style: italic;
-}
 .sidenav-icon-row {
   display: grid;
   grid-template-columns: repeat(3, auto);

{robotframework_dashboard-2.2.0 → robotframework_dashboard-2.4.0}/robotframework_dashboard/css/colors.css

@@ -3,8 +3,15 @@
   --color-card: #ffffff;
   --color-menu-text: var(--color-text);
   --color-highlight: #3451b2;
+  --color-on-highlight: #ffffff;
+  --color-highlight-tint: rgba(52, 81, 178, 0.07);
+  --color-track-bg: rgba(0, 0, 0, 0.07);
+  --color-track-border: rgba(0, 0, 0, 0.08);
+  --color-menu-hover-bg: rgba(0, 0, 0, 0.05);
   --color-text: #000000;
-  --color-text-muted: darkgrey;
+  --color-text-muted: #6c757d;
+  --color-text-disabled: #6c757d;
+  --color-popover-bg: #ffffff;
   --color-border: rgba(0, 0, 0, 0.175);
   --color-shadow-strong: rgba(0, 0, 0, 0.5);
   --color-shadow-soft: rgba(0, 0, 0, 0.3);
@@ -33,8 +40,15 @@
   --color-card: rgba(30, 41, 59, 0.9);
   --color-menu-text: var(--color-text);
   --color-highlight: #a8b1ff;
+  --color-on-highlight: #10192f;
+  --color-highlight-tint: rgba(168, 177, 255, 0.1);
+  --color-track-bg: rgba(255, 255, 255, 0.08);
+  --color-track-border: rgba(255, 255, 255, 0.12);
+  --color-menu-hover-bg: rgba(255, 255, 255, 0.06);
   --color-text: #eee;
   --color-text-muted: #9ca3af;
+  --color-text-disabled: #94a3b8;
+  --color-popover-bg: #1e293b;
   --color-border: rgba(255, 255, 255, 0.15);
   --color-shadow-strong: rgba(0, 0, 0, 0.5);
   --color-shadow-soft: rgba(0, 0, 0, 0.3);

robotframework_dashboard-2.4.0/robotframework_dashboard/css/components/01-cards.css

@@ -0,0 +1,78 @@
+/* The numbered prefix is the cascade order: these files are concatenated between
+   colors.css and dark.css in path order, so renaming one reorders the stylesheet. */
+
+.tooltip-popup {
+  position: fixed;
+  max-width: 360px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background-color: var(--color-tooltip-bg);
+  color: var(--color-tooltip-text);
+  box-shadow: 0 2px 8px var(--color-shadow-soft);
+  font-size: 0.95rem;
+  white-space: pre-line;
+  pointer-events: none;
+  z-index: 9999;
+  box-sizing: border-box;
+}
+
+.card {
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 20px var(--color-shadow-strong);
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+.overview-card > .card {
+  background: var(--color-card) !important;
+}
+
+.stats {
+  float: right;
+  text-align: right;
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.section-filters {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.75rem;
+  row-gap: 6px;
+}
+
+.section-filters .filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.container-fluid .form-check-input,
+#sectionFiltersModal .form-check-input {
+  margin-top: 6px;
+  position: static;
+}
+
+.fullscreen {
+  position: fixed !important;
+  width: 100% !important;
+  height: 100% !important;
+  left: 0 !important;
+  top: 0 !important;
+  z-index: 10 !important;
+  padding: 20px 20px 20px 20px !important;
+  border-radius: 0px !important;
+  background-color: var(--color-fullscreen-bg) !important;
+}
+
+.fullscreen .section-filters {
+  flex: 0 0 auto;
+}
+
+.fullscreen .graph-body {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+}

robotframework_dashboard-2.4.0/robotframework_dashboard/css/components/02-filters.css

@@ -0,0 +1,260 @@
+.dropdown-menu {
+  width: max-content;
+}
+
+.version-selected-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background-color: var(--color-version-dot);
+  border-radius: 50%;
+  margin-left: 5px;
+  margin-bottom: 2px;
+  vertical-align: middle;
+}
+
+.selectBox {
+  position: relative;
+}
+
+.selectBox select {
+  width: 100%;
+}
+
+.overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+/* The dropdown panel paints its own opaque surface: the rows inside it use
+   --color-card, which is semi-transparent in dark mode, so without this the modal rows
+   underneath the panel bleed through and nothing in the panel is readable. */
+.filterCheckBoxes {
+  display: none;
+  position: absolute;
+  z-index: 1056;
+  background-color: var(--color-popover-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  box-shadow: 0 0.5rem 1rem var(--color-shadow-soft);
+  padding: 0.25rem;
+}
+
+/* the wrapper of select + panel is the anchor, so a panel flipped by set_filter_dropdown_visible
+   sits directly on top of its select and shrinks towards it while the list is being searched */
+:has(> .filterCheckBoxes) {
+  position: relative;
+}
+
+.filterCheckBoxes.drop-up {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0 !important;
+  margin-bottom: 0.5rem;
+}
+
+.filterCheckBoxes .list-group-item {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.filterCheckBoxes label {
+  display: block;
+}
+
+/* the search box scrolls with the option list, so pin it to the top of the panel */
+.filterCheckBoxes > input.form-control,
+.filterCheckBoxes > .filter-search-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--color-popover-bg);
+}
+
+/* filter options that match no runs with the other filters applied: still visible and
+   selectable, only marked so it is clear they cannot add anything to the result. No
+   opacity: it dims the checkbox and the count as well, and it is ignored on <option>
+   elements in native select popups anyway. */
+.filter-option-unavailable {
+  color: var(--color-text-disabled);
+}
+
+li.filter-option-unavailable {
+  background-color: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
+}
+
+li.filter-option-unavailable > label.form-check-label {
+  color: var(--color-text-disabled);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* the count is the reason a row is greyed out, so it keeps full contrast and sits in its
+   own right-aligned column instead of trailing a label of arbitrary length */
+.filter-option-count {
+  color: var(--color-text-muted);
+  font-size: 0.85em;
+  margin-left: auto;
+  padding-left: 0.5rem;
+  flex: 0 0 auto;
+  font-variant-numeric: tabular-nums;
+}
+
+li.filter-option-unavailable > .filter-option-count {
+  font-weight: 600;
+}
+
+.filterCheckBoxes li.list-group-item > label.form-check-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-search-wrapper {
+  position: relative;
+}
+
+.filter-search-wrapper .form-control {
+  padding-right: 1.5rem;
+}
+
+.filter-search-clear {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0 0.15rem 0;
+  border: none;
+  background: none;
+  color: inherit;
+  opacity: 0.6;
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.filter-search-clear:hover {
+  opacity: 1;
+}
+
+.filter-profile-bar {
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.filter-profile-editor {
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.filter-profile-check {
+  flex-shrink: 0;
+}
+
+.filter-profile-delete {
+  opacity: 0.5;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0 0.3rem;
+}
+
+.filter-profile-delete:hover {
+  opacity: 1;
+}
+
+.date-histogram-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  /* the drag selection is a pointer gesture, so the browser may not claim it for panning */
+  touch-action: none;
+  cursor: crosshair;
+}
+
+.date-histogram-selection {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(54, 162, 235, 0.2);
+  border-left: 1px solid rgba(54, 162, 235, 0.8);
+  border-right: 1px solid rgba(54, 162, 235, 0.8);
+  pointer-events: none;
+}
+
+.date-histogram-bucket,
+.date-histogram-empty {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.date-range-row {
+  gap: 0.75rem 1.25rem;
+}
+
+.date-range-field {
+  flex: 0 0 auto;
+}
+
+.date-range-label {
+  margin-right: 0.5rem;
+  min-width: 2.5rem;
+}
+
+.date-range-input {
+  width: 150px;
+}
+
+/* shaped after the Chart.js tooltip the other graphs use, but an element of its own: the details
+   per run are taller than the chart and carry a colour per row, neither of which the tooltip on
+   the canvas can do */
+.date-histogram-tooltip {
+  position: absolute;
+  top: 8px;
+  z-index: 3;
+  max-width: 320px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  pointer-events: none;
+}
+
+.date-histogram-tooltip-title {
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.date-histogram-tooltip-run + .date-histogram-tooltip-run {
+  margin-top: 0.35rem;
+}
+
+.date-histogram-tooltip-run-name {
+  opacity: 0.85;
+}
+
+.date-histogram-tooltip-row {
+  display: flex;
+  align-items: center;
+}
+
+.date-histogram-tooltip-dot {
+  width: 9px;
+  height: 9px;
+  margin-right: 0.4rem;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.date-histogram-tooltip-empty,
+.date-histogram-tooltip-more {
+  opacity: 0.85;
+}