Revert "use heatmap in order to render test suite detailed dashboar…

…d panel"

This reverts commit 2e976a4.

src/evidently/ui/dashboards/test_suites.py

@@ -130,7 +130,6 @@ def _create_aggregate_fig(self, points: TestResultPoints):
             layout={"showlegend": True},
         )
         fig.update_layout(barmode="stack")
-        fig.update_xaxes(type="category")
         return fig
 
     def _create_detailed_fig(self, points: TestResultPoints):
@@ -139,53 +138,34 @@ def _create_detailed_fig(self, points: TestResultPoints):
         tests = list(all_tests)
         hover_params = _get_hover_params(all_tests)
 
-        def get_customdata(test: Test, date):
+        def get_description(test: Test, date):
             test_info = points[date][test]
             description = test_info.description
             description, _ = descr_re.subn(r".<br>\g<1>", description)
-
             return {
-                "test_name": test.name,
-                "params": "<br>".join(hover_params[test]),
                 "description": description,
                 "test_fingerprint": test.get_fingerprint(),
                 "snapshot_id": str(test_info.snapshot_id),
             }
 
-        TEST_2_Z: Dict[TestStatus, float] = {
-            TestStatus.ERROR: 0.0,
-            TestStatus.FAIL: 0.25,
-            TestStatus.WARNING: 0.5,
-            TestStatus.SUCCESS: 0.75,
-            TestStatus.SKIPPED: 1.0,
-        }
-
-        def get_z_value(test, date) -> float:
+        def get_color(test, date) -> Optional[str]:
             ti = points[date].get(test)
-            default = TEST_2_Z[TestStatus.SKIPPED]
-
             if ti is None:
-                return default
-
-            return TEST_2_Z.get(ti.status) or default
+                return TEST_COLORS[TestStatus.SKIPPED]
+            return TEST_COLORS.get(ti.status)
 
         fig = go.Figure(
             data=[
-                go.Heatmap(
+                go.Bar(
                     name="",
                     x=dates,
-                    y=[i for i in range(len(tests))],
-                    z=[[get_z_value(test, date) for date in dates] for test in tests],
-                    hovertemplate=_get_test_hover(),
-                    customdata=[[get_customdata(test, date) for date in dates] for test in tests],
+                    y=[1 for _ in range(len(dates))],
+                    marker_color=[get_color(test, d) for d in dates],
+                    hovertemplate=_get_test_hover(test.name, hover_params[test]),
+                    customdata=[get_description(test, d) for i, d in enumerate(dates)],
                     showlegend=False,
-                    showscale=False,
-                    colorscale=[[z, TEST_COLORS[status]] for status, z in TEST_2_Z.items()],
-                    xgap=1,
-                    ygap=0.5,
-                    zmin=0,
-                    zmax=1,
                 )
+                for test in tests
             ]
             + [
                 go.Scatter(
@@ -199,10 +179,12 @@ def get_z_value(test, date) -> float:
             ],
             layout={"showlegend": True},
         )
-
+        fig.update_layout(
+            barmode="stack",
+            bargap=0.01,
+            barnorm="fraction",
+        )
         fig.update_yaxes(showticklabels=False)
-        fig.update_xaxes(type="category")
-
         return fig
 
 

src/evidently/ui/dashboards/utils.py

@@ -156,6 +156,7 @@ def _get_hover_params(items: Set[TMT]) -> Dict[TMT, List[str]]:
 tests_colors_order = {ts: i for i, ts in enumerate(TEST_COLORS)}
 
 
-def _get_test_hover():
-    hover = "<b>Timestamp: %{x}</b><br><b>%{customdata.test_name}</b><br>%{customdata.params}<br>%{customdata.description}<br>"
+def _get_test_hover(test_name: str, params: List[str]):
+    params_join = "<br>".join(params)
+    hover = f"<b>Timestamp: %{{x}}</b><br><b>{test_name}</b><br>{params_join}<br>%{{customdata.description}}<br>"
     return hover

ui/packages/evidently-ui-lib/src/widgets/BigGraphWidgetContent.tsx

@@ -67,8 +67,7 @@ const BigGraphWidgetContent: React.FunctionComponent<BigGraphWidgetProps> = (pro
             },
             // text: [],
             // textposition: 'top center',
-            name: `selected point <br>${clickEvent.points[0].x}${props.data.every((e) => e.type !== 'heatmap') ? `: ${roundPoint2Digit(clickEvent.points[0].y)}` : ''}`,
-            hoverinfo: 'skip'
+            name: `selected point <br>${clickEvent.points[0].x}: ${roundPoint2Digit(clickEvent.points[0].y)}`
           } satisfies Plotly.Data
         ]
       : []