fix percentage metrics columns

Author: LevisNgigi

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -590,14 +590,30 @@ const config: ControlPanelConfig = {
                     )
                     .forEach((colname, index) => {
                       if (
-                        explore.form_data.metrics?.some(
-                          metric => getMetricLabel(metric) === colname,
-                        ) ||
+                        colname &&
+                        !colname.startsWith('%') &&
+                        colnames.includes(`%${colname}`) &&
                         explore.form_data.percent_metrics?.some(
                           (metric: QueryFormMetric) =>
                             getMetricLabel(metric) === colname,
+                        ) &&
+                        !explore.form_data.metrics?.some(
+                          (metric: QueryFormMetric) =>
+                            getMetricLabel(metric) === colname,
                         )
                       ) {
+                        return;
+                      }
+                      const isMetric = explore.form_data.metrics?.some(
+                        metric => getMetricLabel(metric) === colname,
+                      );
+                      const isPercentMetric =
+                        explore.form_data.percent_metrics?.some(
+                          (metric: QueryFormMetric) =>
+                            `%${getMetricLabel(metric)}` === colname,
+                        );
+
+                      if (isMetric || isPercentMetric) {
                         const comparisonColumns =
                           generateComparisonColumns(colname);
                         comparisonColumns.forEach((name, idx) => {

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx

@@ -101,8 +101,8 @@ export default memo(function ColumnConfigItem({
       )}
       trigger="click"
       placement="right"
-      styles={{ body: { width, height } }}
-      rootClassName="column-config-popover"
+      style={{ width, height }}
+      className="column-config-popover"
     >
       <div css={outerContainerStyle}>
         <div css={nameContainerStyle}>
@@ -117,7 +117,7 @@ export default memo(function ColumnConfigItem({
               iconColor={colors.grayscale.base}
             />
           )}
-          <Icons.CaretRightOutlined css={caretIconStyle} />
+          <Icons.RightOutlined css={caretIconStyle} />
         </div>
       </div>
     </Popover>