Polish cluster's tables styles

discoveryjs · Mar 29, 2024 · 8098478 · 8098478
1 parent 311497d
commit 8098478
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 33 deletions.
diff --git a/app/pages/common.css b/app/pages/common.css
@@ -123,7 +123,7 @@ h2 .logo {
 
 .page > .view-expand.trigger-outside > .header {
     --discovery-view-expand-trigger-size: calc(var(--discovery-page-padding-left) - 2px);
-    margin-right: calc(-1 * var(--discovery-page-padding-right));
+    margin-right: calc(-1 * var(--discovery-page-padding-right) + 1px);
 }
 
 .table-content-filter > .view-input {

diff --git a/app/pages/default.css b/app/pages/default.css
@@ -141,6 +141,9 @@
     padding: 0;
     margin-left: 1px;
 }
+.page-default .view-expand.timelines > .header:hover > .header-content {
+    filter: brightness(1.1);
+}
 .page-default .view-expand.timelines > .header .view-timing-bar-segment {
     border-left-width: 0;
     padding-top: 3px;
@@ -219,31 +222,55 @@
     border-top: 1px solid #0004;
 }
 
+.page-default .hierarchical-components > .header > .header-content {
+    display: flex;
+    flex-direction: row;
+    padding: 0 2px 0 0;
+}
+.page-default .hierarchical-components > .header > .header-content > .view-block:first-child {
+    max-width: calc((100% + var(--discovery-page-padding-left)) / 3 - var(--discovery-page-padding-left) + 2px);
+    box-sizing: border-box;
+    border: none;
+}
+.page-default .hierarchical-components > .header > .header-content > .view-block {
+    flex: 1;
+    padding: 2px 8px;
+    border-left: 1px solid var(--discovery-background-color);
+}
+.page-default .hierarchical-components > .header > .header-content .view-text-numeric {
+    display: inline-block;
+    padding-left: .65ex;
+    color: #9ea867;
+}
+
 .page-default .hierarchical-components > .content {
     display: flex;
     flex-direction: row;
-    gap: 10px;
-    margin-bottom: 8px;
-    margin-left: calc(10px - var(--discovery-page-padding-left));
-    margin-right: calc(10px - var(--discovery-page-padding-right));
+    gap: 6px;
+    margin-bottom: 5px;
+    margin-left: calc(5px - var(--discovery-page-padding-left));
+    margin-right: calc(5px - var(--discovery-page-padding-right));
 }
 .page-default .hierarchical-components > .content .view-section {
     flex: 1;
     display: flex;
     flex-direction: column;
-    overflow: clip;
+    overflow: hidden;
     margin-bottom: 0;
 }
 .page-default .hierarchical-components > .content .view-section > .view-header {
-    margin: 0;
-    padding-left: 2px;
-    font-size: inherit;
+    display: none;
 }
 .page-default .hierarchical-components > .content .view-section > .view-content-filter {
     display: contents;
 }
 .page-default .hierarchical-components > .content .view-section > .view-content-filter > .view-input {
-    margin: 4px 0 1px;
+    margin: 4px 0 2px;
+}
+.page-default .hierarchical-components > .content .view-section > .view-content-filter > .view-input input {
+    padding: 4px 6px;
+    border-radius: 0;
+    box-shadow: none !important;
 }
 .page-default .hierarchical-components > .content .view-section > .view-content-filter > .content {
     overflow: auto;
@@ -259,3 +286,6 @@
 .page-default .hierarchical-components > .content .view-section .view-table .view-table-cell.main {
     width: 100%;
 }
+.page-default .hierarchical-components > .content .view-section .view-table .view-duration .time {
+    min-width: calc(var(--total-time-digits) * 1ex + 3.5ex);
+}
diff --git a/app/pages/default.js b/app/pages/default.js
@@ -214,13 +214,7 @@ const areasTimeline = {
 const packagesList = {
     view: 'section',
     data: 'packagesTimingsFiltered',
-    header: [
-        'text:"Packages "',
-        {
-            view: 'update-on-timings-change',
-            content: { view: 'pill-badge', content: 'text-numeric:entries.[totalTime].size()' }
-        }
-    ],
+    header: [],
     content: {
         view: 'content-filter',
         content: {
@@ -243,13 +237,7 @@ const packagesList = {
 const modulesList = {
     view: 'section',
     data: 'modulesTimingsFiltered',
-    header: [
-        'text:"Modules "',
-        {
-            view: 'update-on-timings-change',
-            content: { view: 'pill-badge', content: 'text-numeric:entries.[totalTime].size()' }
-        }
-    ],
+    header: [],
     content: {
         view: 'content-filter',
         content: {
@@ -275,13 +263,7 @@ const modulesList = {
 const functionList = {
     view: 'section',
     data: 'functionsTimingsFiltered',
-    header: [
-        'text:"Functions "',
-        {
-            view: 'update-on-timings-change',
-            content: { view: 'pill-badge', content: 'text-numeric:entries.[totalTime].size()' }
-        }
-    ],
+    header: [],
     content: {
         view: 'content-filter',
         content: {
@@ -436,7 +418,34 @@ discovery.page.define('default', {
                 view: 'expand',
                 expanded: true,
                 className: 'hierarchical-components trigger-outside',
-                header: 'text:"Hierarchical components"',
+                postRender: (el, config, data, context) =>
+                    el.style.setProperty('--total-time-digits', String(context.data.totalTime).replace(/\D/g, '').length - 2),
+                header: [
+                    { view: 'block', content: [
+                        'text:"Packages "',
+                        {
+                            view: 'update-on-timings-change',
+                            data: 'packagesTimingsFiltered',
+                            content: 'text-numeric:entries.[totalTime].size()'
+                        }
+                    ] },
+                    { view: 'block', content: [
+                        'text:"Modules "',
+                        {
+                            view: 'update-on-timings-change',
+                            data: 'modulesTimingsFiltered',
+                            content: 'text-numeric:entries.[totalTime].size()'
+                        }
+                    ] },
+                    { view: 'block', content: [
+                        'text:"Functions "',
+                        {
+                            view: 'update-on-timings-change',
+                            data: 'functionsTimingsFiltered',
+                            content: 'text-numeric:entries.[totalTime].size()'
+                        }
+                    ] }
+                ],
                 content: [
                     packagesList,
                     modulesList,

diff --git a/app/views/duration.css b/app/views/duration.css
@@ -17,6 +17,12 @@
 .view-duration > .time {
     flex: 1;
 }
+.view-duration > .time::after {
+    content: 'ms';
+    color: #787878;
+    font-size: 90%;
+    padding-left: 1px;
+}
 
 .view-duration > .fraction {
     width: 3em;

diff --git a/app/views/duration.js b/app/views/duration.js
@@ -9,7 +9,7 @@ function formatDuration(time) {
             ? time.toFixed(1).replace(/\..+$|\B(?=(\d{3})+(\D|$))/g, m => m || delim)
             : time.toFixed(1);
 
-    return `${number}${delim}ms`;
+    return `${number}${delim}`;
 }
 
 discovery.view.define('duration', function(el, config, { time, total }) {