From 2486672df58febb0340aeba63054683e35c0f4a6 Mon Sep 17 00:00:00 2001 From: Ebenezer Sefah Date: Tue, 24 Nov 2020 12:29:34 -0500 Subject: [PATCH 1/4] adding encoding clean up --- src/js/components/encodings/ScaleList.tsx | 49 ++++++++++++++++++++--- src/js/reducers/index.ts | 2 +- src/js/reducers/marksReducer.ts | 22 +++++++++- src/scss/form.scss | 2 +- src/scss/layers.scss | 5 +-- 5 files changed, 69 insertions(+), 11 deletions(-) diff --git a/src/js/components/encodings/ScaleList.tsx b/src/js/components/encodings/ScaleList.tsx index d540058d3..74ab9c4f9 100644 --- a/src/js/components/encodings/ScaleList.tsx +++ b/src/js/components/encodings/ScaleList.tsx @@ -8,14 +8,21 @@ import sg from '../../ctrl/signals'; import {channelName} from '../../actions/bindChannel'; import {MODE, SELECTED, CELL} from '../../store/factory/Signal'; import {ScaleDraggingState, DraggingStateRecord, ScaleDraggingStateRecord} from '../../store/factory/Inspector'; -import {startDragging, stopDragging} from '../../actions/inspectorActions'; +import { startDragging, stopDragging, selectMark} from '../../actions/inspectorActions'; import {setMarkVisual} from '../../actions/markActions'; import {NumericValueRef, StringValueRef, tupleid} from 'vega'; +import { deleteScale } from '../../actions/scaleActions'; +import { Icon } from '../Icon'; +import ReactTooltip from 'react-tooltip'; +import { ThunkDispatch } from 'redux-thunk'; +import { AnyAction } from 'redux'; const ctrl = require('../../ctrl'); const imutils = require('../../util/immutable-utils'); const getInVis = imutils.getInVis; +const assets = require('../../util/assets'); +const capitalize = require('capitalize'); interface StateProps { selectedId: number; @@ -28,6 +35,7 @@ interface DispatchProps { startDragging: (d: DraggingStateRecord) => void; stopDragging: () => void; setMarkVisual: (payload: {property: string, def: NumericValueRef | StringValueRef}, markId: number) => void; + deleteScale: (_: any, id: number, evt: any) => void; } function mapStateToProps(reduxState: State, ownProps): StateProps { @@ -40,7 +48,28 @@ function mapStateToProps(reduxState: State, ownProps): StateProps { }; } -const actionCreators: DispatchProps = {startDragging, stopDragging, selectScale, setMarkVisual}; +function mapDispatchToProps(dispatch: ThunkDispatch): DispatchProps { + return { + startDragging: function (d) { + dispatch(startDragging(d)); + }, + stopDragging: function () { + dispatch(stopDragging()); + }, + selectScale: function (guideId) { + dispatch(selectScale(guideId)); + }, + setMarkVisual: function (payload, markId) { + dispatch(setMarkVisual(payload, markId)); + }, + deleteScale: function (selectedId, scaleId, evt) { + dispatch(deleteScale(null, scaleId)); + evt.preventDefault(); + evt.stopPropagation(); + ReactTooltip.hide(); + }, + }; +} class ScaleList extends React.Component { private handleDragStart = (evt) => { @@ -86,12 +115,17 @@ class ScaleList extends React.Component { ctrl.update(); } } + + public componentDidUpdate() { + ReactTooltip.rebuild(); + } + public render() { const props = this.props; const scales = [...props.scales.values()] return ( -
+

Scales

    {scales.map((scale) => { @@ -109,7 +143,12 @@ class ScaleList extends React.Component { data-scale={scale.get('_id')} data-field={field}> {/* */} - {name} +
    + {capitalize(name)} +
    +
); @@ -120,4 +159,4 @@ class ScaleList extends React.Component { } } -export default connect(mapStateToProps, actionCreators)(ScaleList); +export default connect(mapStateToProps, mapDispatchToProps)(ScaleList); diff --git a/src/js/reducers/index.ts b/src/js/reducers/index.ts index 7a20c25ea..8db75206f 100644 --- a/src/js/reducers/index.ts +++ b/src/js/reducers/index.ts @@ -22,9 +22,9 @@ const visReducers = combineReducers({ scene, pipelines, datasets, - scales, guides, marks, + scales, interactions, widgets }); diff --git a/src/js/reducers/marksReducer.ts b/src/js/reducers/marksReducer.ts index 0dfa6a114..071d8649a 100644 --- a/src/js/reducers/marksReducer.ts +++ b/src/js/reducers/marksReducer.ts @@ -2,6 +2,7 @@ import {Map} from 'immutable'; import {ActionType, getType} from 'typesafe-actions'; import * as helperActions from '../actions/bindChannel/helperActions'; import * as guideActions from '../actions/guideActions'; +import * as scaleActions from '../actions/scaleActions'; import * as markActions from '../actions/markActions'; import * as sceneActions from '../actions/sceneActions'; import * as interactionActions from '../actions/interactionActions'; @@ -29,7 +30,7 @@ const ensureValuePresentImmutable = function(state: MarkState, path: string[], v }; const ensureValueAbsent = function(state: MarkState, path: string[], valToRemove): MarkState { - return state.updateIn(path, children => children.filter(c => c !== valToRemove)); + return state.updateIn(path, children => children != null ? children.filter(c => c !== valToRemove) : children); }; // Helper reducer to add a mark to the store. Runs the mark through a method to @@ -155,6 +156,7 @@ export function marksReducer( | ActionType | ActionType | ActionType + | ActionType ): MarkState { if (typeof state === 'undefined') { return Map(); @@ -257,6 +259,24 @@ export function marksReducer( return ensureValueAbsent(state, [String(action.payload.groupId), 'legends'], id); } + if (action.type === getType(scaleActions.deleteScale)) { + const groupIds = state.keySeq().toArray(); + groupIds.forEach(function (groupId) { + state = ensureValueAbsent(state, [String(groupId), 'scales'], id); + + // clean up encoding references + let encodingKeys = Object.keys(state.getIn([String(groupId), 'encode', 'update'])); + encodingKeys.forEach(function (encodingKey) { + let needsDelete = state.getIn([String(groupId), 'encode', 'update', encodingKey, 'scale']) === id; + if (needsDelete) { + state = state.setIn([String(groupId), 'encode', 'update', encodingKey], undefined); + } + }); + + }); + return state; + } + if (action.type === getType(interactionActions.deleteInteraction)) { return ensureValueAbsent(state, [String(action.payload.groupId), '_interactions'], id); } diff --git a/src/scss/form.scss b/src/scss/form.scss index 4ed8e443c..03e3a6dc2 100644 --- a/src/scss/form.scss +++ b/src/scss/form.scss @@ -19,7 +19,7 @@ background-color: $dgrey-bg; color: white; border: 1px solid $dgrey-border; - border-radius: 2*$border-radius; + border-radius: 2px; cursor: -webkit-grab; cursor: -moz-grab; } diff --git a/src/scss/layers.scss b/src/scss/layers.scss index 06676f268..8a0abb636 100644 --- a/src/scss/layers.scss +++ b/src/scss/layers.scss @@ -28,15 +28,14 @@ } li { - float: left; margin: $inner-padding; margin-top: 0; list-style-type: none; } .scale.name { - display: inline-block; - padding: $inner-padding; + display: flex; + padding: 2*$inner-padding; text-align: center; background-color: skyblue; From b8a9a263fd34d52e04a76ebf381cb7f8f43f056f Mon Sep 17 00:00:00 2001 From: Ebenezer Sefah Date: Tue, 24 Nov 2020 12:42:24 -0500 Subject: [PATCH 2/4] a few styling changes --- src/js/reducers/index.ts | 2 +- src/scss/form.scss | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/js/reducers/index.ts b/src/js/reducers/index.ts index 8db75206f..7a20c25ea 100644 --- a/src/js/reducers/index.ts +++ b/src/js/reducers/index.ts @@ -22,9 +22,9 @@ const visReducers = combineReducers({ scene, pipelines, datasets, + scales, guides, marks, - scales, interactions, widgets }); diff --git a/src/scss/form.scss b/src/scss/form.scss index 03e3a6dc2..aa6c8cb39 100644 --- a/src/scss/form.scss +++ b/src/scss/form.scss @@ -19,11 +19,15 @@ background-color: $dgrey-bg; color: white; border: 1px solid $dgrey-border; - border-radius: 2px; + border-radius: 2*$border-radius; cursor: -webkit-grab; cursor: -moz-grab; } +.scale.name { + border-radius: 2px; +} + .signal { border: 1px solid; cursor: -webkit-grab; From 3637882658d66ba6ebb0397d39b11931ee5a97e1 Mon Sep 17 00:00:00 2001 From: Ebenezer Sefah Date: Tue, 24 Nov 2020 12:43:56 -0500 Subject: [PATCH 3/4] a few styling changes --- src/scss/form.scss | 4 ---- src/scss/layers.scss | 1 + 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/scss/form.scss b/src/scss/form.scss index aa6c8cb39..4ed8e443c 100644 --- a/src/scss/form.scss +++ b/src/scss/form.scss @@ -24,10 +24,6 @@ cursor: -moz-grab; } -.scale.name { - border-radius: 2px; -} - .signal { border: 1px solid; cursor: -webkit-grab; diff --git a/src/scss/layers.scss b/src/scss/layers.scss index 8a0abb636..736be7039 100644 --- a/src/scss/layers.scss +++ b/src/scss/layers.scss @@ -37,6 +37,7 @@ display: flex; padding: 2*$inner-padding; text-align: center; + border-radius: 2px; background-color: skyblue; color: black; From d48054c8134826a1f739e8f7d3943cd872ec5868 Mon Sep 17 00:00:00 2001 From: NanaKwame Date: Mon, 30 Nov 2020 20:21:39 -0500 Subject: [PATCH 4/4] removing unused variable --- src/js/components/encodings/ScaleList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/components/encodings/ScaleList.tsx b/src/js/components/encodings/ScaleList.tsx index 74ab9c4f9..a9b00e138 100644 --- a/src/js/components/encodings/ScaleList.tsx +++ b/src/js/components/encodings/ScaleList.tsx @@ -8,7 +8,7 @@ import sg from '../../ctrl/signals'; import {channelName} from '../../actions/bindChannel'; import {MODE, SELECTED, CELL} from '../../store/factory/Signal'; import {ScaleDraggingState, DraggingStateRecord, ScaleDraggingStateRecord} from '../../store/factory/Inspector'; -import { startDragging, stopDragging, selectMark} from '../../actions/inspectorActions'; +import { startDragging, stopDragging} from '../../actions/inspectorActions'; import {setMarkVisual} from '../../actions/markActions'; import {NumericValueRef, StringValueRef, tupleid} from 'vega'; import { deleteScale } from '../../actions/scaleActions';