in packages/sanddance-explorer/src/explorer.tsx [685:788]
public changeColumnMapping(role: SandDance.specs.InsightColumnRoles, column: SandDance.types.Column, options?: ChangeColumnMappingOptions) {
const columns = { ...this.state.columns };
const label = column ? strings.labelHistoryMapColumn(role) : strings.labelHistoryUnMapColumn(role);
const final = () => {
const partialInsight: Partial<SandDance.specs.Insight> = { columns, totalStyle: options ? options.totalStyle : this.state.totalStyle };
const errors = ensureColumnsPopulated(this.state.chart, partialInsight.totalStyle, partialInsight.columns, this.state.dataContent.columns);
columns[role] = column && column.name;
this.changeInsight(
partialInsight,
{ label },
errors ? { errors } : null
);
};
const _changeInsight = (newInsight: Partial<HistoricInsight>, columnUpdate: SandDance.specs.InsightColumns, historyAction: HistoryAction) => {
newInsight.columns = SandDance.VegaDeckGl.util.deepMerge(
{},
columns,
columnUpdate
);
savePref(this.prefs, this.state.chart, '*', '*', { columns: columnUpdate });
this.changeInsight(newInsight, historyAction);
};
if (column) {
let columnUpdate: SandDance.specs.InsightColumns;
switch (role) {
case 'facet': {
copyPrefToNewState(this.prefs, this.state.chart, 'facet', column.name);
const historicInsight: Partial<HistoricInsight> = { columns, facetStyle: options ? options.facetStyle : this.state.facetStyle };
columnUpdate = { facet: column.name };
_changeInsight(historicInsight, columnUpdate, { label });
break;
}
case 'color': {
let calculating: () => void = null;
let historicInsight: Partial<HistoricInsight> = { scheme: options && options.scheme, columns, colorBin: this.state.colorBin };
if (!historicInsight.scheme) {
copyPrefToNewState(this.prefs, this.state.chart, 'color', column.name);
}
if (!historicInsight.scheme) {
historicInsight.scheme = bestColorScheme(column, null, this.state.scheme);
}
if (!column.stats.hasColorData) {
historicInsight.directColor = false;
if (this.state.directColor !== historicInsight.directColor) {
calculating = () => this._resize();
}
}
if (this.state.columns && this.state.columns.color && this.state.columns.color !== column.name) {
const currColorColumn = this.state.dataContent.columns.filter(c => c.name === this.state.columns.color)[0];
if (column.isColorData != currColorColumn.isColorData) {
calculating = () => this._resize();
}
}
this.ignoreSelectionChange = true;
this.viewer.deselect().then(() => {
this.ignoreSelectionChange = false;
//allow deselection to render
requestAnimationFrame(() => {
columnUpdate = { color: column.name };
this.getColorContext = null;
this.setState({ calculating });
_changeInsight(historicInsight, columnUpdate, { label });
});
});
break;
}
case 'x': {
copyPrefToNewState(this.prefs, this.state.chart, 'x', column.name);
const historicInsight: Partial<HistoricInsight> = { columns };
columnUpdate = { x: column.name };
_changeInsight(historicInsight, columnUpdate, { label });
break;
}
case 'size': {
copyPrefToNewState(this.prefs, this.state.chart, 'size', column.name);
const historicInsight: Partial<HistoricInsight> = { totalStyle: options ? options.totalStyle : this.state.totalStyle };
columnUpdate = { size: column.name };
_changeInsight(historicInsight, columnUpdate, { label });
break;
}
default: {
final();
break;
}
}
} else {
switch (role) {
case 'facet': {
columns.facet = null;
columns.facetV = null;
this.changeInsight(
{ columns, facetStyle: 'wrap' },
{ label }
);
break;
}
default: {
final();
break;
}
}
}
}