From 3b5a537bf07dd4340f247350236f0eb2122034b1 Mon Sep 17 00:00:00 2001
From: Jamie Rasmussen <jamie.rasmussen@wandb.com>
Date: Thu, 19 Dec 2024 01:39:52 -0600
Subject: [PATCH] chore(ui): replace circle icon

---
 .../pages/CompareEvaluationsPage/ecpConstants.ts   |  1 -
 .../EvaluationDefinition.tsx                       | 11 +----------
 .../ExampleCompareSection.tsx                      | 14 ++++----------
 3 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpConstants.ts b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpConstants.ts
index 1d09d64a13c..71bf0731c4f 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/ecpConstants.ts
+++ b/weave-js/src/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/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
index 5dcf835e378..a5a92d931e8 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/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/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
index 398f65ecd45..03dfebafd80 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ExampleCompareSection/ExampleCompareSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/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>