color stays on dragged charts + erase bar color is on individual bars

2 files changed, 22 insertions, 11 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index a9be151bc..2a47abf32 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -400,6 +400,14 @@ export class Histogram extends React.Component<HistogramProps> {
         barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1) });
         barColors.push(StrCast(barName + '::' + color));
     };
+    
+    @action eraseSelectedColor= () => {
+        this.curBarSelected.attr("fill", this.props.layoutDoc.defaultHistogramColor);
+        var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
+
+        const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec("string"), null);
+        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1) });
+    };
 
     render() {
         var curSelectedBarName;
@@ -445,28 +453,28 @@ export class Histogram extends React.Component<HistogramProps> {
                         setSelectedColor={color => this.props.layoutDoc.defaultHistogramColor = color}
                         size={Size.XSMALL}
                     />
-                    &nbsp;
-                    <IconButton
-                        icon={<FontAwesomeIcon icon={'eraser'} />} 
-                        size={Size.XSMALL} 
-                        color={'black'} 
-                        type={Type.SEC}
-                        tooltip={'Revert all bars to the default color'}
-                        onClick={action(() => {this.props.layoutDoc.histogramBarColors = new List<string>()})}
-                    />
                 </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
                         &nbsp; &nbsp;
                         <ColorPicker
-                            tooltip={'Change Slice Color'} 
+                            tooltip={'Change Bar Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
                             selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />
+                        &nbsp;
+                        <IconButton
+                            icon={<FontAwesomeIcon icon={'eraser'} />} 
+                            size={Size.XSMALL} 
+                            color={'black'} 
+                            type={Type.SEC}
+                            tooltip={'Revert to the default bar color'}
+                            onClick={action(() => this.eraseSelectedColor())}
+                        />
                     </div>
                 : null}
                 <div ref={this._histogramRef} />
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 7d6f934b9..8a99d332f 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,7 +1,7 @@
 import { action, computed, } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, StrListCast } from '../../../../../fields/Doc';
+import { Doc, Field, StrListCast } from '../../../../../fields/Doc';
 import { List } from '../../../../../fields/List';
 import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils';
 import { DragManager } from '../../../../util/DragManager';
@@ -85,6 +85,9 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                                 embedding._data_vizAxes = new List<string>([col, col]);
                                                                 embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
                                                                 embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
+                                                                embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors);
+                                                                embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor;
+                                                                embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors);
                                                                 return embedding;
                                                             };
                                                             if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {