[fix] Fix regression line rendering issue on scatterplot exported ima…

…ge (#2157) * [fix] Fix issue with rendering applied regression line on exported scatter plot image
aimhubio · Sep 9, 2022 · dc6d44d · dc6d44d
1 parent 1abec74
commit dc6d44d
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Fixes:
+
+- Fix the regression line rendering issue on Scatter plot exported image (KaroMourad)
+
 ## 3.13.1 Sep 1, 2022
 
 - Add support for querying metrics by last value (mihran113)

diff --git a/aim/web/ui/src/components/ScatterPlot/styles.scss b/aim/web/ui/src/components/ScatterPlot/styles.scss
@@ -97,10 +97,4 @@
       opacity: 1;
     }
   }
-  .RegressionLine {
-    stroke-width: 2.2;
-    opacity: 1;
-    fill: none;
-    stroke: $error-color;
-  }
 }
diff --git a/aim/web/ui/src/components/kit/SelectDropdown/SelectDropdown.scss b/aim/web/ui/src/components/kit/SelectDropdown/SelectDropdown.scss
@@ -3,7 +3,6 @@
 .SelectDropdown {
   position: relative;
   &__popper {
-    z-index: 5;
     .MuiAutocomplete-groupLabel {
       color: $text-color-50;
       font-size: $text-sm;

diff --git a/aim/web/ui/src/components/kit/Slider/Slider.scss b/aim/web/ui/src/components/kit/Slider/Slider.scss
@@ -40,6 +40,10 @@
           font-weight: $font-600;
           color: $primary-color;
           transform: unset;
+          text-overflow: ellipsis;
+          max-width: 100%;
+          overflow: hidden;
+          padding: $space-xxxxs $space-xxxs;
         }
       }
       &.Mui-focusVisible {

diff --git a/aim/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWrapper.scss b/aim/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWrapper.scss
@@ -25,14 +25,10 @@
     background-color: $white;
   }
   &__depthSlider {
-    position: absolute;
     padding: 0;
-    z-index: 1;
     background-color: white;
     width: calc(100% - 2px);
     height: 1.75rem;
-    left: 1px;
-    bottom: 0;
     & > .Slider {
       width: 100%;
       max-width: 46rem;

diff --git a/aim/web/ui/src/utils/d3/drawScatterTrendline.ts b/aim/web/ui/src/utils/d3/drawScatterTrendline.ts
@@ -58,7 +58,10 @@ function drawScatterTrendline({
     .datum(regressionPoints)
     .classed('RegressionLine', true)
     .attr('clip-path', `url(#${nameKey}-lines-rect-clip-${index})`)
-    .attr('d', line);
+    .attr('d', line)
+    .attr('stroke-width', 2.2)
+    .attr('fill', 'none')
+    .attr('stroke', '#E64E48FF'); // error-color
 }
 
 export default drawScatterTrendline;