fix: power levels adjustments (#1007)

We need to: Fix the overlapping marker and labels Change slider to % increments but say x of y cores or x of y threads on slider description so that it communicates both a % progress and the core/thread increments Revise the save state to be explicit, since it takes about 30 seconds to apply It currently defaults to 1 irrespective of whether Eco or Ludicrous is set, which is confusing: it should default to whatever the user had selected (the Eco level or the Ludicrous level) ________________ https://www.loom.com/share/9e7dc4c1123c4701b8032c55a2861f83 Fixes: #1016 --------- Co-authored-by: Brian Pearce <[email protected]>
tari-project · Nov 6, 2024 · 7e5e99c · 7e5e99c
1 parent 84bcdc5
commit 7e5e99c
Show file tree

Hide file tree

Showing 4 changed files with 198 additions and 104 deletions.
diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
@@ -12,11 +12,11 @@
   "custom-power-levels": {
     "title": "Custom Mode",
     "warning": "Warning",
-    "saved": "Changes saved!",
+    "saved": "Applying Changes",
     "gpu-power-level": "GPU Power %",
     "cpu-power-level": "CPU Cores",
-    "choose-gpu-power-level": "Choose how many threads you want your GPU to allocat to mining",
-    "choose-cpu-power-level": "Choose how many cores from your CPU to be allocated to mining",
+    "choose-gpu-power-level": "Choose how much you want your GPU to be allocated to mining <span>({{current}} out of {{max}} threads)</span>",
+    "choose-cpu-power-level": "Choose how much you want your CPU to be allocated to mining <span>({{current}} out of {{max}} cores)</span>",
     "cpu-warning": "High CPU usage can cause overheating, increase energy consumption, and may lead to hardware damage over time. Please monitor usage to ensure safe and efficient operation.",
     "gpu-warning": "High GPU usage can cause overheating, increase energy consumption, and may lead to hardware damage over time. Please monitor usage to ensure safe and efficient operation."
   },
@@ -127,4 +127,4 @@
   "yes": "Yes",
   "your-feedback": "Describe your issue, including your Telegram handle if you have one, so that we can contact you with updates.",
   "your-reference": "Your reference:<br/><bold>{{logRef}}</bold>"
-}
+}
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -173,13 +173,13 @@ async fn set_mode(
     let timer = Instant::now();
     info!(target: LOG_TARGET, "set_mode called with mode: {:?}, custom_max_cpu_usage: {:?}, custom_max_gpu_usage: {:?}", mode, custom_cpu_usage, custom_gpu_usage);
 
-    fn f64_to_isize_safe(_value: Option<f64>) -> Option<isize> {
-        let value = _value.unwrap_or(-1.0);
+    fn f64_to_isize_safe(value: Option<f64>) -> Option<isize> {
+        let value = value.unwrap_or_default();
         if value.is_finite() && value >= isize::MIN as f64 && value <= isize::MAX as f64 {
             #[allow(clippy::cast_possible_truncation)]
             Some(value.round() as isize)
         } else {
-            warn!(target: LOG_TARGET, "Invalid value for custom_cpu_usage or custom_gpu_usage: {:?}", _value);
+            warn!(target: LOG_TARGET, "Invalid value for custom_cpu_usage or custom_gpu_usage: {:?}", value);
             None
         }
     }

diff --git a/src/containers/SideBar/Miner/components/CustomPowerLevelsDialog.styles.ts b/src/containers/SideBar/Miner/components/CustomPowerLevelsDialog.styles.ts
@@ -1,5 +1,8 @@
 import styled, { css } from 'styled-components';
 
+export const SLIDER_WIDTH = 570;
+export const SLIDER_THUMB_WIDTH = 30;
+
 export const CustomLevelsContent = styled.div`
     padding: 15px 15px 35px;
     margin-top: 10px;
@@ -17,20 +20,21 @@ export const RangeInput = styled.input`
     width: 100%;
     height: 9px;
     border-radius: 5px;
-    background: #813bf5;
+    background: #ddd;
     outline: none;
     -webkit-transition: 0.2s;
     transition: opacity 0.2s;
-    width: 600px;
+    width: ${SLIDER_WIDTH}px;
 
     &::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
-        width: 30px;
-        height: 30px;
+        width: ${SLIDER_THUMB_WIDTH}px;
+        height: ${SLIDER_THUMB_WIDTH}px;
         border-radius: 50%;
         background: white;
         border: 2px solid #813bf5;
+        z-index: 10;
         cursor: pointer;
         transition: background 0.15s ease-in-out;
     }
@@ -53,6 +57,7 @@ export const RangeLabel = styled.label`
     align-items: center;
     font-size: 14px;
     font-family: Poppins, sans-serif;
+    padding-bottom: 10px;
 `;
 
 export const InputDescription = styled.div`
@@ -62,6 +67,10 @@ export const InputDescription = styled.div`
     font-size: 12px;
     font-family: Poppins, sans-serif;
     color: #6c6d8a;
+    padding-bottom: 10px;
+    span {
+        font-weight: bold;
+    }
 `;
 
 export const RangeIntputWrapper = styled.div`
@@ -97,7 +106,7 @@ export const RangeValueHolder = styled.div`
     color: #fff;
     justify-content: center;
     align-items: center;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateZ(0);
     background: #813bf5;
     position: absolute;
     min-width: 20px;
@@ -119,14 +128,23 @@ export const RangeValueHolder = styled.div`
     }
 `;
 
-export const IconImage = styled.img<{ $left: number }>`
-    width: 20px;
-    height: 20px;
+export const PerformanceMarker = styled.div<{ $red?: boolean }>`
     position: absolute;
-    top: -20px;
-    left: ${({ $left }) => `
-         ${$left}%
-    `};
+    transform: translateX(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+
+    z-index: 3;
+
+    top: 8px;
+
+    background: #62cc32;
+    ${({ $red }) =>
+        $red &&
+        css`
+            background: #ff0000;
+        `}
 `;
 
 export const WarningContainer = styled.div<{ $visible: boolean }>`
@@ -145,7 +163,7 @@ export const WarningContainer = styled.div<{ $visible: boolean }>`
     ${({ $visible }) =>
         $visible &&
         css`
-            opacity: 1;
+            opacity: 0.7;
             padding: 8px 15px;
             height: 50px;
         `}