feat(hygiene-issues): add summary counts component

Author: aarthy-dk

testgen/ui/assets/style.css

@@ -253,6 +253,10 @@ div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="st
     justify-content: center;
 }
 
+.stVerticalBlock:has(> div.stElementContainer > div.stHtml > i.flex-end) {
+    flex-wrap: wrap;
+}
+
 .stVerticalBlock:has(> div.stElementContainer > div.stHtml > i.no-flex-gap) {
     gap: unset;
 }
@@ -439,6 +443,45 @@ div[data-testid="stPopoverBody"]:has(i.tg-header--help-wrapper) {
 }
 /*  */
 
+/* Summary counts component */
+.tg-summary-counts--label {
+    margin-bottom: 4px;
+}
+
+.tg-summary-counts {
+    height: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 16px;
+}
+
+.tg-summary-counts--item {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+    gap: 8px;
+}
+
+.tg-summary-counts--bar {
+    width: 4px;
+}
+
+.tg-summary-counts--value {
+    line-height: 1.2;
+}
+
+.tg-summary-counts--value > div:first-child {
+    color: var(--caption-text-color);
+    font-size: 12px;
+}
+
+.tg-summary-counts--value > div:last-child {
+    font-size: 16px;
+}
+/*  */
+
 /* Export Menu */
 .st-key-tg--export-popover [data-testid="stPopoverButton"] > div:last-child {
     display: none;

testgen/ui/components/frontend/js/components/summary_counts.js

@@ -0,0 +1,45 @@
+/**
+ * @typedef SummaryItem
+ * @type {object}
+ * @property {string} value
+ * @property {string} color
+ * @property {string} label
+ * 
+ * @typedef Properties
+ * @type {object}
+ * @property {Array.<SummaryItem>} items
+ */
+import van from '../van.min.js';
+import { getValue, loadStylesheet } from '../utils.js';
+import { colorMap, formatNumber } from '../display_utils.js';
+
+const { div } = van.tags;
+
+const SummaryCounts = (/** @type Properties */ props) => {
+    loadStylesheet('summaryCounts', stylesheet);
+
+    return div(
+        { class: 'flex-row fx-gap-5' },
+        getValue(props.items).map(item => div(
+            { class: 'flex-row fx-align-stretch fx-gap-2' },
+            div({ class: 'tg-summary-counts--bar', style: `background-color: ${colorMap[item.color] || item.color};` }),
+            div(
+                div({ class: 'text-caption' }, item.label),
+                div({ class: 'tg-summary-counts--count' }, formatNumber(item.value)),
+            )
+        )),
+    );
+};
+
+const stylesheet = new CSSStyleSheet();
+stylesheet.replace(`
+.tg-summary-counts--bar {
+    width: 4px;
+}
+
+.tg-summary-counts--count {
+    font-size: 16px;
+}
+`);
+
+export { SummaryCounts };

testgen/ui/components/frontend/js/pages/profiling_runs.js

@@ -34,7 +34,7 @@
  */
 import van from '../van.min.js';
 import { Tooltip } from '../components/tooltip.js';
-import { SummaryBar } from '../components/summary_bar.js';
+import { SummaryCounts } from '../components/summary_counts.js';
 import { Link } from '../components/link.js';
 import { Button } from '../components/button.js';
 import { Streamlit } from '../streamlit.js';
@@ -54,7 +54,7 @@ const ProfilingRuns = (/** @type Properties */ props) => {
     Streamlit.setFrameHeight(1);
     window.testgen.isPage = true;
 
-    const columns = ['5%', '15%', '20%', '20%', '30%', '10%'];
+    const columns = ['5%', '15%', '15%', '20%', '35%', '10%'];
     const userCanEdit = getValue(props.permissions)?.can_edit ?? false;
 
     const pageIndex = van.state(0);
@@ -300,23 +300,21 @@ const ProfilingRunItem = (
         ),
         div(
             { class: 'pr-3', style: `flex: ${columns[4]}` },
-            item.anomaly_ct ? SummaryBar({
+            item.anomaly_ct ? SummaryCounts({
                 items: [
                     { label: 'Definite', value: item.anomalies_definite_ct, color: 'red' },
                     { label: 'Likely', value: item.anomalies_likely_ct, color: 'orange' },
                     { label: 'Possible', value: item.anomalies_possible_ct, color: 'yellow' },
                     { label: 'Dismissed', value: item.anomalies_dismissed_ct, color: 'grey' },
                 ],
-                height: 3,
-                width: 350,
             }) : '--',
             item.anomaly_ct ? Link({
                 label: `View ${item.anomaly_ct} issues`,
                 href: 'profiling-runs:hygiene',
                 params: { 'run_id': item.profiling_run_id },
                 underline: true,
                 right_icon: 'chevron_right',
-                style: 'margin-top: 8px;',
+                style: 'margin-top: 4px;',
                 'data-testid': 'profiling-run-item-viewissues'
             }) : null,
         ),

testgen/ui/components/frontend/js/pages/project_dashboard.js

@@ -45,6 +45,7 @@ import { Link } from '../components/link.js';
 import { SummaryBar } from '../components/summary_bar.js';
 import { EmptyState, EMPTY_STATE_MESSAGE } from '../components/empty_state.js';
 import { ScoreMetric } from '../components/score_metric.js';
+import { SummaryCounts } from '../components/summary_counts.js';
 
 const { div, h3, hr, span } = van.tags;
 
@@ -163,8 +164,9 @@ const TableGroupLatestProfile = (/** @type TableGroupSummary */ tableGroup) => {
     const daysAgo = Math.round((new Date() - new Date(tableGroup.latest_profile_start * 1000)) / (1000 * 60 * 60 * 24));
 
     return div(
+        { class: 'flex-row tg-overview--row', style: 'width: calc(100% - 115px);' },
         div(
-            { class: 'flex-row fx-gap-1 mb-2' },
+            { class: 'flex-row fx-gap-2', style: 'flex: 1 1 50%;' },
             span('Latest profile:'),
             Link({
                 label: formatTimestamp(tableGroup.latest_profile_start),
@@ -174,7 +176,9 @@ const TableGroupLatestProfile = (/** @type TableGroupSummary */ tableGroup) => {
             daysAgo > staleProfileDays
                 ? span({ class: 'text-error' }, `(${daysAgo} days ago)`)
                 : null,
-            span('|'),
+        ),
+        div(
+            { class: 'flex-row fx-gap-5', style: 'flex: 1 1 50%;' },
             Link({
                 label: `${tableGroup.latest_anomalies_ct} hygiene issues`,
                 href: 'profiling-runs:hygiene',
@@ -183,19 +187,17 @@ const TableGroupLatestProfile = (/** @type TableGroupSummary */ tableGroup) => {
                 },
                 width: 150,
             }),
-        ),
-        tableGroup.latest_anomalies_ct
-            ? SummaryBar({
+            tableGroup.latest_anomalies_ct
+            ? SummaryCounts({
                 items: [
                     { label: 'Definite', value: parseInt(tableGroup.latest_anomalies_definite_ct), color: 'red' },
                     { label: 'Likely', value: parseInt(tableGroup.latest_anomalies_likely_ct), color: 'orange' },
                     { label: 'Possible', value: parseInt(tableGroup.latest_anomalies_possible_ct), color: 'yellow' },
                     { label: 'Dismissed', value: parseInt(tableGroup.latest_anomalies_dismissed_ct), color: 'grey' },
                 ],
-                height: 3,
-                width: 350,
             })
             : '',
+        ),
     );
 };
 

testgen/ui/components/widgets/__init__.py

@@ -24,6 +24,6 @@
 from testgen.ui.components.widgets.select import select
 from testgen.ui.components.widgets.sidebar import sidebar
 from testgen.ui.components.widgets.sorting_selector import sorting_selector
-from testgen.ui.components.widgets.summary_bar import summary_bar
+from testgen.ui.components.widgets.summary import summary_bar, summary_counts
 from testgen.ui.components.widgets.testgen_component import testgen_component
 from testgen.ui.components.widgets.wizard import WizardStep, wizard

testgen/ui/components/widgets/page.py

@@ -100,8 +100,8 @@ def flex_row_start(container: DeltaGenerator | None = None):
     _apply_html('<i class="flex-row flex-start"></i>', container)
 
 
-def flex_row_end(container: DeltaGenerator | None = None):
-    _apply_html('<i class="flex-row flex-end"></i>', container)
+def flex_row_end(container: DeltaGenerator | None = None, wrap: bool = False):
+    _apply_html(f'<i class="flex-row flex-end {"flex-wrap" if wrap else ""}"></i>', container)
 
 
 def flex_row_center(container: DeltaGenerator | None = None):

…gen/ui/components/widgets/summary_bar.py testgen/ui/components/widgets/summary.pytestgen/ui/components/widgets/summary_bar.py renamed to testgen/ui/components/widgets/summary.py testgen/ui/components/widgets/summary_bar.py renamed to testgen/ui/components/widgets/summary.py

@@ -26,7 +26,6 @@ def summary_bar(
     :param items: list of dicts with value, label, and color
     :param height: height of bar in pixels, default=24
     :param width: width of bar in pixels, default is 100% of parent
-    :param key: unique key to give the component a persisting state
     """
 
     label_div = ""
@@ -52,14 +51,61 @@ def summary_bar(
         """
 
     st.html(f"""
-            <div class="tg-summary-bar-wrapper">
+            <div>
                 {label_div}
                 <div class="tg-summary-bar" style="height: {height}px; max-width: {f'{width}px' if width else '100%'};">
                     {item_spans}
                 </div>
                 {caption_div}
             </div>
             """)
+    
+
+def summary_counts(
+    items: list["SummaryItem"],
+    label: str | None = None,
+) -> None:
+    """
+    Testgen component to display summary counts.
+
+    # Parameters
+    :param items: list of dicts with value, label, and color
+    """
+
+    label_div = ""
+    item_spans = ""
+    caption_div = ""
+
+    if label:
+        label_div = f"""
+        <div class="tg-summary-counts--label">
+        {label}
+        </div>
+        """
+
+    item_divs = "".join(
+        [
+            f"""
+            <div class="tg-summary-counts--item">
+                <div class="tg-summary-counts--bar" style="background-color: {COLOR_MAP.get(item["color"], item["color"])};"></div>
+                <div class="tg-summary-counts--value">
+                    <div>{item["label"]}</div>
+                    <div>{item["value"]}</div>
+                </div>
+            </div>
+            """
+            for item in items
+        ]
+    )
+
+    st.html(f"""
+    <div>
+        {label_div}
+        <div class="tg-summary-counts">
+            {item_divs}
+        </div>
+    </div>
+    """)
 
 
 class SummaryItem(typing.TypedDict):

testgen/ui/views/hygiene_issues.py

@@ -70,11 +70,11 @@ def render(
             ],
         )
 
-        others_summary_column, pii_summary_column, score_column, actions_column, export_button_column = st.columns([.2, .2, .15, .3, .15], vertical_alignment="bottom")
+        others_summary_column, pii_summary_column, score_column, actions_column, export_button_column = st.columns([.25, .2, .1, .3, .15], vertical_alignment="bottom")
         (liklihood_filter_column, table_filter_column, column_filter_column, issue_type_filter_column, action_filter_column, sort_column) = (
             st.columns([.2, .15, .2, .2, .15, .1], vertical_alignment="bottom")
         )
-        testgen.flex_row_end(actions_column)
+        testgen.flex_row_end(actions_column, wrap=True)
         testgen.flex_row_end(export_button_column)
 
         filters_changed = False
@@ -187,21 +187,17 @@ def render(
         summaries = get_profiling_anomaly_summary(run_id)
         others_summary = [summary for summary in summaries if summary.get("type") != "PII"]
         with others_summary_column:
-            testgen.summary_bar(
+            testgen.summary_counts(
                 items=others_summary,
                 label="Hygiene Issues",
-                height=20,
-                width=400,
             )
 
         anomalies_pii_summary = [summary for summary in summaries if summary.get("type") == "PII"]
         if anomalies_pii_summary:
             with pii_summary_column:
-                testgen.summary_bar(
+                testgen.summary_counts(
                     items=anomalies_pii_summary,
-                    label="Potential PII",
-                    height=20,
-                    width=400,
+                    label="Potential PII (Risk)",
                 )
 
         selected, selected_row = fm.render_grid_select(
@@ -525,8 +521,8 @@ def get_profiling_anomaly_summary(profile_run_id: str) -> list[dict]:
         { "label": "Likely", "value": result.likely_ct, "color": "orange" },
         { "label": "Possible", "value": result.possible_ct, "color": "yellow" },
         { "label": "Dismissed", "value": result.dismissed_ct, "color": "grey" },
-        { "label": "High Risk", "value": result.pii_high_ct, "color": "red", "type": "PII" },
-        { "label": "Moderate Risk", "value": result.pii_moderate_ct, "color": "orange", "type": "PII" },
+        { "label": "High", "value": result.pii_high_ct, "color": "red", "type": "PII" },
+        { "label": "Moderate", "value": result.pii_moderate_ct, "color": "orange", "type": "PII" },
         { "label": "Dismissed", "value": result.pii_dismissed_ct, "color": "grey", "type": "PII" },
     ]
 

testgen/ui/views/test_results.py

@@ -90,7 +90,7 @@ def render(
             [.175, .2, .2, .175, .15, .1], vertical_alignment="bottom"
         )
 
-        testgen.flex_row_end(actions_column)
+        testgen.flex_row_end(actions_column, wrap=True)
         testgen.flex_row_end(export_button_column)
 
         filters_changed = False