fix: renterd gpu, map colors

SiaFoundation · Aug 21, 2023 · b8a5a3b · b8a5a3b
1 parent 73e7297
commit b8a5a3b
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 27 deletions.
diff --git a/apps/renterd/components/Hosts/HostMap/Globe.tsx b/apps/renterd/components/Hosts/HostMap/Globe.tsx
@@ -166,11 +166,11 @@ export function Globe({
         }}
         pointsTransitionDuration={0}
         pointColor={(h: HostDataWithLocation) => {
-          const { color } = getHostStatus(h)
+          const { colorHex } = getHostStatus(h)
           if (!activeHost || h.publicKey === activeHost?.publicKey) {
-            return color
+            return colorHex
           }
-          return colorWithOpacity(color, 0.2)
+          return colorWithOpacity(colorHex, 0.2)
         }}
         pointRadius={(h: HostDataWithLocation) => {
           let radius = 0

diff --git a/apps/renterd/components/Hosts/HostMap/index.tsx b/apps/renterd/components/Hosts/HostMap/index.tsx
@@ -3,6 +3,7 @@ import { Globe } from './Globe'
 import { useHosts } from '../../../contexts/hosts'
 import { HostDataWithLocation } from '../../../contexts/hosts/types'
 import { DataLabel } from '@siafoundation/design-system'
+import { hostColors } from '../../../contexts/hosts/status'
 
 export function HostMap() {
   const { gpu } = useAppSettings()
@@ -13,17 +14,13 @@ export function HostMap() {
     onHostMapHover: onHostHover,
     hostsWithLocation,
   } = useHosts()
-  if (!(gpu.hasCheckedGpu && gpu.shouldRender)) {
+
+  if (!gpu.shouldRender) {
     return null
   }
 
   return (
     <div className="w-full h-full">
-      <div className="absolute top-5 left-5 flex gap-4">
-        <DataLabel color="blue" label="Active & usable" />
-        <DataLabel color="red" label="Active & unusable" />
-        <DataLabel color="green" label="Potential host" />
-      </div>
       <Globe
         activeHost={
           activeHost?.location
@@ -37,6 +34,23 @@ export function HostMap() {
           setCmd(cmd)
         }}
       />
+      <div className="absolute top-5 left-6 flex flex-col gap-1">
+        <DataLabel
+          color={hostColors.activeAndUsable.colorHex}
+          label="Active contract & usable"
+          size="12"
+        />
+        <DataLabel
+          color={hostColors.activeAndUnusable.colorHex}
+          label="Active contract & unusable"
+          size="12"
+        />
+        <DataLabel
+          color={hostColors.potentialHost.colorHex}
+          label="No active contract"
+          size="12"
+        />
+      </div>
     </div>
   )
 }
diff --git a/apps/renterd/components/Hosts/HostsActionsMenu.tsx b/apps/renterd/components/Hosts/HostsActionsMenu.tsx
@@ -1,4 +1,9 @@
-import { Button, Earth16, ListChecked16 } from '@siafoundation/design-system'
+import {
+  Button,
+  Earth16,
+  ListChecked16,
+  Tooltip,
+} from '@siafoundation/design-system'
 import { HostsViewDropdownMenu } from './HostsViewDropdownMenu'
 import { useDialog } from '../../contexts/dialog'
 import { useHosts } from '../../contexts/hosts'
@@ -17,14 +22,26 @@ export function HostsActionsMenu() {
         <ListChecked16 />
         Manage lists
       </Button>
-      {gpu.canGpuRender && (
+      <Tooltip
+        content={
+          gpu.canGpuRender && gpu.isGpuEnabled
+            ? 'Toggle interactive map'
+            : 'Enable GPU to view interactive map'
+        }
+      >
         <Button
-          onClick={() => setViewMode(viewMode === 'map' ? 'list' : 'map')}
-          tip="Toggle interactive map"
+          disabled={!gpu.canGpuRender}
+          onClick={() => {
+            if (gpu.isGpuEnabled) {
+              setViewMode(viewMode === 'map' ? 'list' : 'map')
+            } else {
+              openDialog('settings')
+            }
+          }}
         >
           <Earth16 />
         </Button>
-      )}
+      </Tooltip>
       <HostsViewDropdownMenu />
     </div>
   )

diff --git a/apps/renterd/components/Hosts/index.tsx b/apps/renterd/components/Hosts/index.tsx
@@ -9,6 +9,7 @@ import { HostsActionsMenu } from './HostsActionsMenu'
 import { HostsFilterBar } from './HostsFilterBar'
 import { HostMap } from './HostMap'
 import { cx } from 'class-variance-authority'
+import { getHostStatus } from '../../contexts/hosts/status'
 
 export function Hosts() {
   const { openDialog } = useDialog()
@@ -69,11 +70,7 @@ export function Hosts() {
               <Table
                 focusId={activeHost?.publicKey}
                 focusColor={
-                  activeHost?.activeContractsCount.gt(0) && !activeHost?.usable
-                    ? 'red'
-                    : activeHost?.activeContractsCount.gt(0)
-                    ? 'blue'
-                    : 'green'
+                  activeHost ? getHostStatus(activeHost).colorName : undefined
                 }
                 isLoading={dataState === 'loading'}
                 emptyState={<StateEmpty />}

diff --git a/apps/renterd/contexts/hosts/status.ts b/apps/renterd/contexts/hosts/status.ts
@@ -1,25 +1,40 @@
 import { colors } from '@siafoundation/design-system'
 import { HostData } from './types'
 
+export const hostColors = {
+  activeAndUsable: {
+    colorHex: colors.green[600],
+    colorName: 'green',
+  },
+  activeAndUnusable: {
+    colorHex: colors.amber[600],
+    colorName: 'amber',
+  },
+  potentialHost: {
+    colorHex: colors.blue[600],
+    colorName: 'blue',
+  },
+} as const
+
 export function getHostStatus(h: HostData) {
   // red
   if (h.activeContractsCount.gt(0) && !h.usable) {
     return {
       status: 'activeAndUnusable',
-      color: colors.red[600],
+      ...hostColors.activeAndUnusable,
     }
   }
   // blue
   if (h.activeContractsCount.gt(0)) {
     return {
       status: 'activeAndUsable',
-      color: colors.blue[600],
+      ...hostColors.activeAndUsable,
     }
   }
   // green
   return {
     status: 'potentialHost',
-    color: colors.green[600],
+    ...hostColors.potentialHost,
   }
 }
 

diff --git a/libs/design-system/src/app/DataLabel.tsx b/libs/design-system/src/app/DataLabel.tsx
@@ -7,9 +7,16 @@ type Props = {
   enabled?: boolean
   onChange?: (val: boolean) => void
   color?: string
+  size?: React.ComponentProps<typeof Text>['size']
 }
 
-export function DataLabel({ label, enabled = true, onChange, color }: Props) {
+export function DataLabel({
+  size,
+  label,
+  enabled = true,
+  onChange,
+  color,
+}: Props) {
   return (
     <div
       className={cx(
@@ -25,7 +32,7 @@ export function DataLabel({ label, enabled = true, onChange, color }: Props) {
           <Status style={{ backgroundColor: color }} />
         </div>
       )}
-      <Text>{label}</Text>
+      <Text size={size}>{label}</Text>
     </div>
   )
 }
diff --git a/libs/design-system/src/app/SettingsDialog.tsx b/libs/design-system/src/app/SettingsDialog.tsx
@@ -31,7 +31,7 @@ export function SettingsDialog({
   showSiaStats = true,
   securityEl,
 }: Props) {
-  const { settings, setSettings, setCurrency, currencyOptions } =
+  const { settings, setSettings, setCurrency, currencyOptions, gpu } =
     useAppSettings()
 
   return (
@@ -95,6 +95,30 @@ export function SettingsDialog({
                 </Paragraph>
               </div>
             </Alert>
+            <Alert>
+              <div className="flex flex-col gap-4">
+                <div className="flex gap-2 items-center">
+                  <Text>
+                    <Information16 />
+                  </Text>
+                  <Heading size="20" className="flex-1">
+                    GPU
+                  </Heading>
+                  <Switch
+                    disabled={!gpu.canGpuRender}
+                    checked={gpu.canGpuRender && gpu.isGpuEnabled}
+                    onCheckedChange={gpu.setIsGpuEnabled}
+                    size="medium"
+                  />
+                </div>
+                <Paragraph size="14">
+                  Enable features that require a GPU.{' '}
+                  {!gpu.canGpuRender
+                    ? ''
+                    : 'This device does not support GPU rendering.'}
+                </Paragraph>
+              </div>
+            </Alert>
           </div>
         </div>
         <Separator className="w-full" />

diff --git a/libs/design-system/src/components/Table.tsx b/libs/design-system/src/components/Table.tsx
@@ -47,7 +47,7 @@ type Props<
   isLoading: boolean
   emptyState?: React.ReactNode
   focusId?: string
-  focusColor?: 'green' | 'red' | 'blue' | 'default'
+  focusColor?: 'green' | 'red' | 'amber' | 'blue' | 'default'
 }
 
 export function Table<
@@ -236,6 +236,9 @@ export function Table<
                         focusColor === 'red'
                           ? '!shadow-red-500 dark:!shadow-red-400'
                           : '',
+                        focusColor === 'amber'
+                          ? '!shadow-amber-500 dark:!shadow-amber-500'
+                          : '',
                         focusColor === 'green'
                           ? '!shadow-green-500 dark:!shadow-green-400'
                           : ''

diff --git a/libs/react-core/src/useAppSettings/useGpuFeatures.tsx b/libs/react-core/src/useAppSettings/useGpuFeatures.tsx
@@ -54,11 +54,16 @@ export function useGpuFeatures() {
   const shouldRender = canGpuRender && isGpuEnabled
 
   return {
+    // has the GPU been evaluated
     hasCheckedGpu,
+    // does the GPU have the ability to render at all
     canGpuRender,
+    // is the GPU currently enabled by default or the user
     isGpuEnabled,
+    // if the GPU has the ability and is currently enabled
+    shouldRender,
+
     setCanGpuRender,
     setIsGpuEnabled,
-    shouldRender,
   }
 }