kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
733 lines (725 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 _uniq = _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).withConfig({
shouldForwardProp: _styledComponents2.shouldForwardProp
})(_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.withConfig({
shouldForwardProp: _styledComponents2.shouldForwardProp
})(_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, _uniq["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,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfY2xhc3NuYW1lcyIsIl9pbnRlcm9wUmVxdWlyZURlZmF1bHQiLCJyZXF1aXJlIiwiX3JlYWN0IiwiX2ludGVyb3BSZXF1aXJlV2lsZGNhcmQiLCJfdW5pcSIsIl9yZWFjdFNvcnRhYmxlSG9jIiwiX3N0eWxlZENvbXBvbmVudHMiLCJfcG9ydGFsZWQiLCJfc3R5bGVkQ29tcG9uZW50czIiLCJfdHlwZWFoZWFkIiwiX2NoaWNrbGV0ZWRJbnB1dCIsIl9kcm9wZG93bkxpc3QiLCJfY29tbW9uVXRpbHMiLCJfY29uc3RhbnRzIiwiX3V0aWxzIiwiX2ljb25zIiwiX2N1c3RvbVBpY2tlciIsIl90ZW1wbGF0ZU9iamVjdCIsIl90ZW1wbGF0ZU9iamVjdDIiLCJfdGVtcGxhdGVPYmplY3QzIiwiX3RlbXBsYXRlT2JqZWN0NCIsIl90ZW1wbGF0ZU9iamVjdDUiLCJfdGVtcGxhdGVPYmplY3Q2IiwiX3RlbXBsYXRlT2JqZWN0NyIsIl90ZW1wbGF0ZU9iamVjdDgiLCJfdGVtcGxhdGVPYmplY3Q5IiwiX3RlbXBsYXRlT2JqZWN0MTAiLCJfdGVtcGxhdGVPYmplY3QxMSIsIl90ZW1wbGF0ZU9iamVjdDEyIiwiX3RlbXBsYXRlT2JqZWN0MTMiLCJfdGVtcGxhdGVPYmplY3QxNCIsIl90ZW1wbGF0ZU9iamVjdDE1IiwiX3RlbXBsYXRlT2JqZWN0MTYiLCJfdGVtcGxhdGVPYmplY3QxNyIsIl90ZW1wbGF0ZU9iamVjdDE4IiwiX3RlbXBsYXRlT2JqZWN0MTkiLCJfdGVtcGxhdGVPYmplY3QyMCIsIl9nZXRSZXF1aXJlV2lsZGNhcmRDYWNoZSIsImUiLCJXZWFrTWFwIiwiciIsInQiLCJfX2VzTW9kdWxlIiwiX3R5cGVvZiIsImhhcyIsImdldCIsIm4iLCJfX3Byb3RvX18iLCJhIiwiT2JqZWN0IiwiZGVmaW5lUHJvcGVydHkiLCJnZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3IiLCJ1IiwiaGFzT3duUHJvcGVydHkiLCJjYWxsIiwiaSIsInNldCIsIm93bktleXMiLCJrZXlzIiwiZ2V0T3duUHJvcGVydHlTeW1ib2xzIiwibyIsImZpbHRlciIsImVudW1lcmFibGUiLCJwdXNoIiwiYXBwbHkiLCJfb2JqZWN0U3ByZWFkIiwiYXJndW1lbnRzIiwibGVuZ3RoIiwiZm9yRWFjaCIsIl9kZWZpbmVQcm9wZXJ0eTIiLCJnZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3JzIiwiZGVmaW5lUHJvcGVydGllcyIsIl9jYWxsU3VwZXIiLCJfZ2V0UHJvdG90eXBlT2YyIiwiX3Bvc3NpYmxlQ29uc3RydWN0b3JSZXR1cm4yIiwiX2lzTmF0aXZlUmVmbGVjdENvbnN0cnVjdCIsIlJlZmxlY3QiLCJjb25zdHJ1Y3QiLCJjb25zdHJ1Y3RvciIsIkJvb2xlYW4iLCJwcm90b3R5cGUiLCJ2YWx1ZU9mIiwiZGVmYXVsdEFjdGlvbkljb25zIiwiVHJhc2giLCJzb3J0IiwiVmVydERvdHMiLCJhZGQiLCJBZGQiLCJkcmFnSGFuZGxlQWN0aXZlIiwiY3NzIiwiX3RhZ2dlZFRlbXBsYXRlTGl0ZXJhbDIiLCJwcm9wcyIsInRoZW1lIiwidGV4dENvbG9ySGwiLCJDb2xvclBhbGV0dGVJdGVtIiwiZXhwb3J0cyIsInN0eWxlZCIsImRpdiIsImRyb3Bkb3duV3JhcHBlcloiLCJwYW5lbEJhY2tncm91bmRIb3ZlciIsIlN0eWxlZERyYWdIYW5kbGUiLCJTdHlsZWRBY3Rpb24iLCJzdWJ0ZXh0Q29sb3IiLCJzdWJ0ZXh0Q29sb3JBY3RpdmUiLCJEaXZpZGVyTGluZSIsImRyb3Bkb3duTGlzdEJvcmRlclRvcCIsIkNvbG9yU3dhdGNoIiwiYXR0cnMiLCJjbGFzc05hbWUiLCJjb2xvciIsImJveFNoYWRvdyIsIlN0eWxlZEJ1dHRvbkNvbnRhaW5lciIsIlN0eWxlZEFkZFN0ZXBDb250YWluZXIiLCJpbnB1dENvbG9yIiwiU3R5bGVkSW5wdXQiLCJJbnB1dCIsIndpdGhDb25maWciLCJzaG91bGRGb3J3YXJkUHJvcCIsIl9wcm9wcyR3aWR0aCIsIndpZHRoIiwiX3Byb3BzJHRleHRBbGlnbiIsInRleHRBbGlnbiIsImRpc2FibGVkIiwiSW5wdXRUZXh0IiwiaW5wdXQiLCJfcHJvcHMkd2lkdGgyIiwiX3Byb3BzJHRleHRBbGlnbjIiLCJTb3J0YWJsZUl0ZW0iLCJTb3J0YWJsZUVsZW1lbnQiLCJfcmVmIiwiY2hpbGRyZW4iLCJpc1NvcnRpbmciLCJjcmVhdGVFbGVtZW50IiwiY2xhc3NuYW1lcyIsInNvcnRpbmciLCJXcmFwcGVkU29ydGFibGVDb250YWluZXIiLCJTb3J0YWJsZUNvbnRhaW5lciIsIl9yZWYyIiwiRHJhZ0hhbmRsZSIsIlNvcnRhYmxlSGFuZGxlIiwiX3JlZjMiLCJDb2xvclBhbGV0dGVJbnB1dCIsIl9yZWY0IiwidmFsdWUiLCJvbkNoYW5nZSIsImlkIiwiZWRpdGFibGUiLCJfdXNlU3RhdGUiLCJ1c2VTdGF0ZSIsIl91c2VTdGF0ZTIiLCJfc2xpY2VkVG9BcnJheTIiLCJzdGF0ZVZhbHVlIiwic2V0VmFsdWUiLCJpbnB1dFJlZiIsInVzZVJlZiIsInVzZUVmZmVjdCIsIm9uS2V5RG93biIsInVzZUNhbGxiYWNrIiwia2V5Q29kZSIsIktleUV2ZW50IiwiRE9NX1ZLX0VOVEVSIiwiRE9NX1ZLX1JFVFVSTiIsImN1cnJlbnQiLCJibHVyIiwiX29uQ2hhbmdlIiwidGFyZ2V0Iiwib25CbHVyIiwicmVmIiwic2Vjb25kYXJ5IiwiRGFzaCIsIlN0eWxlZFJhbmdlSW5wdXQiLCJTdHlsZWRDb2xvckhleElucHV0IiwiRWRpdGFibGVDb2xvclJhbmdlIiwiX3JlZjUiLCJpdGVtIiwiaXNMYXN0IiwiaW5kZXgiLCJlZGl0Q29sb3JNYXAiLCJub01pbkJvdW5kIiwiTnVtYmVyIiwiaXNGaW5pdGUiLCJpbnB1dHMiLCJub01heEJvdW5kIiwib25DaGFuZ2VMZWZ0IiwidmFsIiwicGFyc2VGbG9hdCIsIm9uQ2hhbmdlUmlnaHQiLCJ0b1N0cmluZyIsImNvbmNhdCIsIkFkZENvbG9yU3RvcCIsIl9yZWY2Iiwib25Db2xvckFkZCIsIkljb25Db21wb25lbnQiLCJvbkNsaWNrIiwiaGVpZ2h0IiwiRGVsZXRlQ29sb3JTdG9wIiwiX3JlZjciLCJvbkNvbG9yRGVsZXRlIiwiQ3VzdG9tUGFsZXR0ZUlucHV0IiwiX3JlZjgiLCJjb2xvckJyZWFrcyIsImlucHV0Q29sb3JIZXgiLCJlZGl0Q29sb3JNYXBWYWx1ZSIsIl9yZWY4JGFjdGlvbkljb25zIiwiYWN0aW9uSWNvbnMiLCJkaXNhYmxlQXBwZW5kIiwiZGlzYWJsZURlbGV0ZSIsIm9uRGVsZXRlIiwib25BZGQiLCJvblRvZ2dsZVNrZXRjaGVyIiwib25DbGlja1N3dGFjaCIsIm9uQ29sb3JJbnB1dCIsInYiLCJzaG93SGV4SW5wdXQiLCJ0b1VwcGVyQ2FzZSIsImlzTnVtZXJpY0NvbG9yQnJlYWtzIiwiU3R5bGVkQ2F0ZWdvcmljYWxWYWx1ZVBpY2tlcldyYXBwZXIiLCJTdHlsZWRDYXRlZ29yaWNhbFZhbHVlUGlja2VyIiwibm9Cb3JkZXIiLCJEcm9wZG93blZhbHVlc1dyYXBwZXIiLCJTZWxlY3RlZFZhbHVlc1dyYXBwZXIiLCJTdHlsZWREcm9wZG93bkhlYWRlciIsIlN0eWxlZFRvb2x0aXBDb250ZW50IiwiTlVNQkVSX1ZBTFVFU19JTl9UT09MVElQIiwiQ2F0ZWdvcmljYWxTZWxlY3RvckNvbnRleHQiLCJSZWFjdCIsImNyZWF0ZUNvbnRleHQiLCJvblNlbGVjdFJlc3QiLCJvblJlc2V0IiwiTW9kaWZpZWREcm9wZG93bkxpc3QiLCJfRHJvcGRvd25MaXN0IiwiX2NsYXNzQ2FsbENoZWNrMiIsIl9pbmhlcml0czIiLCJfY3JlYXRlQ2xhc3MyIiwia2V5IiwicmVuZGVyIiwiX3RoaXMiLCJGcmFnbWVudCIsIkNvbnN1bWVyIiwiY29udGV4dCIsIkJ1dHRvbiIsImxpbmsiLCJzaXplIiwiRHJvcGRvd25MaXN0IiwiQ2F0ZWdvcmljYWxTZWxlY3RvciIsIl9yZWY5Iiwic2VsZWN0ZWRWYWx1ZXMiLCJhbGxWYWx1ZXMiLCJhZGRDb2xvck1hcFZhbHVlIiwicmVtb3ZlQ29sb3JNYXBWYWx1ZSIsInJlc2V0Q29sb3JNYXBWYWx1ZSIsInNlbGVjdFJlc3RDb2xvck1hcFZhbHVlIiwiX3JlZjkkZWRpdGFibGUiLCJfdXNlU3RhdGUzIiwiX3VzZVN0YXRlNCIsInNob3dUeXBlYWhlYWQiLCJzZXRTaG93VHlwZWFoZWFkIiwib25PcHRpb25TZWxlY3RlZCIsInByZXZpb3VzU2VsZWN0ZWQiLCJ0b0FycmF5IiwiaXRlbXMiLCJ1bmlxIiwib25PcGVuRHJvcGRvd24iLCJvbkNsb3NlRHJvcGRvd24iLCJvblJlbW92ZUl0ZW0iLCJUb29sdGlwIiwicGxhY2UiLCJpbnRlcmFjdGl2ZSIsInNsaWNlIiwibWFwIiwibGVmdCIsInRvcCIsImlzT3BlbmVkIiwib25DbG9zZSIsInNlbGVjdGVkSXRlbXMiLCJwbGFjZWhvbGRlciIsInJlbW92ZUl0ZW0iLCJDdXN0b21DaGlja2xldENvbXBvbmVudCIsInN0eWxlIiwicG9zaXRpb24iLCJQcm92aWRlciIsImN1c3RvbUNsYXNzZXMiLCJyZXN1bHRzIiwibGlzdEl0ZW0iLCJsaXN0QW5jaG9yIiwib3B0aW9ucyIsImN1c3RvbUxpc3RDb21wb25lbnQiLCJjdXN0b21MaXN0SXRlbUNvbXBvbmVudCIsIkxpc3RJdGVtIiwic2VhcmNoYWJsZSIsInNob3dPcHRpb25zV2hlbkVtcHR5IiwiQ2F0ZWdvcmljYWxDdXN0b21QYWxldHRlSW5wdXQiLCJfcmVmMTAiLCJjb2xvck1hcCIsIl9yZWYxMCRhY3Rpb25JY29ucyIsInVzZU1lbW8iLCJ2YWx1ZXMiLCJBcnJheSIsImlzQXJyYXkiLCJCb3R0b21BY3Rpb24iLCJfcmVmMTEiLCJvbkNhbmNlbCIsIm9uQ29uZmlybSIsInNtYWxsIiwiU3R5bGVkQ3VzdG9tUGFsZXR0ZSIsIkN1c3RvbVBhbGV0dGVGYWN0b3J5IiwiQ3VzdG9tUGFsZXR0ZSIsIl9yZWYxMiIsIm9yZGluYWxEb21haW4iLCJjdXN0b21QYWxldHRlIiwic2V0Q29sb3JQYWxldHRlVUkiLCJzaG93U2tldGNoZXIiLCJfcmVmMTIkYWN0aW9uSWNvbnMiLCJvbkFwcGx5IiwiX3VzZVN0YXRlNSIsIl91c2VTdGF0ZTYiLCJzZXRJc1NvcnRpbmciLCJjb2xvcnMiLCJ0eXBlIiwiY29sb3JNYXBUb0NvbG9yQnJlYWtzIiwiY29sb3JNYXBUb0NhdGVnb3JpY2FsQ29sb3JCcmVha3MiLCJvblBpY2tlclVwZGF0ZSIsIm5ld0N1c3RvbVBhbGV0dGUiLCJ1cGRhdGVDdXN0b21QYWxldHRlQ29sb3IiLCJoZXgiLCJyZW1vdmVDdXN0b21QYWxldHRlQ29sb3IiLCJhZGRDdXN0b21QYWxldHRlQ29sb3IiLCJvbkFkZENhdGVnb3JpY2FsU3RlcCIsIm9uU3dhdGNoQ2xvc2UiLCJldmVudCIsInN0b3BQcm9wYWdhdGlvbiIsInByZXZlbnREZWZhdWx0Iiwib25Tb3J0RW5kIiwiX3JlZjEzIiwib2xkSW5kZXgiLCJuZXdJbmRleCIsInNvcnRDdXN0b21QYWxldHRlQ29sb3IiLCJvblNvcnRTdGFydCIsIm5ld0NvbG9yTWFwIiwiY20iLCJicmVha3MiLCJiIiwic29ydGVkTmV3Q29sb3JNYXAiLCJyZW1vdmVDYXRlZ29yaWNhbENvbG9yTWFwVmFsdWUiLCJyZW1vdmVDYXRlZ29yaWNhbFZhbHVlRnJvbUNvbG9yTWFwIiwiYWRkQ2F0ZWdvcmljYWxDb2xvck1hcFZhbHVlIiwiYWRkQ2F0ZWdvcmljYWxWYWx1ZXNUb0NvbG9yTWFwIiwicmVzZXRDYXRlZ29yaWNhbENvbG9yTWFwVmFsdWUiLCJyZXNldENhdGVnb3JpY2FsQ29sb3JNYXBCeUluZGV4Iiwic2VsZWN0UmVzdENhdGVnb3JpY2FsQ29sb3JNYXAiLCJzZWxlY3RSZXN0Q2F0ZWdvcmljYWxDb2xvck1hcEJ5SW5kZXgiLCJsb2NrQXhpcyIsImhlbHBlckNsYXNzIiwidXNlRHJhZ0hhbmRsZSIsIl9kZWZhdWx0Il0sInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3NpZGUtcGFuZWwvbGF5ZXItcGFuZWwvY3VzdG9tLXBhbGV0dGUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8vIFNQRFgtTGljZW5zZS1JZGVudGlmaWVyOiBNSVRcbi8vIENvcHlyaWdodCBjb250cmlidXRvcnMgdG8gdGhlIGtlcGxlci5nbCBwcm9qZWN0XG5cbmltcG9ydCBjbGFzc25hbWVzIGZyb20gJ2NsYXNzbmFtZXMnO1xuaW1wb3J0IFJlYWN0LCB7XG4gIEVsZW1lbnRUeXBlLFxuICBQcm9wc1dpdGhDaGlsZHJlbixcbiAgdXNlQ2FsbGJhY2ssXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdXNlUmVmLFxuICB1c2VTdGF0ZVxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdW5pcSBmcm9tICdsb2Rhc2gvdW5pcSc7XG5pbXBvcnQge1xuICBTb3J0YWJsZUNvbnRhaW5lcixcbiAgU29ydGFibGVDb250YWluZXJQcm9wcyxcbiAgU29ydGFibGVFbGVtZW50LFxuICBTb3J0YWJsZUVsZW1lbnRQcm9wcyxcbiAgU29ydGFibGVIYW5kbGVcbn0gZnJvbSAncmVhY3Qtc29ydGFibGUtaG9jJztcbmltcG9ydCBzdHlsZWQsIHtjc3N9IGZyb20gJ3N0eWxlZC1jb21wb25lbnRzJztcbmltcG9ydCBQb3J0YWxlZCBmcm9tICcuLi8uLi9jb21tb24vcG9ydGFsZWQnO1xuaW1wb3J0IHtUb29sdGlwfSBmcm9tICcuLi8uLi9jb21tb24vc3R5bGVkLWNvbXBvbmVudHMnO1xuaW1wb3J0IFR5cGVhaGVhZCBmcm9tICcuLi8uLi9jb21tb24vaXRlbS1zZWxlY3Rvci90eXBlYWhlYWQnO1xuaW1wb3J0IENoaWNrbGV0ZWRJbnB1dCBmcm9tICcuLi8uLi9jb21tb24vaXRlbS1zZWxlY3Rvci9jaGlja2xldGVkLWlucHV0JztcbmltcG9ydCBEcm9wZG93bkxpc3QsIHtMaXN0SXRlbX0gZnJvbSAnLi4vLi4vY29tbW9uL2l0ZW0tc2VsZWN0b3IvZHJvcGRvd24tbGlzdCc7XG5pbXBvcnQge3Nob3VsZEZvcndhcmRQcm9wfSBmcm9tICcuLi8uLi9jb21tb24vc3R5bGVkLWNvbXBvbmVudHMnO1xuaW1wb3J0IHt0b0FycmF5fSBmcm9tICdAa2VwbGVyLmdsL2NvbW1vbi11dGlscyc7XG5pbXBvcnQge0tleUV2ZW50fSBmcm9tICdAa2VwbGVyLmdsL2NvbnN0YW50cyc7XG5pbXBvcnQge0NvbG9yTWFwLCBDb2xvclVJLCBIZXhDb2xvciwgTmVzdGVkUGFydGlhbH0gZnJvbSAnQGtlcGxlci5nbC90eXBlcyc7XG5pbXBvcnQge1xuICBhZGRDYXRlZ29yaWNhbFZhbHVlc1RvQ29sb3JNYXAsXG4gIGFkZEN1c3RvbVBhbGV0dGVDb2xvcixcbiAgY29sb3JNYXBUb0NhdGVnb3JpY2FsQ29sb3JCcmVha3MsXG4gIGNvbG9yTWFwVG9Db2xvckJyZWFrcyxcbiAgaXNOdW1lcmljQ29sb3JCcmVha3MsXG4gIHJlc2V0Q2F0ZWdvcmljYWxDb2xvck1hcEJ5SW5kZXgsXG4gIHJlbW92ZUNhdGVnb3JpY2FsVmFsdWVGcm9tQ29sb3JNYXAsXG4gIHJlbW92ZUN1c3RvbVBhbGV0dGVDb2xvcixcbiAgc2VsZWN0UmVzdENhdGVnb3JpY2FsQ29sb3JNYXBCeUluZGV4LFxuICBzb3J0Q3VzdG9tUGFsZXR0ZUNvbG9yLFxuICB1cGRhdGVDdXN0b21QYWxldHRlQ29sb3Jcbn0gZnJvbSAnQGtlcGxlci5nbC91dGlscyc7XG5pbXBvcnQge0NvbG9yQnJlYWssIENvbG9yQnJlYWtPcmRpbmFsfSBmcm9tICdAa2VwbGVyLmdsL3V0aWxzJztcbmltcG9ydCB7QWRkLCBUcmFzaCwgVmVydERvdHN9IGZyb20gJy4uLy4uL2NvbW1vbi9pY29ucyc7XG5pbXBvcnQge0J1dHRvbiwgSW5wdXR9IGZyb20gJy4uLy4uL2NvbW1vbi9zdHlsZWQtY29tcG9uZW50cyc7XG5pbXBvcnQgQ3VzdG9tUGlja2VyIGZyb20gJy4vY3VzdG9tLXBpY2tlcic7XG5cbmV4cG9ydCB0eXBlIEFjdGlvbkljb25zID0ge1xuICBkZWxldGU6IEVsZW1lbnRUeXBlO1xuICBzb3J0OiBFbGVtZW50VHlwZTtcbiAgYWRkOiBFbGVtZW50VHlwZTtcbn07XG5cbmV4cG9ydCB0eXBlIEVkaXRDb2xvck1hcEZ1bmMgPSAodjogbnVtYmVyLCBpOiBudW1iZXIpID0+IHZvaWQ7XG5leHBvcnQgdHlwZSBTZXRDb2xvclVJRnVuYyA9IChuZXdDb25maWc6IE5lc3RlZFBhcnRpYWw8Q29sb3JVST4pID0+IHZvaWQ7XG5cbi8qKlxuICogRWRpdGFibGVDb2xvclJhbmdlXG4gKi9cbmV4cG9ydCB0eXBlIEVkaXRhYmxlQ29sb3JSYW5nZVByb3BzID0ge1xuICBpdGVtOiBDb2xvckJyZWFrO1xuICBpc0xhc3Q6IGJvb2xlYW47XG4gIGluZGV4OiBudW1iZXI7XG4gIGVkaXRDb2xvck1hcD86IEVkaXRDb2xvck1hcEZ1bmM7XG4gIGVkaXRhYmxlOiBib29sZWFuO1xufTtcblxuZXhwb3J0IHR5cGUgQ3VzdG9tUGFsZXR0ZVByb3BzID0ge1xuICBjdXN0b21QYWxldHRlOiBDb2xvclVJWydjdXN0b21QYWxldHRlJ107XG4gIHNldENvbG9yUGFsZXR0ZVVJOiBTZXRDb2xvclVJRnVuYztcbiAgc2hvd1NrZXRjaGVyOiBudW1iZXIgfCBib29sZWFuO1xuICBvcmRpbmFsRG9tYWluPzogc3RyaW5nW10gfCBudW1iZXJbXTtcbiAgYWN0aW9uSWNvbnM/OiBBY3Rpb25JY29ucztcbiAgb25BcHBseTogKGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIG9uQ2FuY2VsOiAoKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IHR5cGUgQ3VzdG9tUGFsZXR0ZUlucHV0UHJvcHMgPSB7XG4gIGluZGV4OiBudW1iZXI7XG4gIGlzU29ydGluZzogYm9vbGVhbjtcbiAgY29sb3I6IEhleENvbG9yO1xuICBjb2xvckJyZWFrczogQ29sb3JCcmVha09yZGluYWxbXSB8IENvbG9yQnJlYWtbXSB8IG51bGw7XG4gIGlucHV0Q29sb3JIZXg6IChpbmRleDogbnVtYmVyLCB2OiBIZXhDb2xvcikgPT4gdm9pZDtcbiAgZWRpdENvbG9yTWFwVmFsdWU6IEVkaXRDb2xvck1hcEZ1bmM7XG4gIGFjdGlvbkljb25zPzogQWN0aW9uSWNvbnM7XG4gIGRpc2FibGVBcHBlbmQ/OiBib29sZWFuO1xuICBkaXNhYmxlRGVsZXRlPzogYm9vbGVhbjtcbiAgb25EZWxldGU6IChpbmRleDogbnVtYmVyKSA9PiB2b2lkO1xuICBvbkFkZDogKGluZGV4OiBudW1iZXIpID0+IHZvaWQ7XG4gIG9uVG9nZ2xlU2tldGNoZXI6IChpbmRleDogbnVtYmVyKSA9PiB2b2lkO1xufTtcblxuY29uc3QgZGVmYXVsdEFjdGlvbkljb25zID0ge1xuICBkZWxldGU6IFRyYXNoLFxuICBzb3J0OiBWZXJ0RG90cyxcbiAgYWRkOiBBZGRcbn07XG5cbmNvbnN0IGRyYWdIYW5kbGVBY3RpdmUgPSBjc3NgXG4gIC5sYXllcl9fZHJhZy1oYW5kbGUge1xuICAgIGNvbG9yOiAke3Byb3BzID0+IHByb3BzLnRoZW1lLnRleHRDb2xvckhsfTtcbiAgICBvcGFjaXR5OiAxO1xuICAgIGN1cnNvcjogbW92ZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvbG9y