Doing isBreakout check sooner, removing column formatting from 2nd dimension (#26777)

* Doing isBreakout check sooner, removing column formatting from 2nd dimension

* PR Feedback

* separating showColumnSettings and showColumnSettingsForIndicies

frontend/src/metabase/visualizations/components/ChartSettings.jsx

@@ -207,14 +207,20 @@ class ChartSettings extends Component {
       };
     } else if (currentWidget.props?.initialKey) {
       const settings = this._getSettings();
+      const isBreakout = settings?.["graph.dimensions"]?.length > 1;
+
+      if (isBreakout) {
+        return null;
+      }
+
       const singleSeriesForColumn = series.find(single => {
         const metricColumn = single.data.cols[1];
-        return getColumnKey(metricColumn) === currentWidget.props.initialKey;
+        if (metricColumn) {
+          return getColumnKey(metricColumn) === currentWidget.props.initialKey;
+        }
       });
 
-      const isBreakout = settings?.["graph.dimensions"]?.length > 1;
-
-      if (singleSeriesForColumn && !isBreakout) {
+      if (singleSeriesForColumn) {
         return {
           ...seriesSettingsWidget,
           props: {

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx

@@ -13,6 +13,8 @@ const ChartSettingFieldsPicker = ({
   options,
   onChange,
   addAnother,
+  showColumnSetting,
+  showColumnSettingForIndicies,
   ...props
 }) => {
   const handleDragEnd = ({ source, destination }) => {
@@ -35,12 +37,12 @@ const ChartSettingFieldsPicker = ({
           <Droppable droppableId="droppable">
             {provided => (
               <div {...provided.droppableProps} ref={provided.innerRef}>
-                {fields.map((field, index) => {
+                {fields.map((field, fieldIndex) => {
                   return (
                     <Draggable
                       key={`draggable-${field}`}
                       draggableId={`draggable-${field}`}
-                      index={index}
+                      index={fieldIndex}
                     >
                       {provided => (
                         <div
@@ -51,7 +53,11 @@ const ChartSettingFieldsPicker = ({
                         >
                           <ChartSettingFieldPicker
                             {...props}
-                            key={index}
+                            showColumnSetting={
+                              showColumnSetting ||
+                              showColumnSettingForIndicies?.includes(fieldIndex)
+                            }
+                            key={fieldIndex}
                             value={field}
                             options={calculateOptions(field)}
                             onChange={updatedField => {
@@ -63,11 +69,11 @@ const ChartSettingFieldsPicker = ({
                                 fieldsCopy.splice(
                                   existingIndex,
                                   1,
-                                  fields[index],
+                                  fields[fieldIndex],
                                 );
                               }
                               // replace with the new value
-                              fieldsCopy.splice(index, 1, updatedField);
+                              fieldsCopy.splice(fieldIndex, 1, updatedField);
                               onChange(fieldsCopy);
                             }}
                             onRemove={
@@ -76,8 +82,8 @@ const ChartSettingFieldsPicker = ({
                               (fields.length > 1 && field == null)
                                 ? () =>
                                     onChange([
-                                      ...fields.slice(0, index),
-                                      ...fields.slice(index + 1),
+                                      ...fields.slice(0, fieldIndex),
+                                      ...fields.slice(fieldIndex + 1),
                                     ])
                                 : null
                             }

frontend/src/metabase/visualizations/lib/settings/graph.js

@@ -146,7 +146,9 @@ export const GRAPH_DATA_SETTINGS = {
             ? t`Add series breakout`
             : null,
         columns: data.cols,
-        showColumnSetting: true,
+        // When this prop is passed it will only show the
+        // column settings for any index that is included in the array
+        showColumnSettingForIndicies: [0],
       };
     },
     readDependencies: ["graph._dimension_filter", "graph._metric_filter"],