analytics/webcontent/bi/ca-modeller/bridge/diagram/util/NodeStylesUtils.js

/**
 * Licensed Materials - Property of IBM 
 * IBM Cognos Products: Modeling UI (C) Copyright IBM Corp. 2016, 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP
 * Schedule Contract with IBM Corp.
 */

define([], function() {
	var DEFAULT_ICON_COLOR = '';

	var DEFAULT_ICON = '';

	var styleMap = {
		'copy': {color: '', icon: ''},
		'reference': {color: '#00B4A0', icon: '#link_16_v7'},
		'danger': {color: '#E62325', icon: '#warning_16_v7', backgroundColor: 'rgba(255,80,80,0.1)'},
		'info': {color: '#595859', icon: '#information_16_v7', backgroundColor: 'rgba(255,80,80,0.1)'},
		'warning': {color: '#FFB000', icon: '#warning--alt_16_v7', backgroundColor: 'rgba(255,80,80,0.1)'},
		'package': {color: '#00B4A0', icon: '#repository_16_v7'}
	};

	var sizeMap = {
		nodeValues: {
			// Used to calculate width of rectangle based on label length
			EM_PIXEL_VALUE: 14,
			// Standard height of rectangle
			RECT_HEIGHT: 50,
			// Length, in pixels, of filter icon offset to center the icon
			FILTER_ICON_OFFSET: 26,
			// Standard height of an icon in the diagram
			ICON_HEIGHT: 16,
			// Standard width (should be square)
			ICON_WIDTH: 16,
			// Offset to center the text vertically in the rect
			TEXT_Y_OFFSET: 5,
			// Max width for a node (pixels)
			MAX_NODE_WIDTH: 160,
			// Length, in pixels, of error icon offset to center the icon
			VALIDATION_ICON_OFFSET: 8,
			// Height of an error icon in the diagram
			VALIDATION_ICON_HEIGHT: 16,
			// Width error (should be square)
			VALIDATION_ICON_WIDTH: 16,
			// Standard height of the details box
			TABLE_DETAILS_HEIGHT: 15,
			// Offset to center the table details text vertically in the rect
			TABLE_DETAILS_TEXT_Y_OFFSET: 36,
		},
		linkValues: {
			RECT_SIZE: 20,
			RECT_ROUNDED: 10,
			TEXT_Y_OFFSET: 3
		}
	};

	var NodeStylesUtils = {

		/**
		 * Return the style for the given type.
		 *
		 * @param {String} the style type
		 * @return {Object} the style for the given type
		 */
		getStyle: function(type) {
			return styleMap[type];
		},

		/**
		 * Return the style color for a node of a given type
		 * @param {String} type - What type a node is (reference, copy, etc)
		 */
		getColor: function(type){
			if( !(type && styleMap[type]) ){
				return DEFAULT_ICON_COLOR;
			}
			return styleMap[type].color;
		},

		/**
		 * Return the style icon for a node of a given type (if needed)
		 * @param {String} type - What type a node is (reference, copy, etc)
		 */
		getIcon: function(type){
			if( !(type && styleMap[type]) ){
				return DEFAULT_ICON;
			}
			return styleMap[type].icon;
		},

		/**
		 * Calculate the required length of a diagram node box based on length of label
		 * @param {Object} d - A d3 selection of type 'node'
		 */
		_nodeRectEMLength: function(d) {
			return Math.min(sizeMap.nodeValues.MAX_NODE_WIDTH / sizeMap.nodeValues.EM_PIXEL_VALUE, (sizeMap.nodeValues.ICON_WIDTH / 2) + (d.label ? (d.label.length / 2) : 0));
		},

		/*-- PSEUDO CSS STYLES FOR SVG ELEMENTS --*/

		/**
		 * Provides styling for diagram nodes based on d3 selections
		 */
		diagramNodeStyles: {
			boxColorStyle: {
				'stroke': function(d) {
					return NodeStylesUtils.getColor(d.instanceType);
				}
			},
			boxStyle: {
				'class': 'mui-diagram-node-box',
				'height': sizeMap.nodeValues.RECT_HEIGHT,
				'fill': '#FFFFFF',
				'stroke-width': '2',
				'transition': 'fill 150ms',
				'width': function(d) {
					return NodeStylesUtils._nodeRectEMLength(d) + 'em';
				},
				'transform': function(d) {
					return 'translate(-' + (NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) + ', ' + -(sizeMap.nodeValues.RECT_HEIGHT / 2) + ')';
				},
			},
			validationNodeIconStyle: {
				'class': 'mui_validationIcon',
				'height': sizeMap.nodeValues.VALIDATION_ICON_HEIGHT,
				'width': sizeMap.nodeValues.VALIDATION_ICON_WIDTH,
				'xlink:href': function(d){
					return d.severityInfo ? NodeStylesUtils.getIcon(d.severityInfo.intent) : DEFAULT_ICON;
				},
				'fill': function(d){
					return d.severityInfo ? NodeStylesUtils.getColor(d.severityInfo.intent) : DEFAULT_ICON_COLOR;
				},
				'x': function(d) {
					return -((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.VALIDATION_ICON_OFFSET);
				},
				'y': -(sizeMap.nodeValues.VALIDATION_ICON_HEIGHT / 2),
				'opacity': function(d) {
					return d.isValid ? 0 : 1;
				}
			},
			validationNodeCircleStyle: {
				'r': 6,
				'fill': 'transparent',
				'cx': function(d) {
					return -((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.VALIDATION_ICON_OFFSET) + 6;
				},
				'cy': -(sizeMap.nodeValues.VALIDATION_ICON_HEIGHT / 2) + 6
			},
			validationLinkIconStyle: {
				'class': 'mui_validationIcon',
				'height': sizeMap.nodeValues.VALIDATION_ICON_HEIGHT,
				'width': sizeMap.nodeValues.VALIDATION_ICON_WIDTH,
				'xlink:href': function(d){
					return d.severityInfo ? NodeStylesUtils.getIcon(d.severityInfo.intent) : DEFAULT_ICON;
				},
				'fill': function(d){
					return d.severityInfo ? NodeStylesUtils.getColor(d.severityInfo.intent) : DEFAULT_ICON_COLOR;
				},
				'x': function(d) {
					return 0;
				},
				// 'y': -(sizeMap.nodeValues.VALIDATION_ICON_HEIGHT / 2),
				'y': 0,
				'opacity': function(d) {
					return d.isValid ? 0 : 1;
				}
			},
			validationLinkCircleStyle: {
				'r': 6,
				'cx': 6,
				'cy': 6,
				'fill': 'transparent'
			},
			validationLinkGroupIconStyle: {
				'class': 'mui_validationIcon',
				'height': sizeMap.nodeValues.VALIDATION_ICON_HEIGHT,
				'width': sizeMap.nodeValues.VALIDATION_ICON_WIDTH,
				'x': function(d) {
					return 0;
				},
				'y': 0
			},
			textStyle: {
				'dy': sizeMap.nodeValues.TEXT_Y_OFFSET,
				'class': function(d) {
					return d.hidden ? 'mui-hidden' : '';
				}
			},
			filterIconStyle: {
				'height': sizeMap.nodeValues.ICON_HEIGHT,
				'width': sizeMap.nodeValues.ICON_WIDTH,
				'xlink:href': '#filter_16_v7',
				'fill': function(d){
					return NodeStylesUtils.getColor(d.instanceType);
				},
				'x': function(d) {
					return ((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.FILTER_ICON_OFFSET);
				},
				'y': -sizeMap.nodeValues.ICON_HEIGHT,
				'opacity': function(d) {
					if(d.filter) {
						return d.hidden ? 0.5 : 1;
					}

					return 0;
				}
			},
			referenceIconStyle: {
				'height': sizeMap.nodeValues.ICON_HEIGHT,
				'width': sizeMap.nodeValues.ICON_WIDTH,
				'xlink:href': function(d){
					return NodeStylesUtils.getIcon(d.instanceType);
				},
				'fill': function(d){
					return NodeStylesUtils.getColor(d.instanceType);
				},
				'x': function(d) {
					return ((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.FILTER_ICON_OFFSET);
				},
				'y': 0,
				'opacity': function(d) {
					return d.instanceType === 'reference' || d.instanceType === 'package' ? 1 : 0;
				}
			},
			tableDetailsBoxStyle: {
				'class': 'mui-diagram-table-details-box',
				'height': sizeMap.nodeValues.TABLE_DETAILS_HEIGHT,
				'fill':  function(d){
					return NodeStylesUtils.getColor(d.instanceType);
				},
				'stroke': function(d){
					return NodeStylesUtils.getColor(d.instanceType);
				},
				'stroke-width': '2',
				'transition': 'fill 150ms',
				'width': function(d) {
					return NodeStylesUtils._nodeRectEMLength(d) + 'em';
				},
				'transform': function(d) {
					return 'translate(-' + (NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) + ', ' + (sizeMap.nodeValues.RECT_HEIGHT / 2) + ')';
				},
				'visibility': function(d) {
					return d.displayTableInfo ? 'visible' : 'hidden';
				}
			},
			tableDetailsTextStyle: {
				'visibility': function(d) {
					return d.displayTableInfo ? 'visible' : 'hidden';
				},
				'dy': sizeMap.nodeValues.TABLE_DETAILS_TEXT_Y_OFFSET,
			}
		},

		/**
		 * Provides styling for diagram cardinality markers
		 */
		CardinalityStyle: {
			boxStyle: {
				'width': sizeMap.linkValues.RECT_SIZE,
				'height': sizeMap.linkValues.RECT_SIZE,
				'rx': sizeMap.linkValues.RECT_ROUNDED,
				'ry': sizeMap.linkValues.RECT_ROUNDED
			},
			textStyle: {
				'dx': sizeMap.linkValues.RECT_SIZE / 2,
				'dy': (sizeMap.linkValues.RECT_SIZE / 2) + sizeMap.linkValues.TEXT_Y_OFFSET
			}
		}
	};
	return NodeStylesUtils;
});