kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
729 lines (721 loc) • 125 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.EditableColorRange = exports.DragHandle = exports.DividerLine = exports.DeleteColorStop = exports.CustomPaletteInput = exports.ColorSwatch = exports.ColorPaletteItem = exports.ColorPaletteInput = exports.CategoricalSelector = exports.CategoricalCustomPaletteInput = exports.BottomAction = exports.AddColorStop = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _lodash = _interopRequireDefault(require("lodash.uniq"));
var _reactSortableHoc = require("react-sortable-hoc");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _portaled = _interopRequireDefault(require("../../common/portaled"));
var _styledComponents2 = require("../../common/styled-components");
var _typeahead = _interopRequireDefault(require("../../common/item-selector/typeahead"));
var _chickletedInput = _interopRequireDefault(require("../../common/item-selector/chickleted-input"));
var _dropdownList = _interopRequireWildcard(require("../../common/item-selector/dropdown-list"));
var _commonUtils = require("@kepler.gl/common-utils");
var _constants = require("@kepler.gl/constants");
var _utils = require("@kepler.gl/utils");
var _icons = require("../../common/icons");
var _customPicker = _interopRequireDefault(require("./custom-picker"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20; // SPDX-License-Identifier: MIT
// Copyright contributors to the kepler.gl project
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* EditableColorRange
*/
var defaultActionIcons = {
"delete": _icons.Trash,
sort: _icons.VertDots,
add: _icons.Add
};
var dragHandleActive = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n .layer__drag-handle {\n color: ", ";\n opacity: 1;\n cursor: move;\n }\n"])), function (props) {
return props.theme.textColorHl;
});
var ColorPaletteItem = exports.ColorPaletteItem = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n padding-top: 2px;\n padding-bottom: 2px;\n z-index: ", ";\n justify-content: space-between;\n\n .custom-palette-input__left {\n display: flex;\n align-items: center;\n }\n\n .custom-palette-input__right {\n display: flex;\n align-items: center;\n padding-right: 6px;\n }\n\n &:not(.sorting):not(.disabled) {\n &:hover {\n background-color: ", ";\n ", ";\n }\n }\n\n &.sorting-colors {\n background-color: ", ";\n ", ";\n }\n"])), function (props) {
return props.theme.dropdownWrapperZ + 1;
}, function (props) {
return props.theme.panelBackgroundHover;
}, dragHandleActive, function (props) {
return props.theme.panelBackgroundHover;
}, dragHandleActive);
var StyledDragHandle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n opacity: 0;\n"])));
var StyledAction = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n svg {\n &:hover {\n color: ", ";\n }\n }\n\n margin-left: 4px;\n &:hover {\n cursor: pointer;\n }\n"])), function (props) {
return props.theme.subtextColor;
}, function (props) {
return props.theme.subtextColorActive;
});
var DividerLine = exports.DividerLine = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: 1px;\n background-color: ", ";\n margin-top: 8px;\n"])), function (props) {
return props.theme.dropdownListBorderTop;
});
var ColorSwatch = exports.ColorSwatch = _styledComponents["default"].div.attrs({
className: 'custom-palette__swatch'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 32px;\n height: 18px;\n display: inline-block;\n &:hover {\n box-shadow: ", ";\n cursor: pointer;\n }\n"])), function (props) {
return props.color;
}, function (props) {
return props.theme.boxShadow;
});
var StyledButtonContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: 11px;\n display: flex;\n direction: rtl;\n padding: 0 12px;\n"])));
var StyledAddStepContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: 11px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: 0 12px;\n color: ", ";\n .addcolor {\n margin-top: 4px;\n }\n"])), function (props) {
return props.theme.inputColor;
});
var StyledInput = (0, _styledComponents["default"])(_styledComponents2.Input)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n text-align: ", ";\n pointer-events: ", ";\n"])), function (props) {
var _props$width;
return (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : '100%';
}, function (props) {
var _props$textAlign;
return (_props$textAlign = props.textAlign) !== null && _props$textAlign !== void 0 ? _props$textAlign : 'end';
}, function (props) {
return props.disabled ? 'none' : 'all';
});
var InputText = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n background-color: transparent;\n border-color: transparent;\n width: ", ";\n text-align: ", ";\n\n &:hover {\n cursor: auto;\n background-color: transparent;\n border-color: transparent;\n }\n"])), function (props) {
return props.theme.input;
}, function (props) {
var _props$width2;
return (_props$width2 = props.width) !== null && _props$width2 !== void 0 ? _props$width2 : '100%';
}, function (props) {
var _props$textAlign2;
return (_props$textAlign2 = props.textAlign) !== null && _props$textAlign2 !== void 0 ? _props$textAlign2 : 'end';
});
var SortableItem = (0, _reactSortableHoc.SortableElement)(function (_ref) {
var children = _ref.children,
isSorting = _ref.isSorting;
return /*#__PURE__*/_react["default"].createElement(ColorPaletteItem, {
className: (0, _classnames["default"])('custom-palette__sortable-items', {
sorting: isSorting
})
}, children);
});
// TODO: Should className be applied to the div here?
var WrappedSortableContainer = (0, _reactSortableHoc.SortableContainer)(function (_ref2) {
var children = _ref2.children,
className = _ref2.className;
return /*#__PURE__*/_react["default"].createElement("div", {
className: className
}, children);
});
var DragHandle = exports.DragHandle = (0, _reactSortableHoc.SortableHandle)(function (_ref3) {
var className = _ref3.className,
children = _ref3.children;
return /*#__PURE__*/_react["default"].createElement(StyledDragHandle, {
className: className
}, children);
});
var ColorPaletteInput = exports.ColorPaletteInput = function ColorPaletteInput(_ref4) {
var value = _ref4.value,
onChange = _ref4.onChange,
id = _ref4.id,
width = _ref4.width,
textAlign = _ref4.textAlign,
editable = _ref4.editable;
var _useState = (0, _react.useState)(value),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
stateValue = _useState2[0],
setValue = _useState2[1];
var inputRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
setValue(value);
}, [value]);
var onKeyDown = (0, _react.useCallback)(function (e) {
switch (e.keyCode) {
case _constants.KeyEvent.DOM_VK_ENTER:
case _constants.KeyEvent.DOM_VK_RETURN:
onChange(stateValue);
if (inputRef !== null) {
// @ts-ignore
inputRef === null || inputRef === void 0 || inputRef.current.blur();
}
break;
default:
break;
}
}, [onChange, stateValue]);
var _onChange = (0, _react.useCallback)(function (e) {
return setValue(e.target.value);
}, [setValue]);
var onBlur = (0, _react.useCallback)(function () {
return onChange(stateValue);
}, [onChange, stateValue]);
return editable ? /*#__PURE__*/_react["default"].createElement(StyledInput, {
ref: inputRef,
className: "custom-palette-hex__input",
value: stateValue,
onChange: _onChange,
onBlur: onBlur,
onKeyDown: onKeyDown,
id: id,
width: width,
textAlign: textAlign,
secondary: true
}) : /*#__PURE__*/_react["default"].createElement(InputText, {
className: "custom-palette-hex__input__text",
width: width,
textAlign: textAlign
}, value);
};
var Dash = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n width: 6px;\n border-top: 1px solid ", ";\n margin-left: 4px;\n margin-right: 4px;\n"])), function (props) {
return props.theme.subtextColor;
});
var StyledRangeInput = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n margin-left: 12px;\n"])));
var StyledColorHexInput = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"])));
var EditableColorRange = exports.EditableColorRange = function EditableColorRange(_ref5) {
var item = _ref5.item,
isLast = _ref5.isLast,
index = _ref5.index,
editColorMap = _ref5.editColorMap,
editable = _ref5.editable;
var noMinBound = !Number.isFinite(item.inputs[0]) && index === 0;
var noMaxBound = !Number.isFinite(item.inputs[1]) && isLast;
var onChangeLeft = (0, _react.useCallback)(function (val) {
if (editable && editColorMap) editColorMap(parseFloat(val), index - 1);
}, [editColorMap, index, editable]);
var onChangeRight = (0, _react.useCallback)(function (val) {
if (editable && editColorMap) editColorMap(parseFloat(val), index);
}, [editColorMap, index, editable]);
return /*#__PURE__*/_react["default"].createElement(StyledRangeInput, null, /*#__PURE__*/_react["default"].createElement(ColorPaletteInput, {
value: noMinBound ? 'Less' : item.inputs[0].toString(),
id: "color-palette-input-".concat(index, "-left"),
width: "50px",
textAlign: "end",
editable: noMinBound ? false : editable,
onChange: onChangeLeft
}), /*#__PURE__*/_react["default"].createElement(Dash, null), /*#__PURE__*/_react["default"].createElement(ColorPaletteInput, {
value: noMaxBound ? 'More' : item.inputs[1].toString(),
id: "color-palette-input-".concat(index, "-right"),
width: "50px",
textAlign: "end",
onChange: onChangeRight,
editable: noMaxBound ? false : editable
}));
};
var AddColorStop = exports.AddColorStop = function AddColorStop(_ref6) {
var onColorAdd = _ref6.onColorAdd,
IconComponent = _ref6.IconComponent;
return /*#__PURE__*/_react["default"].createElement(StyledAction, {
onClick: onColorAdd,
className: "addcolor"
}, /*#__PURE__*/_react["default"].createElement(IconComponent, {
height: "14px"
}));
};
var DeleteColorStop = exports.DeleteColorStop = function DeleteColorStop(_ref7) {
var onColorDelete = _ref7.onColorDelete,
IconComponent = _ref7.IconComponent;
return /*#__PURE__*/_react["default"].createElement(StyledAction, {
onClick: onColorDelete,
className: "trashbin"
}, /*#__PURE__*/_react["default"].createElement(IconComponent, {
height: "14px"
}));
};
var CustomPaletteInput = exports.CustomPaletteInput = function CustomPaletteInput(_ref8) {
var index = _ref8.index,
isSorting = _ref8.isSorting,
color = _ref8.color,
colorBreaks = _ref8.colorBreaks,
inputColorHex = _ref8.inputColorHex,
editColorMapValue = _ref8.editColorMapValue,
_ref8$actionIcons = _ref8.actionIcons,
actionIcons = _ref8$actionIcons === void 0 ? defaultActionIcons : _ref8$actionIcons,
disableAppend = _ref8.disableAppend,
disableDelete = _ref8.disableDelete,
onDelete = _ref8.onDelete,
onAdd = _ref8.onAdd,
onToggleSketcher = _ref8.onToggleSketcher;
var onClickSwtach = (0, _react.useCallback)(function () {
return onToggleSketcher(index);
}, [onToggleSketcher, index]);
var onColorInput = (0, _react.useCallback)(function (v) {
return inputColorHex(index, v);
}, [inputColorHex, index]);
var onColorDelete = (0, _react.useCallback)(function () {
return onDelete(index);
}, [onDelete, index]);
var onColorAdd = (0, _react.useCallback)(function () {
return onAdd(index);
}, [onAdd, index]);
var showHexInput = !colorBreaks;
return /*#__PURE__*/_react["default"].createElement(SortableItem, {
index: index,
isSorting: isSorting
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "custom-palette-input__left"
}, /*#__PURE__*/_react["default"].createElement(DragHandle, {
className: "layer__drag-handle"
}, /*#__PURE__*/_react["default"].createElement(actionIcons.sort, {
height: "20px"
})), /*#__PURE__*/_react["default"].createElement(ColorSwatch, {
color: color,
onClick: onClickSwtach
}), showHexInput ? /*#__PURE__*/_react["default"].createElement(StyledColorHexInput, null, /*#__PURE__*/_react["default"].createElement(ColorPaletteInput, {
value: color.toUpperCase(),
onChange: onColorInput,
id: "input-layer-label-".concat(index),
editable: true,
textAlign: "left",
width: "70px"
})) : null, (0, _utils.isNumericColorBreaks)(colorBreaks) ? /*#__PURE__*/_react["default"].createElement(EditableColorRange, {
item: colorBreaks[index],
isLast: index === colorBreaks.length - 1,
index: index,
editColorMap: editColorMapValue,
editable: true
}) : null), /*#__PURE__*/_react["default"].createElement("div", {
className: "custom-palette-input__right"
}, !disableAppend ? /*#__PURE__*/_react["default"].createElement(AddColorStop, {
onColorAdd: onColorAdd,
IconComponent: actionIcons.add
}) : null, !disableDelete ? /*#__PURE__*/_react["default"].createElement(DeleteColorStop, {
onColorDelete: onColorDelete,
IconComponent: actionIcons["delete"]
}) : null));
};
var StyledCategoricalValuePickerWrapper = _styledComponents["default"].div.attrs({
className: 'categorical-value-picker'
})(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n width: 150px;\n color: ", ";\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n column-gap: 8px;\n align-items: center;\n cursor: pointer;\n"])), function (props) {
return props.theme.inputColor;
});
var StyledCategoricalValuePicker = _styledComponents["default"].div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n width: fit-content;\n font-size: 11px;\n border-bottom: ", ";\n cursor: pointer;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n max-width: 100px;\n"])), function (props) {
return props.noBorder ? '' : '1px dashed';
});
var DropdownValuesWrapper = _styledComponents["default"].div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n border: 0;\n width: 100%;\n left: 0;\n z-index: ", ";\n width: ", "px;\n"])), function (props) {
return props.theme.dropdownWrapperZ;
}, function (props) {
return props.width;
});
var SelectedValuesWrapper = (0, _styledComponents["default"])(DropdownValuesWrapper)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", "px;\n max-height: ", "px;\n overflow: auto;\n\n .custom-palette-chickleted-input {\n padding: 8px;\n background-color: ", ";\n }\n"])), function (props) {
return props.width;
}, function (props) {
return props.height;
}, function (props) {
return props.theme.dropdownWrapperZ;
});
var StyledDropdownHeader = _styledComponents["default"].div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: ", ";\n padding: 0 8px;\n font-size: 10px;\n\n .button {\n margin: 0;\n padding: 0;\n width: fit-content;\n }\n"])), function (props) {
return props.theme.inputColor;
});
var StyledTooltipContent = _styledComponents["default"].div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 8px;\n width: 150px;\n box-sizing: border-box;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n div {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n"])));
var NUMBER_VALUES_IN_TOOLTIP = 10;
var CategoricalSelectorContext = /*#__PURE__*/_react["default"].createContext({
onSelectRest: function onSelectRest() {
return null;
},
onReset: function onReset() {
return null;
}
});
// Categorical values dropdownlist:
// extending DropdownList and adding 'Select the Rest' and 'Reset' buttons
var ModifiedDropdownList = /*#__PURE__*/function (_DropdownList) {
function ModifiedDropdownList(props) {
(0, _classCallCheck2["default"])(this, ModifiedDropdownList);
return _callSuper(this, ModifiedDropdownList, [props]);
}
(0, _inherits2["default"])(ModifiedDropdownList, _DropdownList);
return (0, _createClass2["default"])(ModifiedDropdownList, [{
key: "render",
value: function render() {
var _this = this;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CategoricalSelectorContext.Consumer, null, function (context) {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledDropdownHeader, null, /*#__PURE__*/_react["default"].createElement(_styledComponents2.Button, {
link: true,
size: "smal",
onClick: context.onSelectRest
}, "Select the Rest"), /*#__PURE__*/_react["default"].createElement(_styledComponents2.Button, {
link: true,
size: "smal",
onClick: context.onReset
}, "Reset")), /*#__PURE__*/_react["default"].createElement(DividerLine, null), /*#__PURE__*/_react["default"].createElement(_dropdownList["default"], _this.props));
}));
}
}]);
}(_dropdownList["default"]);
// Categorical values selector for editing categorical values
var CategoricalSelector = exports.CategoricalSelector = function CategoricalSelector(_ref9) {
var index = _ref9.index,
selectedValues = _ref9.selectedValues,
allValues = _ref9.allValues,
addColorMapValue = _ref9.addColorMapValue,
removeColorMapValue = _ref9.removeColorMapValue,
resetColorMapValue = _ref9.resetColorMapValue,
selectRestColorMapValue = _ref9.selectRestColorMapValue,
_ref9$editable = _ref9.editable,
editable = _ref9$editable === void 0 ? true : _ref9$editable;
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
showTypeahead = _useState4[0],
setShowTypeahead = _useState4[1];
var onOptionSelected = (0, _react.useCallback)(function (value) {
var previousSelected = (0, _commonUtils.toArray)(selectedValues);
var items = (0, _lodash["default"])(previousSelected.concat((0, _commonUtils.toArray)(value)));
addColorMapValue === null || addColorMapValue === void 0 || addColorMapValue(items, index);
}, [selectedValues, index, addColorMapValue]);
var onOpenDropdown = (0, _react.useCallback)(function () {
setShowTypeahead(true);
}, []);
var onCloseDropdown = (0, _react.useCallback)(function () {
setShowTypeahead(false);
}, []);
var onRemoveItem = (0, _react.useCallback)(function (value) {
removeColorMapValue === null || removeColorMapValue === void 0 || removeColorMapValue(value, index);
}, [index, removeColorMapValue]);
var onReset = (0, _react.useCallback)(function () {
resetColorMapValue === null || resetColorMapValue === void 0 || resetColorMapValue(index);
setShowTypeahead(false);
return null;
}, [resetColorMapValue, index]);
var onSelectRest = (0, _react.useCallback)(function () {
selectRestColorMapValue === null || selectRestColorMapValue === void 0 || selectRestColorMapValue(index);
setShowTypeahead(false);
return null;
}, [selectRestColorMapValue, index]);
return /*#__PURE__*/_react["default"].createElement(StyledCategoricalValuePickerWrapper, null, editable && /*#__PURE__*/_react["default"].createElement(_icons.Add, {
height: "12px",
onClick: onOpenDropdown
}), /*#__PURE__*/_react["default"].createElement(StyledCategoricalValuePicker, {
noBorder: selectedValues.length === 0 || !editable,
onClick: onOpenDropdown,
"data-tip": true,
"data-for": "category-values-".concat(index)
}, selectedValues.length === 0 ? 'Add Value' : selectedValues.length === 1 ? selectedValues[0] : "".concat(selectedValues.length, " selected"), selectedValues.length > 1 && /*#__PURE__*/_react["default"].createElement(_styledComponents2.Tooltip, {
id: "category-values-".concat(index),
place: "top",
interactive: true
}, /*#__PURE__*/_react["default"].createElement(StyledTooltipContent, null, selectedValues.slice(0, NUMBER_VALUES_IN_TOOLTIP).map(function (value, i) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: i
}, value);
}), selectedValues.length > NUMBER_VALUES_IN_TOOLTIP && /*#__PURE__*/_react["default"].createElement("div", null, "...")))), editable && /*#__PURE__*/_react["default"].createElement(_portaled["default"], {
left: 0,
top: 0,
isOpened: showTypeahead,
onClose: onCloseDropdown
}, selectedValues.length > 1 && /*#__PURE__*/_react["default"].createElement(SelectedValuesWrapper, {
width: 250,
height: 200
}, /*#__PURE__*/_react["default"].createElement(_chickletedInput["default"], {
className: 'custom-palette-chickleted-input',
selectedItems: selectedValues,
placeholder: '',
removeItem: onRemoveItem,
onClick: function onClick() {
return null;
},
CustomChickletComponent: null
})), /*#__PURE__*/_react["default"].createElement(DropdownValuesWrapper, {
width: 250
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/_react["default"].createElement(CategoricalSelectorContext.Provider, {
value: {
onReset: onReset,
onSelectRest: onSelectRest
}
}, /*#__PURE__*/_react["default"].createElement(_typeahead["default"], {
customClasses: {
results: 'list-selector',
input: 'typeahead__input',
listItem: 'list__item',
listAnchor: 'list__item__anchor'
},
options: allValues,
placeholder: 'Search',
onOptionSelected: onOptionSelected,
customListComponent: ModifiedDropdownList,
customListItemComponent: _dropdownList.ListItem,
searchable: true,
showOptionsWhenEmpty: true,
selectedItems: selectedValues
}))))));
};
var CategoricalCustomPaletteInput = exports.CategoricalCustomPaletteInput = function CategoricalCustomPaletteInput(_ref10) {
var index = _ref10.index,
isSorting = _ref10.isSorting,
color = _ref10.color,
colorMap = _ref10.colorMap,
_ref10$actionIcons = _ref10.actionIcons,
actionIcons = _ref10$actionIcons === void 0 ? defaultActionIcons : _ref10$actionIcons,
onDelete = _ref10.onDelete,
disableDelete = _ref10.disableDelete,
onToggleSketcher = _ref10.onToggleSketcher,
addColorMapValue = _ref10.addColorMapValue,
removeColorMapValue = _ref10.removeColorMapValue,
resetColorMapValue = _ref10.resetColorMapValue,
selectRestColorMapValue = _ref10.selectRestColorMapValue,
allValues = _ref10.allValues;
var selectedValues = (0, _react.useMemo)(function () {
if (!colorMap || !colorMap[index]) return [];
var value = colorMap[index][0];
var values = Array.isArray(value) ? value : value !== null ? [value] : [];
return values;
}, [colorMap, index]);
var onClickSwtach = (0, _react.useCallback)(function () {
return onToggleSketcher(index);
}, [onToggleSketcher, index]);
var onColorDelete = (0, _react.useCallback)(function () {
return onDelete(index);
}, [onDelete, index]);
return /*#__PURE__*/_react["default"].createElement(SortableItem, {
index: index,
isSorting: isSorting
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "custom-palette-input__left"
}, /*#__PURE__*/_react["default"].createElement(DragHandle, {
className: "layer__drag-handle"
}, /*#__PURE__*/_react["default"].createElement(actionIcons.sort, {
height: "20px"
})), /*#__PURE__*/_react["default"].createElement(ColorSwatch, {
color: color,
onClick: onClickSwtach
}), colorMap && colorMap[index] && /*#__PURE__*/_react["default"].createElement(CategoricalSelector, {
selectedValues: selectedValues,
allValues: allValues,
addColorMapValue: addColorMapValue,
removeColorMapValue: removeColorMapValue,
resetColorMapValue: resetColorMapValue,
selectRestColorMapValue: selectRestColorMapValue,
index: index
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "custom-palette-input__right"
}, !disableDelete ? /*#__PURE__*/_react["default"].createElement(DeleteColorStop, {
onColorDelete: onColorDelete,
IconComponent: actionIcons["delete"]
}) : null));
};
var BottomAction = exports.BottomAction = function BottomAction(_ref11) {
var onCancel = _ref11.onCancel,
onConfirm = _ref11.onConfirm;
return /*#__PURE__*/_react["default"].createElement(StyledButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_styledComponents2.Button, {
className: "confirm-apply__button",
small: true,
onClick: onConfirm
}, "Confirm"), /*#__PURE__*/_react["default"].createElement(_styledComponents2.Button, {
link: true,
small: true,
onClick: onCancel
}, "Cancel"));
};
var StyledCustomPalette = _styledComponents["default"].div.attrs({
className: 'custom-palette'
})(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: 8px;\n"])));
function CustomPaletteFactory() {
var CustomPalette = function CustomPalette(_ref12) {
var ordinalDomain = _ref12.ordinalDomain,
customPalette = _ref12.customPalette,
setColorPaletteUI = _ref12.setColorPaletteUI,
showSketcher = _ref12.showSketcher,
_ref12$actionIcons = _ref12.actionIcons,
actionIcons = _ref12$actionIcons === void 0 ? defaultActionIcons : _ref12$actionIcons,
onCancel = _ref12.onCancel,
onApply = _ref12.onApply;
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
isSorting = _useState6[0],
setIsSorting = _useState6[1];
var colors = customPalette.colors,
colorMap = customPalette.colorMap;
var colorBreaks = (0, _react.useMemo)(function () {
return colorMap ? customPalette.type === 'custom' ? (0, _utils.colorMapToColorBreaks)(colorMap) : (0, _utils.colorMapToCategoricalColorBreaks)(colorMap) : null;
}, [customPalette.type, colorMap]);
var onPickerUpdate = (0, _react.useCallback)(function (color) {
if (color && Number.isFinite(showSketcher)) {
var newCustomPalette = (0, _utils.updateCustomPaletteColor)(customPalette, Number(showSketcher), color.hex);
setColorPaletteUI({
customPalette: newCustomPalette
});
}
}, [customPalette, showSketcher, setColorPaletteUI]);
var onToggleSketcher = (0, _react.useCallback)(function (val) {
setColorPaletteUI({
showSketcher: val
});
}, [setColorPaletteUI]);
var onDelete = (0, _react.useCallback)(function (index) {
var newCustomPalette = (0, _utils.removeCustomPaletteColor)(customPalette, index);
setColorPaletteUI({
customPalette: newCustomPalette
});
}, [customPalette, setColorPaletteUI]);
var onAdd = (0, _react.useCallback)(function (index) {
// add color at the end
var newCustomPalette = (0, _utils.addCustomPaletteColor)(customPalette, index);
setColorPaletteUI({
customPalette: newCustomPalette
});
}, [customPalette, setColorPaletteUI]);
var onAddCategoricalStep = (0, _react.useCallback)(function () {
onAdd(colors.length - 1);
}, [colors.length, onAdd]);
var onSwatchClose = (0, _react.useCallback)(function () {
onToggleSketcher(false);
}, [onToggleSketcher]);
var onConfirm = (0, _react.useCallback)(function (event) {
event.stopPropagation();
event.preventDefault();
onCancel();
onApply(event);
}, [onCancel, onApply]);
var onSortEnd = (0, _react.useCallback)(function (_ref13) {
var oldIndex = _ref13.oldIndex,
newIndex = _ref13.newIndex;
var newCustomPalette = (0, _utils.sortCustomPaletteColor)(customPalette, oldIndex, newIndex);
setColorPaletteUI({
customPalette: newCustomPalette
});
setIsSorting(false);
}, [customPalette, setColorPaletteUI, setIsSorting]);
var onSortStart = (0, _react.useCallback)(function () {
setIsSorting(true);
}, [setIsSorting]);
var inputColorHex = (0, _react.useCallback)(function (index, value) {
var newCustomPalette = (0, _utils.updateCustomPaletteColor)(customPalette, index, value);
// setColors(newColors);
setColorPaletteUI({
customPalette: newCustomPalette
});
}, [customPalette, setColorPaletteUI]);
var editColorMapValue = (0, _react.useCallback)(function (value, index) {
if (!customPalette.colorMap) {
return;
}
var newColorMap = customPalette.colorMap.map(function (cm, i) {
return i === index ? [value, cm[1]] : cm;
});
// sort the user inputs in case the break values are not ordered
var breaks = newColorMap.map(function (cm) {
return cm[0];
}).slice(0, -1).sort(function (a, b) {
return Number(a) - Number(b);
}).concat(null);
var sortedNewColorMap = newColorMap.map(function (cm, i) {
return [breaks[i], cm[1]];
});
setColorPaletteUI({
customPalette: _objectSpread(_objectSpread({}, customPalette), {}, {
colorMap: sortedNewColorMap
})
});
}, [setColorPaletteUI, customPalette]);
// remove a selected category item from a color map
var removeCategoricalColorMapValue = (0, _react.useCallback)(function (item, index) {
if (!colorMap) {
return;
}
setColorPaletteUI({
customPalette: _objectSpread(_objectSpread({}, customPalette), {}, {
colorMap: (0, _utils.removeCategoricalValueFromColorMap)(colorMap, item, index)
})
});
}, [setColorPaletteUI, customPalette, colorMap]);
// add selected categorical items to a color map
var addCategoricalColorMapValue = (0, _react.useCallback)(function (items, index) {
if (!colorMap) {
return;
}
setColorPaletteUI({
customPalette: _objectSpread(_objectSpread({}, customPalette), {}, {
colorMap: (0, _utils.addCategoricalValuesToColorMap)(colorMap, items, index)
})
});
}, [setColorPaletteUI, customPalette, colorMap]);
// reset a color map
var resetCategoricalColorMapValue = (0, _react.useCallback)(function (index) {
if (!colorMap) {
return;
}
setColorPaletteUI({
customPalette: _objectSpread(_objectSpread({}, customPalette), {}, {
colorMap: (0, _utils.resetCategoricalColorMapByIndex)(colorMap, index)
})
});
}, [setColorPaletteUI, customPalette, colorMap]);
// select the rest values for a color map
var selectRestCategoricalColorMap = (0, _react.useCallback)(function (index) {
if (!colorMap) {
return;
}
setColorPaletteUI({
customPalette: _objectSpread(_objectSpread({}, customPalette), {}, {
colorMap: (0, _utils.selectRestCategoricalColorMapByIndex)(colorMap, index, ordinalDomain)
})
});
}, [setColorPaletteUI, customPalette, colorMap, ordinalDomain]);
return /*#__PURE__*/_react["default"].createElement(StyledCustomPalette, null, /*#__PURE__*/_react["default"].createElement(WrappedSortableContainer, {
className: "custom-palette__sortable-container",
onSortEnd: onSortEnd,
onSortStart: onSortStart,
lockAxis: "y",
helperClass: "sorting-colors",
useDragHandle: true
}, colors.map(function (color, index) {
return customPalette.type === 'custom' ? /*#__PURE__*/_react["default"].createElement(CustomPaletteInput, {
key: index,
colorBreaks: colorBreaks,
index: index,
isSorting: isSorting,
color: color,
inputColorHex: inputColorHex,
disableAppend: colors.length >= 20,
disableDelete: colors.length <= 2,
actionIcons: actionIcons,
onAdd: onAdd,
onDelete: onDelete,
onToggleSketcher: onToggleSketcher,
editColorMapValue: editColorMapValue
}) : ordinalDomain && /*#__PURE__*/_react["default"].createElement(CategoricalCustomPaletteInput, {
key: index,
colorMap: colorMap,
index: index,
isSorting: isSorting,
color: color,
actionIcons: actionIcons,
onAdd: onAdd,
onDelete: onDelete,
disableDelete: colors.length <= 2,
onToggleSketcher: onToggleSketcher,
addColorMapValue: addCategoricalColorMapValue,
removeColorMapValue: removeCategoricalColorMapValue,
resetColorMapValue: resetCategoricalColorMapValue,
selectRestColorMapValue: selectRestCategoricalColorMap,
allValues: ordinalDomain
});
})), customPalette.type === 'customOrdinal' && /*#__PURE__*/_react["default"].createElement(StyledAddStepContainer, null, /*#__PURE__*/_react["default"].createElement(AddColorStop, {
onColorAdd: onAddCategoricalStep,
IconComponent: actionIcons.add
}), /*#__PURE__*/_react["default"].createElement(_styledComponents2.Button, {
link: true,
size: "smal",
onClick: onAddCategoricalStep
}, "Add Step")), /*#__PURE__*/_react["default"].createElement(DividerLine, null), /*#__PURE__*/_react["default"].createElement(BottomAction, {
onCancel: onCancel,
onConfirm: onConfirm
}), /*#__PURE__*/_react["default"].createElement(_portaled["default"], {
isOpened: showSketcher !== false,
left: 280,
top: -300,
onClose: onSwatchClose
}, /*#__PURE__*/_react["default"].createElement(_customPicker["default"], {
color: colors[Number(showSketcher)],
onChange: onPickerUpdate
})));
};
return CustomPalette;
}
var _default = exports["default"] = CustomPaletteFactory;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfY2xhc3NuYW1lcyIsIl9pbnRlcm9wUmVxdWlyZURlZmF1bHQiLCJyZXF1aXJlIiwiX3JlYWN0IiwiX2ludGVyb3BSZXF1aXJlV2lsZGNhcmQiLCJfbG9kYXNoIiwiX3JlYWN0U29ydGFibGVIb2MiLCJfc3R5bGVkQ29tcG9uZW50cyIsIl9wb3J0YWxlZCIsIl9zdHlsZWRDb21wb25lbnRzMiIsIl90eXBlYWhlYWQiLCJfY2hpY2tsZXRlZElucHV0IiwiX2Ryb3Bkb3duTGlzdCIsIl9jb21tb25VdGlscyIsIl9jb25zdGFudHMiLCJfdXRpbHMiLCJfaWNvbnMiLCJfY3VzdG9tUGlja2VyIiwiX3RlbXBsYXRlT2JqZWN0IiwiX3RlbXBsYXRlT2JqZWN0MiIsIl90ZW1wbGF0ZU9iamVjdDMiLCJfdGVtcGxhdGVPYmplY3Q0IiwiX3RlbXBsYXRlT2JqZWN0NSIsIl90ZW1wbGF0ZU9iamVjdDYiLCJfdGVtcGxhdGVPYmplY3Q3IiwiX3RlbXBsYXRlT2JqZWN0OCIsIl90ZW1wbGF0ZU9iamVjdDkiLCJfdGVtcGxhdGVPYmplY3QxMCIsIl90ZW1wbGF0ZU9iamVjdDExIiwiX3RlbXBsYXRlT2JqZWN0MTIiLCJfdGVtcGxhdGVPYmplY3QxMyIsIl90ZW1wbGF0ZU9iamVjdDE0IiwiX3RlbXBsYXRlT2JqZWN0MTUiLCJfdGVtcGxhdGVPYmplY3QxNiIsIl90ZW1wbGF0ZU9iamVjdDE3IiwiX3RlbXBsYXRlT2JqZWN0MTgiLCJfdGVtcGxhdGVPYmplY3QxOSIsIl90ZW1wbGF0ZU9iamVjdDIwIiwiX2dldFJlcXVpcmVXaWxkY2FyZENhY2hlIiwiZSIsIldlYWtNYXAiLCJyIiwidCIsIl9fZXNNb2R1bGUiLCJfdHlwZW9mIiwiaGFzIiwiZ2V0IiwibiIsIl9fcHJvdG9fXyIsImEiLCJPYmplY3QiLCJkZWZpbmVQcm9wZXJ0eSIsImdldE93blByb3BlcnR5RGVzY3JpcHRvciIsInUiLCJoYXNPd25Qcm9wZXJ0eSIsImNhbGwiLCJpIiwic2V0Iiwib3duS2V5cyIsImtleXMiLCJnZXRPd25Qcm9wZXJ0eVN5bWJvbHMiLCJvIiwiZmlsdGVyIiwiZW51bWVyYWJsZSIsInB1c2giLCJhcHBseSIsIl9vYmplY3RTcHJlYWQiLCJhcmd1bWVudHMiLCJsZW5ndGgiLCJmb3JFYWNoIiwiX2RlZmluZVByb3BlcnR5MiIsImdldE93blByb3BlcnR5RGVzY3JpcHRvcnMiLCJkZWZpbmVQcm9wZXJ0aWVzIiwiX2NhbGxTdXBlciIsIl9nZXRQcm90b3R5cGVPZjIiLCJfcG9zc2libGVDb25zdHJ1Y3RvclJldHVybjIiLCJfaXNOYXRpdmVSZWZsZWN0Q29uc3RydWN0IiwiUmVmbGVjdCIsImNvbnN0cnVjdCIsImNvbnN0cnVjdG9yIiwiQm9vbGVhbiIsInByb3RvdHlwZSIsInZhbHVlT2YiLCJkZWZhdWx0QWN0aW9uSWNvbnMiLCJUcmFzaCIsInNvcnQiLCJWZXJ0RG90cyIsImFkZCIsIkFkZCIsImRyYWdIYW5kbGVBY3RpdmUiLCJjc3MiLCJfdGFnZ2VkVGVtcGxhdGVMaXRlcmFsMiIsInByb3BzIiwidGhlbWUiLCJ0ZXh0Q29sb3JIbCIsIkNvbG9yUGFsZXR0ZUl0ZW0iLCJleHBvcnRzIiwic3R5bGVkIiwiZGl2IiwiZHJvcGRvd25XcmFwcGVyWiIsInBhbmVsQmFja2dyb3VuZEhvdmVyIiwiU3R5bGVkRHJhZ0hhbmRsZSIsIlN0eWxlZEFjdGlvbiIsInN1YnRleHRDb2xvciIsInN1YnRleHRDb2xvckFjdGl2ZSIsIkRpdmlkZXJMaW5lIiwiZHJvcGRvd25MaXN0Qm9yZGVyVG9wIiwiQ29sb3JTd2F0Y2giLCJhdHRycyIsImNsYXNzTmFtZSIsImNvbG9yIiwiYm94U2hhZG93IiwiU3R5bGVkQnV0dG9uQ29udGFpbmVyIiwiU3R5bGVkQWRkU3RlcENvbnRhaW5lciIsImlucHV0Q29sb3IiLCJTdHlsZWRJbnB1dCIsIklucHV0IiwiX3Byb3BzJHdpZHRoIiwid2lkdGgiLCJfcHJvcHMkdGV4dEFsaWduIiwidGV4dEFsaWduIiwiZGlzYWJsZWQiLCJJbnB1dFRleHQiLCJpbnB1dCIsIl9wcm9wcyR3aWR0aDIiLCJfcHJvcHMkdGV4dEFsaWduMiIsIlNvcnRhYmxlSXRlbSIsIlNvcnRhYmxlRWxlbWVudCIsIl9yZWYiLCJjaGlsZHJlbiIsImlzU29ydGluZyIsImNyZWF0ZUVsZW1lbnQiLCJjbGFzc25hbWVzIiwic29ydGluZyIsIldyYXBwZWRTb3J0YWJsZUNvbnRhaW5lciIsIlNvcnRhYmxlQ29udGFpbmVyIiwiX3JlZjIiLCJEcmFnSGFuZGxlIiwiU29ydGFibGVIYW5kbGUiLCJfcmVmMyIsIkNvbG9yUGFsZXR0ZUlucHV0IiwiX3JlZjQiLCJ2YWx1ZSIsIm9uQ2hhbmdlIiwiaWQiLCJlZGl0YWJsZSIsIl91c2VTdGF0ZSIsInVzZVN0YXRlIiwiX3VzZVN0YXRlMiIsIl9zbGljZWRUb0FycmF5MiIsInN0YXRlVmFsdWUiLCJzZXRWYWx1ZSIsImlucHV0UmVmIiwidXNlUmVmIiwidXNlRWZmZWN0Iiwib25LZXlEb3duIiwidXNlQ2FsbGJhY2siLCJrZXlDb2RlIiwiS2V5RXZlbnQiLCJET01fVktfRU5URVIiLCJET01fVktfUkVUVVJOIiwiY3VycmVudCIsImJsdXIiLCJfb25DaGFuZ2UiLCJ0YXJnZXQiLCJvbkJsdXIiLCJyZWYiLCJzZWNvbmRhcnkiLCJEYXNoIiwiU3R5bGVkUmFuZ2VJbnB1dCIsIlN0eWxlZENvbG9ySGV4SW5wdXQiLCJFZGl0YWJsZUNvbG9yUmFuZ2UiLCJfcmVmNSIsIml0ZW0iLCJpc0xhc3QiLCJpbmRleCIsImVkaXRDb2xvck1hcCIsIm5vTWluQm91bmQiLCJOdW1iZXIiLCJpc0Zpbml0ZSIsImlucHV0cyIsIm5vTWF4Qm91bmQiLCJvbkNoYW5nZUxlZnQiLCJ2YWwiLCJwYXJzZUZsb2F0Iiwib25DaGFuZ2VSaWdodCIsInRvU3RyaW5nIiwiY29uY2F0IiwiQWRkQ29sb3JTdG9wIiwiX3JlZjYiLCJvbkNvbG9yQWRkIiwiSWNvbkNvbXBvbmVudCIsIm9uQ2xpY2siLCJoZWlnaHQiLCJEZWxldGVDb2xvclN0b3AiLCJfcmVmNyIsIm9uQ29sb3JEZWxldGUiLCJDdXN0b21QYWxldHRlSW5wdXQiLCJfcmVmOCIsImNvbG9yQnJlYWtzIiwiaW5wdXRDb2xvckhleCIsImVkaXRDb2xvck1hcFZhbHVlIiwiX3JlZjgkYWN0aW9uSWNvbnMiLCJhY3Rpb25JY29ucyIsImRpc2FibGVBcHBlbmQiLCJkaXNhYmxlRGVsZXRlIiwib25EZWxldGUiLCJvbkFkZCIsIm9uVG9nZ2xlU2tldGNoZXIiLCJvbkNsaWNrU3d0YWNoIiwib25Db2xvcklucHV0IiwidiIsInNob3dIZXhJbnB1dCIsInRvVXBwZXJDYXNlIiwiaXNOdW1lcmljQ29sb3JCcmVha3MiLCJTdHlsZWRDYXRlZ29yaWNhbFZhbHVlUGlja2VyV3JhcHBlciIsIlN0eWxlZENhdGVnb3JpY2FsVmFsdWVQaWNrZXIiLCJub0JvcmRlciIsIkRyb3Bkb3duVmFsdWVzV3JhcHBlciIsIlNlbGVjdGVkVmFsdWVzV3JhcHBlciIsIlN0eWxlZERyb3Bkb3duSGVhZGVyIiwiU3R5bGVkVG9vbHRpcENvbnRlbnQiLCJOVU1CRVJfVkFMVUVTX0lOX1RPT0xUSVAiLCJDYXRlZ29yaWNhbFNlbGVjdG9yQ29udGV4dCIsIlJlYWN0IiwiY3JlYXRlQ29udGV4dCIsIm9uU2VsZWN0UmVzdCIsIm9uUmVzZXQiLCJNb2RpZmllZERyb3Bkb3duTGlzdCIsIl9Ecm9wZG93bkxpc3QiLCJfY2xhc3NDYWxsQ2hlY2syIiwiX2luaGVyaXRzMiIsIl9jcmVhdGVDbGFzczIiLCJrZXkiLCJyZW5kZXIiLCJfdGhpcyIsIkZyYWdtZW50IiwiQ29uc3VtZXIiLCJjb250ZXh0IiwiQnV0dG9uIiwibGluayIsInNpemUiLCJEcm9wZG93bkxpc3QiLCJDYXRlZ29yaWNhbFNlbGVjdG9yIiwiX3JlZjkiLCJzZWxlY3RlZFZhbHVlcyIsImFsbFZhbHVlcyIsImFkZENvbG9yTWFwVmFsdWUiLCJyZW1vdmVDb2xvck1hcFZhbHVlIiwicmVzZXRDb2xvck1hcFZhbHVlIiwic2VsZWN0UmVzdENvbG9yTWFwVmFsdWUiLCJfcmVmOSRlZGl0YWJsZSIsIl91c2VTdGF0ZTMiLCJfdXNlU3RhdGU0Iiwic2hvd1R5cGVhaGVhZCIsInNldFNob3dUeXBlYWhlYWQiLCJvbk9wdGlvblNlbGVjdGVkIiwicHJldmlvdXNTZWxlY3RlZCIsInRvQXJyYXkiLCJpdGVtcyIsInVuaXEiLCJvbk9wZW5Ecm9wZG93biIsIm9uQ2xvc2VEcm9wZG93biIsIm9uUmVtb3ZlSXRlbSIsIlRvb2x0aXAiLCJwbGFjZSIsImludGVyYWN0aXZlIiwic2xpY2UiLCJtYXAiLCJsZWZ0IiwidG9wIiwiaXNPcGVuZWQiLCJvbkNsb3NlIiwic2VsZWN0ZWRJdGVtcyIsInBsYWNlaG9sZGVyIiwicmVtb3ZlSXRlbSIsIkN1c3RvbUNoaWNrbGV0Q29tcG9uZW50Iiwic3R5bGUiLCJwb3NpdGlvbiIsIlByb3ZpZGVyIiwiY3VzdG9tQ2xhc3NlcyIsInJlc3VsdHMiLCJsaXN0SXRlbSIsImxpc3RBbmNob3IiLCJvcHRpb25zIiwiY3VzdG9tTGlzdENvbXBvbmVudCIsImN1c3RvbUxpc3RJdGVtQ29tcG9uZW50IiwiTGlzdEl0ZW0iLCJzZWFyY2hhYmxlIiwic2hvd09wdGlvbnNXaGVuRW1wdHkiLCJDYXRlZ29yaWNhbEN1c3RvbVBhbGV0dGVJbnB1dCIsIl9yZWYxMCIsImNvbG9yTWFwIiwiX3JlZjEwJGFjdGlvbkljb25zIiwidXNlTWVtbyIsInZhbHVlcyIsIkFycmF5IiwiaXNBcnJheSIsIkJvdHRvbUFjdGlvbiIsIl9yZWYxMSIsIm9uQ2FuY2VsIiwib25Db25maXJtIiwic21hbGwiLCJTdHlsZWRDdXN0b21QYWxldHRlIiwiQ3VzdG9tUGFsZXR0ZUZhY3RvcnkiLCJDdXN0b21QYWxldHRlIiwiX3JlZjEyIiwib3JkaW5hbERvbWFpbiIsImN1c3RvbVBhbGV0dGUiLCJzZXRDb2xvclBhbGV0dGVVSSIsInNob3dTa2V0Y2hlciIsIl9yZWYxMiRhY3Rpb25JY29ucyIsIm9uQXBwbHkiLCJfdXNlU3RhdGU1IiwiX3VzZVN0YXRlNiIsInNldElzU29ydGluZyIsImNvbG9ycyIsInR5cGUiLCJjb2xvck1hcFRvQ29sb3JCcmVha3MiLCJjb2xvck1hcFRvQ2F0ZWdvcmljYWxDb2xvckJyZWFrcyIsIm9uUGlja2VyVXBkYXRlIiwibmV3Q3VzdG9tUGFsZXR0ZSIsInVwZGF0ZUN1c3RvbVBhbGV0dGVDb2xvciIsImhleCIsInJlbW92ZUN1c3RvbVBhbGV0dGVDb2xvciIsImFkZEN1c3RvbVBhbGV0dGVDb2xvciIsIm9uQWRkQ2F0ZWdvcmljYWxTdGVwIiwib25Td2F0Y2hDbG9zZSIsImV2ZW50Iiwic3RvcFByb3BhZ2F0aW9uIiwicHJldmVudERlZmF1bHQiLCJvblNvcnRFbmQiLCJfcmVmMTMiLCJvbGRJbmRleCIsIm5ld0luZGV4Iiwic29ydEN1c3RvbVBhbGV0dGVDb2xvciIsIm9uU29ydFN0YXJ0IiwibmV3Q29sb3JNYXAiLCJjbSIsImJyZWFrcyIsImIiLCJzb3J0ZWROZXdDb2xvck1hcCIsInJlbW92ZUNhdGVnb3JpY2FsQ29sb3JNYXBWYWx1ZSIsInJlbW92ZUNhdGVnb3JpY2FsVmFsdWVGcm9tQ29sb3JNYXAiLCJhZGRDYXRlZ29yaWNhbENvbG9yTWFwVmFsdWUiLCJhZGRDYXRlZ29yaWNhbFZhbHVlc1RvQ29sb3JNYXAiLCJyZXNldENhdGVnb3JpY2FsQ29sb3JNYXBWYWx1ZSIsInJlc2V0Q2F0ZWdvcmljYWxDb2xvck1hcEJ5SW5kZXgiLCJzZWxlY3RSZXN0Q2F0ZWdvcmljYWxDb2xvck1hcCIsInNlbGVjdFJlc3RDYXRlZ29yaWNhbENvbG9yTWFwQnlJbmRleCIsImxvY2tBeGlzIiwiaGVscGVyQ2xhc3MiLCJ1c2VEcmFnSGFuZGxlIiwiX2RlZmF1bHQiXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvc2lkZS1wYW5lbC9sYXllci1wYW5lbC9jdXN0b20tcGFsZXR0ZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiLy8gU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IE1JVFxuLy8gQ29weXJpZ2h0IGNvbnRyaWJ1dG9ycyB0byB0aGUga2VwbGVyLmdsIHByb2plY3RcblxuaW1wb3J0IGNsYXNzbmFtZXMgZnJvbSAnY2xhc3NuYW1lcyc7XG5pbXBvcnQgUmVhY3QsIHtcbiAgRWxlbWVudFR5cGUsXG4gIFByb3BzV2l0aENoaWxkcmVuLFxuICB1c2VDYWxsYmFjayxcbiAgdXNlRWZmZWN0LFxuICB1c2VNZW1vLFxuICB1c2VSZWYsXG4gIHVzZVN0YXRlXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB1bmlxIGZyb20gJ2xvZGFzaC51bmlxJztcbmltcG9ydCB7XG4gIFNvcnRhYmxlQ29udGFpbmVyLFxuICBTb3J0YWJsZUNvbnRhaW5lclByb3BzLFxuICBTb3J0YWJsZUVsZW1lbnQsXG4gIFNvcnRhYmxlRWxlbWVudFByb3BzLFxuICBTb3J0YWJsZUhhbmRsZVxufSBmcm9tICdyZWFjdC1zb3J0YWJsZS1ob2MnO1xuaW1wb3J0IHN0eWxlZCwge2Nzc30gZnJvbSAnc3R5bGVkLWNvbXBvbmVudHMnO1xuaW1wb3J0IFBvcnRhbGVkIGZyb20gJy4uLy4uL2NvbW1vbi9wb3J0YWxlZCc7XG5pbXBvcnQge1Rvb2x0aXB9IGZyb20gJy4uLy4uL2NvbW1vbi9zdHlsZWQtY29tcG9uZW50cyc7XG5pbXBvcnQgVHlwZWFoZWFkIGZyb20gJy4uLy4uL2NvbW1vbi9pdGVtLXNlbGVjdG9yL3R5cGVhaGVhZCc7XG5pbXBvcnQgQ2hpY2tsZXRlZElucHV0IGZyb20gJy4uLy4uL2NvbW1vbi9pdGVtLXNlbGVjdG9yL2NoaWNrbGV0ZWQtaW5wdXQnO1xuaW1wb3J0IERyb3Bkb3duTGlzdCwge0xpc3RJdGVtfSBmcm9tICcuLi8uLi9jb21tb24vaXRlbS1zZWxlY3Rvci9kcm9wZG93bi1saXN0JztcblxuaW1wb3J0IHt0b0FycmF5fSBmcm9tICdAa2VwbGVyLmdsL2NvbW1vbi11dGlscyc7XG5pbXBvcnQge0tleUV2ZW50fSBmcm9tICdAa2VwbGVyLmdsL2NvbnN0YW50cyc7XG5pbXBvcnQge0NvbG9yTWFwLCBDb2xvclVJLCBIZXhDb2xvciwgTmVzdGVkUGFydGlhbH0gZnJvbSAnQGtlcGxlci5nbC90eXBlcyc7XG5pbXBvcnQge1xuICBhZGRDYXRlZ29yaWNhbFZhbHVlc1RvQ29sb3JNYXAsXG4gIGFkZEN1c3RvbVBhbGV0dGVDb2xvcixcbiAgY29sb3JNYXBUb0NhdGVnb3JpY2FsQ29sb3JCcmVha3MsXG4gIGNvbG9yTWFwVG9Db2xvckJyZWFrcyxcbiAgaXNOdW1lcmljQ29sb3JCcmVha3MsXG4gIHJlc2V0Q2F0ZWdvcmljYWxDb2xvck1hcEJ5SW5kZXgsXG4gIHJlbW92ZUNhdGVnb3JpY2FsVmFsdWVGcm9tQ29sb3JNYXAsXG4gIHJlbW92ZUN1c3RvbVBhbGV0dGVDb2xvcixcbiAgc2VsZWN0UmVzdENhdGVnb3JpY2FsQ29sb3JNYXBCeUluZGV4LFxuICBzb3J0Q3VzdG9tUGFsZXR0ZUNvbG9yLFxuICB1cGRhdGVDdXN0b21QYWxldHRlQ29sb3Jcbn0gZnJvbSAnQGtlcGxlci5nbC91dGlscyc7XG5pbXBvcnQge0NvbG9yQnJlYWssIENvbG9yQnJlYWtPcmRpbmFsfSBmcm9tICdAa2VwbGVyLmdsL3V0aWxzJztcbmltcG9ydCB7QWRkLCBUcmFzaCwgVmVydERvdHN9IGZyb20gJy4uLy4uL2NvbW1vbi9pY29ucyc7XG5pbXBvcnQge0J1dHRvbiwgSW5wdXR9IGZyb20gJy4uLy4uL2NvbW1vbi9zdHlsZWQtY29tcG9uZW50cyc7XG5pbXBvcnQgQ3VzdG9tUGlja2VyIGZyb20gJy4vY3VzdG9tLXBpY2tlcic7XG5cbmV4cG9ydCB0eXBlIEFjdGlvbkljb25zID0ge1xuICBkZWxldGU6IEVsZW1lbnRUeXBlO1xuICBzb3J0OiBFbGVtZW50VHlwZTtcbiAgYWRkOiBFbGVtZW50VHlwZTtcbn07XG5cbmV4cG9ydCB0eXBlIEVkaXRDb2xvck1hcEZ1bmMgPSAodjogbnVtYmVyLCBpOiBudW1iZXIpID0+IHZvaWQ7XG5leHBvcnQgdHlwZSBTZXRDb2xvclVJRnVuYyA9IChuZXdDb25maWc6IE5lc3RlZFBhcnRpYWw8Q29sb3JVST4pID0+IHZvaWQ7XG5cbi8qKlxuICogRWRpdGFibGVDb2xvclJhbmdlXG4gKi9cbmV4cG9ydCB0eXBlIEVkaXRhYmxlQ29sb3JSYW5nZVByb3BzID0ge1xuICBpdGVtOiBDb2xvckJyZWFrO1xuICBpc0xhc3Q6IGJvb2xlYW47XG4gIGluZGV4OiBudW1iZXI7XG4gIGVkaXRDb2xvck1hcD86IEVkaXRDb2xvck1hcEZ1bmM7XG4gIGVkaXRhYmxlOiBib29sZWFuO1xufTtcblxuZXhwb3J0IHR5cGUgQ3VzdG9tUGFsZXR0ZVByb3BzID0ge1xuICBjdXN0b21QYWxldHRlOiBDb2xvclVJWydjdXN0b21QYWxldHRlJ107XG4gIHNldENvbG9yUGFsZXR0ZVVJOiBTZXRDb2xvclVJRnVuYztcbiAgc2hvd1NrZXRjaGVyOiBudW1iZXIgfCBib29sZWFuO1xuICBvcmRpbmFsRG9tYWluPzogc3RyaW5nW10gfCBudW1iZXJbXTtcbiAgYWN0aW9uSWNvbnM/OiBBY3Rpb25JY29ucztcbiAgb25BcHBseTogKGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIG9uQ2FuY2VsOiAoKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IHR5cGUgQ3VzdG9tUGFsZXR0ZUlucHV0UHJvcHMgPSB7XG4gIGluZGV4OiBudW1iZXI7XG4gIGlzU29ydGluZzogYm9vbGVhbjtcbiAgY29sb3I6IEhleENvbG9yO1xuICBjb2xvckJyZWFrczogQ29sb3JCcmVha09yZGluYWxbXSB8IENvbG9yQnJlYWtbXSB8IG51bGw7XG4gIGlucHV0Q29sb3JIZXg6IChpbmRleDogbnVtYmVyLCB2OiBIZXhDb2xvcikgPT4gdm9pZDtcbiAgZWRpdENvbG9yTWFwVmFsdWU6IEVkaXRDb2xvck1hcEZ1bmM7XG4gIGFjdGlvbkljb25zPzogQWN0aW9uSWNvbnM7XG4gIGRpc2FibGVBcHBlbmQ/OiBib29sZWFuO1xuICBkaXNhYmxlRGVsZXRlPzogYm9vbGVhbjtcbiAgb25EZWxldGU6IChpbmRleDogbnVtYmVyKSA9PiB2b2lkO1xuICBvbkFkZDogKGluZGV4OiBudW1iZXIpID0+IHZvaWQ7XG4gIG9uVG9nZ2xlU2tldGNoZXI6IChpbmRleDogbnVtYmVyKSA9PiB2b2lkO1xufTtcblxuY29uc3QgZGVmYXVsdEFjdGlvbkljb25zID0ge1xuICBkZWxldGU6IFRyYXNoLFxuICBzb3J0OiBWZXJ0RG90cyxcbiAgYWRkOiBBZGRcbn07XG5cbmNvbnN0IGRyYWdIYW5kbGVBY3RpdmUgPSBjc3NgXG4gIC5sYXllcl9fZHJhZy1oYW5kbGUge1xuICAgIGNvbG9yOiAke3Byb3BzID0+IHByb3BzLnRoZW1lLnRleHRDb2xvckhsfTtcbiAgICBvcGFjaXR5OiAxO1xuICAgIGN1cnNvcjogbW92ZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvbG9yUGFsZXR0ZUl0ZW0gPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nLXRvcDogMnB4O1xuICBwYWRkaW5nLWJvdHRvbTogMnB4O1xuICB6LWluZGV4OiAke3Byb3BzID0+IHByb3BzLnRoZW1lLmRyb3Bkb3duV3JhcHBlclogKyAxfTtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVu