@splunk/visualizations 24.0.0 → 24.1.0

package/LinkGraph.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 172);
+/******/ 	return __webpack_require__(__webpack_require__.s = 173);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -1584,13 +1584,13 @@ module.exports = require("@splunk/visualization-icons");
 /* 57 */,
 /* 58 */,
 /* 59 */,
-/* 60 */
+/* 60 */,
+/* 61 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
-/* 61 */,
 /* 62 */,
 /* 63 */,
 /* 64 */,
@@ -1616,25 +1616,25 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 /* 84 */,
 /* 85 */,
 /* 86 */,
-/* 87 */
+/* 87 */,
+/* 88 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/inherits");
 
 /***/ }),
-/* 88 */
+/* 89 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/possibleConstructorReturn");
 
 /***/ }),
-/* 89 */
+/* 90 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/getPrototypeOf");
 
 /***/ }),
-/* 90 */,
 /* 91 */,
 /* 92 */,
 /* 93 */,
@@ -1642,13 +1642,13 @@ module.exports = require("@babel/runtime/helpers/getPrototypeOf");
 /* 95 */,
 /* 96 */,
 /* 97 */,
-/* 98 */
+/* 98 */,
+/* 99 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
 
 /***/ }),
-/* 99 */,
 /* 100 */,
 /* 101 */,
 /* 102 */,
@@ -1667,7 +1667,8 @@ module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
 /* 115 */,
 /* 116 */,
 /* 117 */,
-/* 118 */
+/* 118 */,
+/* 119 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1693,15 +1694,15 @@ exports.PureLinkGraph = exports.LinkGraph = exports.config = exports.themes = ex
 
 var lodash_1 = __webpack_require__(2);
 
-var dataSourceUtils_1 = __webpack_require__(98);
+var dataSourceUtils_1 = __webpack_require__(99);
 
 var withDashboardViz_1 = __webpack_require__(27);
 
-var PureLinkGraph_1 = __webpack_require__(173);
+var PureLinkGraph_1 = __webpack_require__(174);
 
 exports.PureLinkGraph = PureLinkGraph_1.default;
 
-var config_1 = __webpack_require__(185);
+var config_1 = __webpack_require__(186);
 
 exports.config = config_1.default;
 /**
@@ -1759,7 +1760,7 @@ exports.themes = themes;
 exports.default = LinkGraph;
 
 /***/ }),
-/* 119 */
+/* 120 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2017,7 +2018,7 @@ var sortGraphColumn = function sortGraphColumn(graph, field, sortKey, nodeHeight
 exports.sortGraphColumn = sortGraphColumn;
 
 /***/ }),
-/* 120 */
+/* 121 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2037,10 +2038,14 @@ var variables_1 = __webpack_require__(19);
 exports.StyledViewport = styled_components_1.default.div.withConfig({
   displayName: "GraphStyles__StyledViewport",
   componentId: "sc-5hdhcf-0"
-})(["position:absolute;top:0px;left:0px;width:100%;height:100%;.node{transition:background 0.05s ease-out;background:", ";border:2px solid transparent;}.node.hovering{background:", ";}.node.selected{border-radius:1px;border:2px solid ", ";}.edge{transition:opacity 0.05s ease-out;stroke:", ";opacity:0.3;}.edge.hovering{opacity:0.8;}> button{border-radius:1px;position:absolute;overflow:hidden;background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;display:flex;justify-content:space-between;align-items:center;.center-content{width:100%;max-width:100%;flex:1 1 100%;display:flex;flex-wrap:nowrap;justify-content:flex-start;width:0;padding-left:8px;padding-right:8px;> p{color:", ";}> p:nth-child(1){font-size:10px;padding:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}> p:nth-child(2){flex:0 auto;margin:0;font-size:10px;padding-left:8px;}}.left-content{padding-left:8px;}.right-content{padding-right:8px;}.left-content,.right-content{flex:0 0 auto;> p{height:100%;font-weight:bold;font-size:10px;padding:0;margin:0;color:", ";}}}"], function (props) {
+})(["position:absolute;top:0px;left:0px;width:100%;height:100%;.node{transition:background 0.05s ease-out;background:", ";border:2px solid transparent;p{color:", " !important;}}.node.hovering{background:", ";p{color:", " !important;}}.node.selected{border-radius:1px;border:2px solid ", ";}.edge{transition:opacity 0.05s ease-out;stroke:", ";opacity:0.3;}.edge.hovering{opacity:0.8;}> button{border-radius:1px;position:absolute;overflow:hidden;background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;display:flex;justify-content:space-between;align-items:center;.center-content{width:100%;max-width:100%;flex:1 1 100%;display:flex;flex-wrap:nowrap;justify-content:flex-start;width:0;padding-left:8px;padding-right:8px;> p{color:", ";}> p:nth-child(1){font-size:10px;padding:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}> p:nth-child(2){flex:0 auto;margin:0;font-size:10px;padding-left:8px;}}.left-content{padding-left:8px;}.right-content{padding-right:8px;}.left-content,.right-content{flex:0 0 auto;> p{height:100%;font-weight:bold;font-size:10px;padding:0;margin:0;color:", ";}}}"], function (props) {
   return props.nodeColor;
+}, function (props) {
+  return props.nodeTextColor;
 }, function (props) {
   return props.nodeHighlightColor;
+}, function (props) {
+  return props.nodeTextHighlightColor;
 }, pick_1.default({
   enterprise: variables_1.default.accentColorD10,
   prisma: variables_1.default.interactiveColorPrimary
@@ -2070,7 +2075,6 @@ exports.StyledEdgesPath = styled_components_1.default.path.withConfig({
 });
 
 /***/ }),
-/* 121 */,
 /* 122 */,
 /* 123 */,
 /* 124 */,
@@ -2121,7 +2125,8 @@ exports.StyledEdgesPath = styled_components_1.default.path.withConfig({
 /* 169 */,
 /* 170 */,
 /* 171 */,
-/* 172 */
+/* 172 */,
+/* 173 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2151,9 +2156,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-__exportStar(__webpack_require__(118), exports);
+__exportStar(__webpack_require__(119), exports);
 
-var LinkGraph_1 = __webpack_require__(118);
+var LinkGraph_1 = __webpack_require__(119);
 
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -2163,13 +2168,13 @@ Object.defineProperty(exports, "default", {
 });
 
 /***/ }),
-/* 173 */
+/* 174 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(60);
+var _slicedToArray = __webpack_require__(61);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2186,13 +2191,13 @@ var lodash_1 = __webpack_require__(2);
 
 var FixedSizeContainer_1 = __webpack_require__(12);
 
-var PureLinkGraphUtils_1 = __webpack_require__(119);
+var PureLinkGraphUtils_1 = __webpack_require__(120);
 
-var Graph_1 = __webpack_require__(174);
+var Graph_1 = __webpack_require__(175);
 
-var Field_1 = __webpack_require__(179);
+var Field_1 = __webpack_require__(180);
 
-var FieldStyles_1 = __webpack_require__(184);
+var FieldStyles_1 = __webpack_require__(185);
 
 var LinkGraphContainer = styled_components_1.default.div.withConfig({
   displayName: "PureLinkGraph__LinkGraphContainer",
@@ -2229,7 +2234,9 @@ var PureLinkGraph = function PureLinkGraph(props) {
       onNodeClick = props.onNodeClick,
       linkColor = props.linkColor,
       nodeColor = props.nodeColor,
+      nodeTextColor = props.nodeTextColor,
       nodeHighlightColor = props.nodeHighlightColor,
+      nodeTextHighlightColor = props.nodeTextHighlightColor,
       resultLimit = props.resultLimit,
       linkWidth = props.linkWidth,
       showValueCounts = props.showValueCounts,
@@ -2274,7 +2281,9 @@ var PureLinkGraph = function PureLinkGraph(props) {
   }, React.createElement(Graph_1.default, {
     linkColor: linkColor,
     nodeColor: nodeColor,
+    nodeTextColor: nodeTextColor,
     nodeHighlightColor: nodeHighlightColor,
+    nodeTextHighlightColor: nodeTextHighlightColor,
     graphDataModel: graphDataModelState,
     onNodeClick: onNodeClick,
     linkWidth: linkWidth,
@@ -2312,7 +2321,9 @@ exports.PureLinkGraph.propTypes = {
   nodeSpacingY: T.number,
   linkColor: T.string,
   nodeColor: T.string,
+  nodeTextColor: T.string,
   nodeHighlightColor: T.string,
+  nodeTextHighlightColor: T.string,
   resultLimit: T.number,
   linkWidth: T.number,
   showValueCounts: T.bool,
@@ -2333,7 +2344,9 @@ exports.PureLinkGraph.defaultProps = {
   linkWidth: 1,
   linkColor: '#B5B5B5',
   nodeColor: '#1E2024',
+  nodeTextColor: '#FFFFFF',
   nodeHighlightColor: '#7B56DB',
+  nodeTextHighlightColor: '#FFFFFF',
   resultLimit: 50,
   showValueCounts: true,
   showNodeCounts: true,
@@ -2344,7 +2357,7 @@ exports.PureLinkGraph.displayName = 'VizLinkGraph';
 exports.default = FixedSizeContainer_1.default(exports.PureLinkGraph);
 
 /***/ }),
-/* 174 */
+/* 175 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2356,11 +2369,11 @@ var _classCallCheck = __webpack_require__(10);
 
 var _createClass = __webpack_require__(16);
 
-var _inherits = __webpack_require__(87);
+var _inherits = __webpack_require__(88);
 
-var _possibleConstructorReturn = __webpack_require__(88);
+var _possibleConstructorReturn = __webpack_require__(89);
 
-var _getPrototypeOf = __webpack_require__(89);
+var _getPrototypeOf = __webpack_require__(90);
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -2374,13 +2387,13 @@ var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(2);
 
-var Edges_1 = __webpack_require__(175);
+var Edges_1 = __webpack_require__(176);
 
-var Nodes_1 = __webpack_require__(176);
+var Nodes_1 = __webpack_require__(177);
 
-var GraphStyles_1 = __webpack_require__(120);
+var GraphStyles_1 = __webpack_require__(121);
 
-var PureLinkGraphUtils_1 = __webpack_require__(119);
+var PureLinkGraphUtils_1 = __webpack_require__(120);
 
 var Graph = /*#__PURE__*/function (_React$Component) {
   _inherits(Graph, _React$Component);
@@ -2659,13 +2672,17 @@ var Graph = /*#__PURE__*/function (_React$Component) {
           nodeHighlightColor = _this$props.nodeHighlightColor,
           linkColor = _this$props.linkColor,
           linkWidth = _this$props.linkWidth,
-          showValueCounts = _this$props.showValueCounts;
+          showValueCounts = _this$props.showValueCounts,
+          nodeTextColor = _this$props.nodeTextColor,
+          nodeTextHighlightColor = _this$props.nodeTextHighlightColor;
       var newEdges = edges.filter(function (edge) {
         return nodes[edge.sourceNode] && nodes[edge.targetNode];
       });
       return React.createElement(GraphStyles_1.StyledViewport, {
         nodeColor: nodeColor,
+        nodeTextColor: nodeTextColor,
         nodeHighlightColor: nodeHighlightColor,
+        nodeTextHighlightColor: nodeTextHighlightColor,
         linkColor: linkColor,
         ref: function ref(c) {
           _this8.viewport = c;
@@ -2732,7 +2749,7 @@ var Graph = /*#__PURE__*/function (_React$Component) {
 exports.default = Graph;
 
 /***/ }),
-/* 175 */
+/* 176 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2744,7 +2761,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var GraphStyles_1 = __webpack_require__(120);
+var GraphStyles_1 = __webpack_require__(121);
 
 var Edges = function Edges(props) {
   var edges = props.edges,
@@ -2773,7 +2790,7 @@ var Edges = function Edges(props) {
 exports.default = Edges;
 
 /***/ }),
-/* 176 */
+/* 177 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2785,7 +2802,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var Node_1 = __webpack_require__(177);
+var Node_1 = __webpack_require__(178);
 
 var Nodes = function Nodes(props) {
   return Object.keys(props.nodes).map(function (key) {
@@ -2813,7 +2830,7 @@ var Nodes = function Nodes(props) {
 exports.default = Nodes;
 
 /***/ }),
-/* 177 */
+/* 178 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2825,7 +2842,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var Paragraph_1 = __webpack_require__(178);
+var Paragraph_1 = __webpack_require__(179);
 
 var Node = function Node(props) {
   var data = props.data,
@@ -2840,13 +2857,13 @@ var Node = function Node(props) {
 exports.default = Node;
 
 /***/ }),
-/* 178 */
+/* 179 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paragraph");
 
 /***/ }),
-/* 179 */
+/* 180 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2858,13 +2875,13 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var Dropdown_1 = __webpack_require__(180);
+var Dropdown_1 = __webpack_require__(181);
 
-var Button_1 = __webpack_require__(181);
+var Button_1 = __webpack_require__(182);
 
-var Menu_1 = __webpack_require__(182);
+var Menu_1 = __webpack_require__(183);
 
-var Chip_1 = __webpack_require__(183);
+var Chip_1 = __webpack_require__(184);
 
 var Field = function Field(_ref) {
   var field = _ref.field,
@@ -2908,31 +2925,31 @@ Field.displayName = 'Field';
 exports.default = Field;
 
 /***/ }),
-/* 180 */
+/* 181 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Dropdown");
 
 /***/ }),
-/* 181 */
+/* 182 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
 
 /***/ }),
-/* 182 */
+/* 183 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
-/* 183 */
+/* 184 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Chip");
 
 /***/ }),
-/* 184 */
+/* 185 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2959,7 +2976,7 @@ exports.StyledFields = styled_components_1.default.div.withConfig({
 }));
 
 /***/ }),
-/* 185 */
+/* 186 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3010,7 +3027,16 @@ var size = {
   initialWidth: 900,
   initialHeight: 400
 };
-var defaultContext = {};
+var defaultContext = {
+  nodeTextColorMaxContrast: {
+    colors: ['> themes.textColor', '> themes.inverseTextColor'],
+    default: '> themes.textColor'
+  },
+  nodeHighlightTextColorMaxContrast: {
+    colors: ['> themes.defaultNodeColor', '> themes.inverseDefaultNodeColor'],
+    default: '> themes.textColor'
+  }
+};
 var optionsSchema = {
   backgroundColor: {
     default: '> themes.defaultBackgroundColor',
@@ -3043,6 +3069,12 @@ var optionsSchema = {
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
     type: 'string'
   },
+  nodeTextColor: {
+    description: 'Specify the color used for unhighlighted nodes text.',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string',
+    default: '> nodeColor | maxContrast(nodeTextColorMaxContrast)'
+  },
   nodeHeight: {
     default: 21,
     description: 'Specify, in pixels, the height of each node.',
@@ -3054,6 +3086,12 @@ var optionsSchema = {
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
     type: 'string'
   },
+  nodeTextHighlightColor: {
+    description: 'Specify the color used for highlighted nodes text.',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string',
+    default: '> nodeHighlightColor | maxContrast(nodeHighlightTextColorMaxContrast)'
+  },
   nodeSpacingX: {
     default: 32,
     description: 'Specify, in pixels, the horizontal spacing between each node.',
@@ -3103,6 +3141,32 @@ var themes = {
       },
       prisma: variables_1.default.backgroundColorDialog(props)
     })(props);
+  },
+  inverseDefaultNodeColor: function inverseDefaultNodeColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.contentColorInverted(props),
+        light: variables_1.default.white(props) // equal to textColor in enterpriseDark
+
+      },
+      prisma: variables_1.default.contentColorInverted(props)
+    })(props);
+  },
+  textColor: function textColor(props) {
+    return pick_1.default({
+      enterprise: variables_1.default.textColor(props),
+      prisma: variables_1.default.contentColorDefault(props)
+    })(props);
+  },
+  inverseTextColor: function inverseTextColor(props) {
+    return pick_1.default({
+      enterprise: {
+        dark: variables_1.default.contentColorInverted(props),
+        light: variables_1.default.white(props) // equal to textColor in enterpriseDark
+
+      },
+      prisma: variables_1.default.contentColorInverted(props)
+    })(props);
   }
 };
 var EDITOR_LABEL_WIDTH = 140;