@elyra/canvas 12.30.0 → 12.31.1

package/src/common-properties/panels/subtabs/subtabs.jsx

@@ -81,6 +81,7 @@ class Subtabs extends React.Component {
 				<Tabs className={classNames("properties-subtabs", { "properties-leftnav-subtabs": this.props.leftnav })}
 					selected={activeTab}
 					light={this.props.controller.getLight()}
+					tabContentClassName="properties-subtab-panel"
 				>
 					{subTabs}
 				</Tabs>

package/src/common-properties/panels/tearsheet/tearsheet.scss

@@ -89,6 +89,7 @@ $properties-buttons-height: $spacing-10;
 				background-color: $ui-01;
 				border-bottom: 1px solid $ui-03;
 				margin-bottom: $spacing-05;
+				padding-left: $spacing-05;
 			}
 		}
 	}

package/src/common-properties/properties-controller.js

@@ -1054,7 +1054,8 @@ export default class PropertiesController {
 			const data = {
 				action: ACTIONS.UPDATE_PROPERTY,
 				property: propertyId,
-				value: convertedValue
+				value: convertedValue,
+				previousValue: initialValue
 			};
 			if (typeof type !== "undefined") {
 				data.type = type;

package/src/common-properties/properties-main/properties-main.jsx

@@ -25,7 +25,7 @@ import Form from "./../form/Form";
 import CommonPropertiesAction from "./../../command-actions/commonPropertiesAction";
 import PropertiesController from "./../properties-controller";
 import * as PropertyUtils from "./../util/property-utils";
-import { MESSAGE_KEYS, CONDITION_RETURN_VALUE_HANDLING, CARBON_ICONS, APPLY, CANCEL, ACTIONS } from "./../constants/constants";
+import { MESSAGE_KEYS, CONDITION_RETURN_VALUE_HANDLING, CARBON_ICONS, APPLY, CANCEL, ACTIONS, CATEGORY_VIEW } from "./../constants/constants";
 import { Size } from "./../constants/form-constants";
 import { validateParameterDefAgainstSchema } from "../schema-validator/properties-schema-validator.js";
 import { has, isEqual, omit, pick, cloneDeep } from "lodash";
@@ -477,6 +477,7 @@ class PropertiesMain extends React.Component {
 					icon={formData.icon}
 					heading={formData.heading}
 					showHeading={this.props.propertiesConfig.heading}
+					rightFlyoutTabsView={this.props.propertiesConfig.categoryView === CATEGORY_VIEW.TABS}
 				/>);
 
 				hasHeading = this.props.propertiesConfig.heading && (formData.icon || formData.heading);
@@ -511,6 +512,7 @@ class PropertiesMain extends React.Component {
 				showPropertiesButtons={this.showPropertiesButtons}
 				customPanels={this.props.customPanels}
 				rightFlyout={this.props.propertiesConfig.rightFlyout}
+				categoryView={this.props.propertiesConfig.categoryView}
 			/>);
 
 			if (this.props.propertiesConfig.containerType === "Editing") {
@@ -606,6 +608,7 @@ PropertiesMain.propTypes = {
 		applyOnBlur: PropTypes.bool,
 		disableSaveOnRequiredErrors: PropTypes.bool,
 		rightFlyout: PropTypes.bool,
+		categoryView: PropTypes.oneOf([CATEGORY_VIEW.ACCORDIONS, CATEGORY_VIEW.TABS]),
 		containerType: PropTypes.string,
 		enableResize: PropTypes.bool,
 		conditionReturnValueHandling: PropTypes.string,

package/src/common-properties/ui-conditions/condition-ops/greaterThan.js

@@ -43,7 +43,7 @@ function evaluate(paramInfo, param2Info, value, controller) {
 		}
 		return false;
 	case "string": {
-		if (paramInfo.control.controlType === ControlType.DATEPICKER) {
+		if (paramInfo.control && paramInfo.control.controlType === ControlType.DATEPICKER) {
 			const param1Date = new Date(paramInfo.value);
 			if (!isNaN(param1Date) && param2Info) {
 				const param2Date = new Date(param2Info.value);

package/src/common-properties/ui-conditions/condition-ops/isDateTime.js

@@ -24,7 +24,7 @@ function op() {
 
 function evaluate(paramInfo, param2Info, value, controller) {
 	if (paramInfo.value) { // only check if there is a value.
-		if (paramInfo.control.controlType !== ControlType.DATEPICKER && paramInfo.control.controlType !== ControlType.DATEPICKERRANGE) {
+		if (paramInfo.control && paramInfo.control.controlType !== ControlType.DATEPICKER && paramInfo.control.controlType !== ControlType.DATEPICKERRANGE) {
 			// always use iso format for time
 			const timeDateFormat = (value === "time") ? "HH:mm:ss:xxx" : DEFAULT_DATE_FORMAT;
 			const date = parse(paramInfo.value, timeDateFormat, new Date());

package/src/common-properties/ui-conditions/condition-ops/isEmpty.js

@@ -34,7 +34,7 @@ function evaluate(paramInfo, param2Info, value, controller) {
 	case "number":
 		return paramInfo.value === null;
 	case "object":
-		if (paramInfo.control.controlType === ControlType.DATEPICKERRANGE) {
+		if (paramInfo.control && paramInfo.control.controlType === ControlType.DATEPICKERRANGE) {
 			const startDate = paramInfo.value[0].trim();
 			const endDate = paramInfo.value[1].trim();
 			return startDate === "" && endDate === ""; // DATEPICKERRANGE is empty if both start and end dates are empty

package/src/common-properties/ui-conditions/condition-ops/isNotEmpty.js

@@ -33,7 +33,7 @@ function evaluate(paramInfo, param2Info, value, controller) {
 	case "number":
 		return paramInfo.value !== null;
 	case "object":
-		if (paramInfo.control.controlType === ControlType.DATEPICKERRANGE) {
+		if (paramInfo.control && paramInfo.control.controlType === ControlType.DATEPICKERRANGE) {
 			return paramInfo.value[0].trim() !== "" || paramInfo.value[1].trim() !== "";
 		}
 		return paramInfo.value === null ? false : paramInfo.value.length !== 0;

package/src/common-properties/ui-conditions/condition-ops/lessThan.js

@@ -44,7 +44,7 @@ function evaluate(paramInfo, param2Info, value, controller) {
 		}
 		return false;
 	case "string": {
-		if (paramInfo.control.controlType === ControlType.DATEPICKER) {
+		if (paramInfo.control && paramInfo.control.controlType === ControlType.DATEPICKER) {
 			const param1Date = new Date(paramInfo.value);
 			if (!isNaN(param1Date) && param2Info) {
 				const param2Date = new Date(param2Info.value);

package/src/context-menu/common-context-menu.jsx

@@ -18,8 +18,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { MenuItem, SubMenu } from "react-contextmenu";
-import Icon from "../icons/icon.jsx";
-import { CONTEXT_MENU_CARBON_ICONS } from "../common-canvas/constants/canvas-constants";
+import { ChevronRight16 } from "@carbon/icons-react";
 import ColorPickerPanel from "../color-picker/color-picker-panel.jsx";
 
 // context-menu sizing
@@ -139,31 +138,29 @@ class CommonContextMenu extends React.Component {
 					runningYPos += CONTEXT_MENU_DIVIDER_HEIGHT;
 					previousDivider = true;
 				}
-
-			} else if (submenu) {
+			} else if (menuDefinition[i].action === "colorBackground") {
 				previousDivider = false;
-				if (menuDefinition[i].menu === "colorPicker") {
-					const disabled = false;
-					const subMenuSize = { width: CONTEXT_MENU_WIDTH, height: 50 };
-					const subMenuContent = this.buildColorPickerPanel();
+				const disabled = false;
+				const subMenuSize = { width: CONTEXT_MENU_WIDTH, height: 50 };
+				const subMenuContent = this.buildColorPickerPanel();
 
-					const subMenu = this.buildSubMenu(
-						menuDefinition, i, subMenuContent, runningYPos, menuPos, menuSize, subMenuSize, canvasRect, disabled);
-					menuItems.push(subMenu);
+				const subMenu = this.buildSubMenu(
+					menuDefinition, i, subMenuContent, runningYPos, menuPos, menuSize, subMenuSize, canvasRect, disabled);
+				menuItems.push(subMenu);
 
-					runningYPos += CONTEXT_MENU_LINK_HEIGHT;
+				runningYPos += CONTEXT_MENU_LINK_HEIGHT;
 
-				} else {
-					const disabled = { disabled: this.areAllSubmenuItemsDisabled(menuDefinition[i].menu) };
-					const subMenuSize = this.calculateMenuSize(menuDefinition[i].menu);
-					const subMenuContent = this.buildMenu(menuDefinition[i].menu, menuSize, menuPos, canvasRect);
+			} else if (submenu) {
+				previousDivider = false;
+				const disabled = { disabled: this.areAllSubmenuItemsDisabled(menuDefinition[i].menu) };
+				const subMenuSize = this.calculateMenuSize(menuDefinition[i].menu);
+				const subMenuContent = this.buildMenu(menuDefinition[i].menu, menuSize, menuPos, canvasRect);
 
-					const subMenu = this.buildSubMenu(
-						menuDefinition, i, subMenuContent, runningYPos, menuPos, menuSize, subMenuSize, canvasRect, disabled);
-					menuItems.push(subMenu);
+				const subMenu = this.buildSubMenu(
+					menuDefinition, i, subMenuContent, runningYPos, menuPos, menuSize, subMenuSize, canvasRect, disabled);
+				menuItems.push(subMenu);
 
-					runningYPos += CONTEXT_MENU_LINK_HEIGHT;
-				}
+				runningYPos += CONTEXT_MENU_LINK_HEIGHT;
 
 			} else {
 				previousDivider = false;
@@ -181,7 +178,7 @@ class CommonContextMenu extends React.Component {
 
 	buildColorPickerPanel() {
 		return (
-			<ColorPickerPanel clickActionHandler={this.colorPickHandler} clickActionHandler={this.colorClicked} />
+			<ColorPickerPanel clickActionHandler={this.colorClicked} />
 		);
 	}
 
@@ -190,7 +187,7 @@ class CommonContextMenu extends React.Component {
 		const rtl = this.buildRtlState(menuPos, menuSize, subMenuSize, canvasRect);
 		const subMenuPosStyle = this.buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect);
 
-		const icon = <Icon type={CONTEXT_MENU_CARBON_ICONS.CHEVRONARROWS.RIGHT} disabled={false} className={"react-contextmenu-submenu-icon"} />;
+		const icon = (<ChevronRight16 />);
 		const menuItem = <div>{menuDefinition[index].label}{icon} </div>;
 
 		return (

package/src/context-menu/context-menu-wrapper.jsx

@@ -41,17 +41,19 @@ export default class ContextMenuWrapper extends React.Component {
 	// which is specified in this.props.contextMenuPos object.
 	getCanvasRect() {
 		const containingDiv = document.getElementById(this.props.containingDivId);
-		const clientRect = containingDiv.getBoundingClientRect();
-		const canvasRect = {
-			top: 0,
-			bottom: clientRect.bottom - clientRect.top,
-			left: 0,
-			right: clientRect.right - clientRect.left,
-			height: clientRect.height,
-			width: clientRect.width
-		};
-
-		return canvasRect;
+		if (containingDiv) {
+			const clientRect = containingDiv.getBoundingClientRect();
+			return {
+				top: 0,
+				bottom: clientRect.bottom - clientRect.top,
+				left: 0,
+				right: clientRect.right - clientRect.left,
+				height: clientRect.height,
+				width: clientRect.width
+			};
+		}
+		// Assist Jests tests to run when containingDiv is not available.
+		return { top: 0, bottom: 200, left: 0, right: 50, height: 200, width: 50 };
 	}
 
 	handleClickOutside(e) {

package/src/object-model/config-utils.js

@@ -77,6 +77,7 @@ export default class CanvasUtils {
 			enableBrowserEditMenu: true,
 			enableMarkdownInComments: false,
 			enableAutoLinkOnlyFromSelNodes: false,
+			enableContextToolbar: false,
 			enableSaveZoom: "None",
 			enableSnapToGridType: "None",
 			enableSnapToGridX: null,
@@ -96,7 +97,10 @@ export default class CanvasUtils {
 			enableCanvasLayout: {}, // Not documented
 			enableUseCardFromOriginalPorts: false, // Not documented
 			tipConfig: {
-				"palette": true,
+				"palette": {
+					categories: true,
+					nodesTemplates: true
+				},
 				"nodes": true,
 				"ports": true,
 				"decorations": true,

package/src/object-model/layout-dimensions.js

@@ -240,6 +240,10 @@ const portsHorizontalDefaultLayout = {
 		// Spacing between the port arcs around the ports.
 		portArcSpacing: 3,
 
+		// Position of the context toolbar realtive to the node. Some adjustment
+		// will be made to account for the width of the toolbar.
+		contextToolbarPosition: "topRight",
+
 		// Display of vertical ellipsis to show context menu
 		ellipsisDisplay: true,
 		ellipsisPosition: "topLeft",
@@ -378,7 +382,7 @@ const portsHorizontalDefaultLayout = {
 		// Position of the comment toolbar as an offset from the comment position
 		// (which is the top left corner of the comment bounding box).
 		commentToolbarPosX: -2,
-		commentToolbarPosY: -44,
+		commentToolbarPosY: -36,
 
 		// ---------------------------------------------------------------------------
 		// Layout values for operations
@@ -646,6 +650,10 @@ const portsVerticalDefaultLayout = {
 		// Spacing between the port arcs around the ports.
 		portArcSpacing: 0,
 
+		// Position of the context toolbar realtive to the node. Some adjustment
+		// will be made to account for the width of the toolbar.
+		contextToolbarPosition: "topCenter",
+
 		// Display of vertical ellipsis to show context menu
 		ellipsisDisplay: true,
 		ellipsisPosition: "topLeft",
@@ -784,7 +792,7 @@ const portsVerticalDefaultLayout = {
 		// Position of the comment toolbar as an offset from the comment position
 		// (which is the top left corner of the comment bounding box).
 		commentToolbarPosX: -2,
-		commentToolbarPosY: -44,
+		commentToolbarPosY: -36,
 
 		// ---------------------------------------------------------------------------
 		// Layout values for operations

package/src/object-model/object-model.js

@@ -342,6 +342,22 @@ export default class ObjectModel {
 		return pal;
 	}
 
+	setIsOpenCategory(categoryId, isOpen) {
+		this.store.dispatch({ type: "SET_IS_OPEN_CATEGORY", data: { categoryId: categoryId, isOpen } });
+	}
+
+	setIsOpenAllCategories(isOpen) {
+		this.store.dispatch({ type: "SET_IS_OPEN_ALL_CATEGORIES", data: { isOpen } });
+	}
+
+	isPaletteCategoryOpen(categoryId) {
+		const category = this.store.getPaletteCategory(categoryId);
+		if (category) {
+			return category.is_open;
+		}
+		return null;
+	}
+
 	// ---------------------------------------------------------------------------
 	// Pipeline Flow and Canvas methods
 	// ---------------------------------------------------------------------------
@@ -1418,18 +1434,22 @@ export default class ObjectModel {
 	// Context menu methods
 	// ---------------------------------------------------------------------------
 
-	openContextMenu(menuDef) {
-		this.store.dispatch({ type: "SET_CONTEXT_MENU_DEF", data: { menuDef: menuDef } });
+	openContextMenu(menuDef, source) {
+		this.store.dispatch({ type: "OPEN_CONTEXT_MENU", data: { menuDef, source } });
 	}
 
 	closeContextMenu() {
-		this.store.dispatch({ type: "SET_CONTEXT_MENU_DEF", data: { menuDef: [] } });
+		this.store.dispatch({ type: "CLOSE_CONTEXT_MENU" });
 	}
 
 	isContextMenuDisplayed() {
 		return this.store.isContextMenuDisplayed();
 	}
 
+	getContextMenuSource() {
+		return this.store.getContextMenuSource();
+	}
+
 	// ---------------------------------------------------------------------------
 	// Right flyout methods
 	// ---------------------------------------------------------------------------

package/src/object-model/redux/canvas-store.js

@@ -71,7 +71,7 @@ export default class CanavasStore {
 			tooltip: {},
 			canvastoolbar: {},
 			texttoolbar: { isOpen: false },
-			contextmenu: { menuDef: [] },
+			contextmenu: { isOpen: false, menuDef: [], source: {} },
 			rightflyout: {},
 			bottompanel: { panelHeight: 393 },
 			toppanel: { }
@@ -107,6 +107,10 @@ export default class CanavasStore {
 		return cloneDeep(this.store.getState().palette.content);
 	}
 
+	getPaletteCategory(categoryId) {
+		return cloneDeep(this.store.getState().palette.content.categories.find((c) => c.id === categoryId));
+	}
+
 	getCanvasInfo() {
 		return cloneDeep(this.store.getState().canvasinfo);
 	}
@@ -275,12 +279,12 @@ export default class CanavasStore {
 		return this.getNotificationPanel().isOpen;
 	}
 
-	getContextMenu() {
-		return this.cloneData(this.store.getState().contextmenu);
+	getContextMenuSource() {
+		return this.cloneData(this.store.getState().contextmenu.source);
 	}
 
 	isContextMenuDisplayed() {
-		return !isEmpty(this.store.getState().contextmenu.menuDef);
+		return this.store.getState().contextmenu.isOpen;
 	}
 
 	getSelectionInfo() {

package/src/object-model/redux/reducers/categories.js

@@ -78,6 +78,18 @@ export default (state = [], action) => {
 		});
 	}
 
+	case "SET_IS_OPEN_CATEGORY": {
+		return state.map((category) => {
+			if (category.id === action.data.categoryId) {
+				return Object.assign({}, category, { is_open: action.data.isOpen });
+			}
+			return category;
+		});
+	}
+
+	case "SET_IS_OPEN_ALL_CATEGORIES": {
+		return state.map((category) => Object.assign({}, category, { is_open: action.data.isOpen }));
+	}
 	default:
 		return state;
 	}

package/src/object-model/redux/reducers/contextmenu.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 Elyra Authors
+ * Copyright 2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,9 +16,16 @@
 
 export default (state = {}, action) => {
 	switch (action.type) {
-	case "SET_CONTEXT_MENU_DEF": {
+	case "OPEN_CONTEXT_MENU": {
 		const menuDef = action.data.menuDef.map((m) => Object.assign({}, m));
-		return Object.assign({}, state, { menuDef: menuDef });
+		if (menuDef.length > 0) {
+			return Object.assign({}, state, { isOpen: true, menuDef, source: action.data.source });
+		}
+		return state;
+	}
+
+	case "CLOSE_CONTEXT_MENU": {
+		return Object.assign({}, state, { isOpen: false });
 	}
 
 	default:

package/src/object-model/redux/reducers/palette.js

@@ -28,6 +28,8 @@ export default (state = {}, action) => {
 
 	case "ADD_NODE_TYPES_TO_PALETTE":
 	case "REMOVE_NODE_TYPES_FROM_PALETTE":
+	case "SET_IS_OPEN_CATEGORY":
+	case "SET_IS_OPEN_ALL_CATEGORIES":
 	case "SET_CATEGORY_LOADING_TEXT":
 	case "SET_CATEGORY_EMPTY_TEXT": {
 		const newContent = Object.assign({}, state.content, { categories: categories(state.content.categories, action) });
@@ -38,6 +40,7 @@ export default (state = {}, action) => {
 	case "SET_PALETTE_OPEN_STATE":
 		return Object.assign({}, state, { isOpen: action.data.isOpen });
 
+
 	default:
 		return state;
 	}

package/src/palette/palette-flyout-content-category.jsx

@@ -28,13 +28,9 @@ class PaletteFlyoutContentCategory extends React.Component {
 	constructor(props) {
 		super(props);
 
-		this.state = {
-			isOpen: false
-		};
-
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
-		this.categorySelected = this.categorySelected.bind(this);
+		this.categoryClicked = this.categoryClicked.bind(this);
 	}
 
 	onMouseOver(ev) {
@@ -102,7 +98,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 		const titleObj = this.getTitleObj();
 		const content = this.getContent();
 		return (
-			<AccordionItem title={titleObj} onHeadingClick={({ isOpen }) => this.setState({ isOpen })}>
+			<AccordionItem title={titleObj} open={this.props.category.is_open}>
 				{content}
 			</AccordionItem>
 		);
@@ -115,7 +111,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return (
 			<div className="palette-flyout-category"
 				data-id={get(this.props.category, "id", "")}
-				onClick={this.categorySelected}
+				onClick={this.categoryClicked}
 				value={this.props.category.label}
 				onMouseOver={this.onMouseOver}
 				onMouseLeave={this.onMouseLeave}
@@ -174,12 +170,12 @@ class PaletteFlyoutContentCategory extends React.Component {
 	}
 
 	// Returns the content object for the AccordionItem. This is only set to
-	// something if the category is open (that is: isOpen is true). It is useful
-	// to remove the nodes from the DOM when the category is closed because this
-	// can help inline SVG icons on the canvas, that reference elements in the
-	// <defs> element, to appear correclty.
+	// something if the category is open (that is: this.props.category.is_open
+	// is true). We remove the nodes from the DOM, when the category
+	// is closed, because this helps inline SVG icons on the canvas, that
+	// reference elements in the <defs> element, to appear correctly.
 	getContent() {
-		if (this.state.isOpen) {
+		if (this.props.category.is_open) {
 			const nodeTypeInfos = this.props.category.node_types.map((nt) => ({ nodeType: nt, category: this.props.category }));
 			return (
 				<PaletteContentList
@@ -195,8 +191,16 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return null;
 	}
 
-	categorySelected() {
-		this.props.categorySelectedMethod(this.props.category.id);
+	categoryClicked(evt) {
+		// Stopping event propagation prevents an extra refresh of the node icons when
+		// a category is opened.
+		evt.stopPropagation();
+
+		if (this.props.category.is_open) {
+			this.props.canvasController.closePaletteCategory(this.props.category.id);
+		} else {
+			this.props.canvasController.openPaletteCategory(this.props.category.id);
+		}
 	}
 
 	render() {
@@ -208,7 +212,6 @@ class PaletteFlyoutContentCategory extends React.Component {
 
 PaletteFlyoutContentCategory.propTypes = {
 	category: PropTypes.object.isRequired,
-	categorySelectedMethod: PropTypes.func.isRequired,
 	canvasController: PropTypes.object.isRequired,
 	isPaletteOpen: PropTypes.bool.isRequired,
 	isEditingEnabled: PropTypes.bool.isRequired,

package/src/palette/palette-flyout-content.jsx

@@ -39,13 +39,11 @@ class PaletteFlyoutContent extends React.Component {
 		// debounce and after the debounce unwinds it sets searchString in this
 		// class which causes the filtered result set to be calculated and displayed.
 		this.state = {
-			selectedCategoryIds: [],
 			searchString: ""
 		};
 
 		this.categories = [];
 
-		this.categorySelected = this.categorySelected.bind(this);
 		this.getUniqueCategories = this.getUniqueCategories.bind(this);
 		this.setSearchString = this.setSearchString.bind(this);
 		this.handleSearchStringChange = this.handleSearchStringChange.bind(this);
@@ -77,7 +75,6 @@ class PaletteFlyoutContent extends React.Component {
 					<PaletteFlyoutContentCategory
 						key={category.id}
 						category={category}
-						categorySelectedMethod={this.categorySelected}
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.isPaletteOpen}
 						isEditingEnabled={this.props.isEditingEnabled}
@@ -123,18 +120,6 @@ class PaletteFlyoutContent extends React.Component {
 		this.setSearchStringThrottled();
 	}
 
-	categorySelected(catSelId) {
-		const selCatIds = this.isCategorySelected(catSelId)
-			? this.state.selectedCategoryIds.filter((catId) => catId !== catSelId)
-			: this.state.selectedCategoryIds.concat(catSelId);
-
-		this.setState({ selectedCategoryIds: selCatIds });
-	}
-
-	isCategorySelected(categoryId) {
-		return this.state.selectedCategoryIds.some((cId) => cId === categoryId);
-	}
-
 	render() {
 		this.categories = this.getUniqueCategories(this.props.paletteJSON.categories);
 		const contentDivs = this.props.isPaletteOpen && this.state.searchString