chore(ui): replace circle icon (#3292)

wandb · Jan 7, 2025 · 5a61b84 · 5a61b84
1 parent e4003bf
commit 5a61b84
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 21 deletions.
diff --git a/.../components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpConstants.ts b/.../components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpConstants.ts
@@ -2,7 +2,6 @@ import {MOON_300} from '../../../../../../common/css/color.styles';
 
 export const EVAL_DEF_HEIGHT = 45;
 export const STANDARD_PADDING = 16;
-export const CIRCLE_SIZE = '16px';
 export const BOX_RADIUS = '6px';
 export const STANDARD_BORDER = `1px solid ${MOON_300}`;
 export const PLOT_HEIGHT = 300;

diff --git a/...ages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx b/...ages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
@@ -1,5 +1,4 @@
 import {Box} from '@material-ui/core';
-import {Circle} from '@mui/icons-material';
 import React, {useMemo} from 'react';
 
 import {
@@ -14,7 +13,6 @@ import {SmallRef} from '../../../../../Browse2/SmallRef';
 import {CallLink, ObjectVersionLink} from '../../../common/Links';
 import {useWFHooks} from '../../../wfReactInterface/context';
 import {ObjectVersionKey} from '../../../wfReactInterface/wfDataModelHooksInterface';
-import {CIRCLE_SIZE} from '../../ecpConstants';
 import {EvaluationComparisonState} from '../../ecpState';
 
 export const EvaluationCallLink: React.FC<{
@@ -33,14 +31,7 @@ export const EvaluationCallLink: React.FC<{
       projectName={project}
       opName={evaluationCall.name}
       callId={props.callId}
-      icon={
-        <Circle
-          sx={{
-            color: evaluationCall.color,
-            height: CIRCLE_SIZE,
-          }}
-        />
-      }
+      icon={<Icon name="filled-circle" color={evaluationCall.color} />}
       color={MOON_800}
     />
   );

diff --git a/...se3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx b/...se3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
@@ -1,5 +1,5 @@
 import {Box, Tooltip} from '@material-ui/core';
-import {Circle, WarningAmberOutlined} from '@mui/icons-material';
+import {WarningAmberOutlined} from '@mui/icons-material';
 import _ from 'lodash';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import styled from 'styled-components';
@@ -16,6 +16,7 @@ import {
   WeaveObjectRef,
 } from '../../../../../../../../react';
 import {Button} from '../../../../../../../Button';
+import {Icon} from '../../../../../../../Icon';
 import {CellValue} from '../../../../../Browse2/CellValue';
 import {NotApplicable} from '../../../../../Browse2/NotApplicable';
 import {SmallRef} from '../../../../../Browse2/SmallRef';
@@ -31,7 +32,7 @@ import {
   DERIVED_SCORER_REF_PLACEHOLDER,
   resolvePeerDimension,
 } from '../../compositeMetricsUtil';
-import {CIRCLE_SIZE, SIGNIFICANT_DIGITS} from '../../ecpConstants';
+import {SIGNIFICANT_DIGITS} from '../../ecpConstants';
 import {EvaluationComparisonState} from '../../ecpState';
 import {MetricDefinition, MetricValueType} from '../../ecpTypes';
 import {
@@ -495,14 +496,7 @@ export const ExampleCompareSection: React.FC<{
             projectName={trialProject}
             opName={trialOpName}
             callId={trialCallId}
-            icon={
-              <Circle
-                sx={{
-                  color: evaluationCall.color,
-                  height: CIRCLE_SIZE,
-                }}
-              />
-            }
+            icon={<Icon name="filled-circle" color={evaluationCall.color} />}
             color={MOON_800}
           />
         </Box>