@elyra/canvas 12.10.1 → 12.11.1

package/src/common-canvas/svg-canvas-utils-links.js

@@ -58,7 +58,7 @@ export default class SvgCanvasLinks {
 		let srcCenterX;
 		let srcCenterY;
 
-		if (srcNode.layout.drawNodeLinkLineFromTo === "image_center" && !this.nodeUtils.isExpanded(srcNode)) {
+		if (srcNode.layout.drawNodeLinkLineFromTo === "image_center" && !CanvasUtils.isExpanded(srcNode)) {
 			srcCenterX = this.nodeUtils.getNodeImageCenterPosX(srcNode);
 			srcCenterY = this.nodeUtils.getNodeImageCenterPosY(srcNode);
 		} else {
@@ -160,7 +160,7 @@ export default class SvgCanvasLinks {
 		let trgCenterX;
 		let trgCenterY;
 
-		if (srcNode.layout.drawNodeLinkLineFromTo === "image_center" && !this.nodeUtils.isExpanded(srcNode)) {
+		if (srcNode.layout.drawNodeLinkLineFromTo === "image_center" && !CanvasUtils.isExpanded(srcNode)) {
 			srcCenterX = this.nodeUtils.getNodeImageCenterPosX(srcNode);
 			srcCenterY = this.nodeUtils.getNodeImageCenterPosY(srcNode);
 		} else {
@@ -168,7 +168,7 @@ export default class SvgCanvasLinks {
 			srcCenterY = this.nodeUtils.getNodeCenterPosY(srcNode);
 		}
 
-		if (trgNode.layout.drawNodeLinkLineFromTo === "image_center" && !this.nodeUtils.isExpanded(trgNode)) {
+		if (trgNode.layout.drawNodeLinkLineFromTo === "image_center" && !CanvasUtils.isExpanded(trgNode)) {
 			trgCenterX = this.nodeUtils.getNodeImageCenterPosX(trgNode);
 			trgCenterY = this.nodeUtils.getNodeImageCenterPosY(trgNode);
 		} else {

package/src/common-canvas/svg-canvas-utils-nodes.js

@@ -16,7 +16,7 @@
 
 import CanvasUtils from "./common-canvas-utils.js";
 import { ERROR, WARNING, NODE_ERROR_ICON, NODE_WARNING_ICON,
-	SUPER_NODE, TEXT_AREA_BORDER_ADJUSTMENT } from "./constants/canvas-constants";
+	TEXT_AREA_BORDER_ADJUSTMENT } from "./constants/canvas-constants";
 
 export default class SvgCanvasNodes {
 	constructor(canvasLayout) {
@@ -33,7 +33,7 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeLabelClass(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return "d3-node-label d3-label-single-line " + this.getMessageLabelClass(node.messages);
 		}
 		const lineTypeClass = node.layout.labelSingleLine ? " d3-label-single-line" : " d3-label-multi-line";
@@ -42,7 +42,7 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeLabelTextAreaClass(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return "d3-node-label-entry d3-label-single-line";
 		}
 		const lineTypeClass = node.layout.labelSingleLine ? " d3-label-single-line" : " d3-label-multi-line";
@@ -126,7 +126,7 @@ export default class SvgCanvasNodes {
 
 	// Returns the absolute x coordinate of the center of the node image
 	getNodeImageCenterPosX(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return node.x_pos + this.canvasLayout.supernodeImagePosX + (this.canvasLayout.supernodeImageWidth / 2);
 		}
 		return node.x_pos +
@@ -136,7 +136,7 @@ export default class SvgCanvasNodes {
 
 	// Returns the absolute y coordinate of the center of the node image
 	getNodeImageCenterPosY(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return node.y_pos + this.canvasLayout.supernodeImagePosY + (this.canvasLayout.supernodeImageHeight / 2);
 		}
 		return node.y_pos +
@@ -145,35 +145,35 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeImagePosX(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeImagePosX;
 		}
 		return this.getElementPosX(node.width, node.layout.imagePosX, node.layout.imagePosition);
 	}
 
 	getNodeImagePosY(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeImagePosY;
 		}
 		return this.getElementPosY(node.height, node.layout.imagePosY, node.layout.imagePosition);
 	}
 
 	getNodeImageWidth(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeImageWidth;
 		}
 		return node.layout.imageWidth;
 	}
 
 	getNodeImageHeight(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeImageHeight;
 		}
 		return node.layout.imageHeight;
 	}
 
 	getNodeLabelPosX(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeLabelPosX;
 		}
 		const x = this.getElementPosX(node.width, node.layout.labelPosX, node.layout.labelPosition);
@@ -181,21 +181,21 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeLabelPosY(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeLabelPosY;
 		}
 		return this.getElementPosY(node.height, node.layout.labelPosY, node.layout.labelPosition);
 	}
 
 	getNodeLabelWidth(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return node.width - this.canvasLayout.supernodeLabelPosX + this.canvasLayout.supernodeErrorPosX;
 		}
 		return node.layout.labelWidth;
 	}
 
 	getNodeLabelHeight(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeLabelHeight;
 		}
 		return node.layout.labelHeight;
@@ -210,7 +210,7 @@ export default class SvgCanvasNodes {
 		const posX = fullLabelOnHover ? this.getNodeLabelHoverPosX(node) : this.getNodeLabelPosX(node);
 		const spanWidth = spanObj.getBoundingClientRect().width;
 
-		if (node.layout.labelAlign === "center" && !this.isExpandedSupernode(node)) {
+		if (node.layout.labelAlign === "center" && !CanvasUtils.isExpandedSupernode(node)) {
 			const halfLabelWidth = labelWidth / 2;
 			const xCenterPosition = posX + halfLabelWidth;
 			const xOffsetFromCenter = Math.min(halfLabelWidth, ((spanWidth / zoomScale) / 2));
@@ -271,14 +271,14 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeEllipsisWidth(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeEllipsisWidth;
 		}
 		return node.layout.ellipsisWidth;
 	}
 
 	getNodeEllipsisHeight(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeEllipsisHeight;
 		}
 		return node.layout.ellipsisHeight;
@@ -293,7 +293,7 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeEllipsisPosX(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return node.width + this.canvasLayout.supernodeEllipsisPosX;
 		}
 
@@ -301,7 +301,7 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeEllipsisPosY(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeEllipsisPosY;
 		}
 
@@ -314,28 +314,28 @@ export default class SvgCanvasNodes {
 	}
 
 	getNodeErrorPosX(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return node.width + this.canvasLayout.supernodeErrorPosX;
 		}
 		return this.getElementPosX(node.width, node.layout.errorXPos, node.layout.errorPosition);
 	}
 
 	getNodeErrorPosY(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeErrorPosY;
 		}
 		return this.getElementPosY(node.height, node.layout.errorYPos, node.layout.errorPosition);
 	}
 
 	getNodeErrorWidth(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeErrorWidth;
 		}
 		return node.layout.errorWidth;
 	}
 
 	getNodeErrorHeight(node) {
-		if (this.isExpandedSupernode(node)) {
+		if (CanvasUtils.isExpandedSupernode(node)) {
 			return this.canvasLayout.supernodeErrorHeight;
 		}
 		return node.layout.errorHeight;
@@ -363,28 +363,6 @@ export default class SvgCanvasNodes {
 		return y + Number(yOffset);
 	}
 
-	isExpandedSupernode(node) {
-		return this.isSupernode(node) && this.isExpanded(node);
-	}
-
-	isExpanded(node) {
-		return node.is_expanded === true;
-	}
-
-	isSupernode(node) {
-		return node.type === SUPER_NODE;
-	}
-
-	// Returns true if either the cardinality of the default input port or
-	// the default output port of the node passed in is maxed out based on
-	// the array of links passed in.
-	isNodeDefaultPortsCardinalityAtMax(node, links) {
-		const defInputPort = CanvasUtils.getDefaultInputPortId(node);
-		const defOutputPort = CanvasUtils.getDefaultOutputPortId(node);
-		return CanvasUtils.isSrcCardinalityAtMax(defOutputPort, node, links) ||
-			CanvasUtils.isTrgCardinalityAtMax(defInputPort, node, links);
-	}
-
 	// Returns the X offset for the port which references the nodeId passed in
 	// based on the precalculated X coordinate of the port.
 	getSupernodePortXOffset(nodeId, ports) {

package/src/common-properties/actions.js

@@ -41,11 +41,15 @@ export const SET_ADD_REMOVE_ROWS = "SET_ADD_REMOVE_ROWS";
 export const UPDATE_STATIC_ROWS = "UPDATE_STATIC_ROWS";
 export const CLEAR_STATIC_ROWS = "CLEAR_STATIC_ROWS";
 export const SET_TABLE_BUTTON_ENABLED = "SET_TABLE_BUTTON_ENABLED";
+export const SET_HIDE_EDIT_BUTTON = "SET_HIDE_EDIT_BUTTON";
 
 
 /*
  * action creators
  */
+export function setHideEditButton(disableState) {
+	return { type: SET_HIDE_EDIT_BUTTON, info: disableState };
+}
 
 export function setPropertyValues(properties) {
 	return { type: SET_PROPERTY_VALUES, properties };

package/src/common-properties/components/field-picker/field-picker.jsx

@@ -140,43 +140,40 @@ export default class FieldPicker extends React.Component {
 		for (let i = 0; i < fields.length; i++) {
 			const field = fields[i];
 			const columns = [];
-			let fieldContent = (
-				<div className="properties-fp-field">
-					<div className="properties-fp-field-name">
-						{field.origName}
-					</div>
-				</div>
-			);
-			if (this.props.dmIcon) {
+			let dmIcon = null;
+			if (this.props.dmIcon && this.props.dmIcon !== "type") {
 				const metadata = this.props.controller.getDatasetMetadataFields();
-				const dmIconType = PropertyUtils.getDMFieldIcon(metadata,
-					field.origName, this.props.dmIcon);
-				const dmIcon = dmIconType ? <Icon type={dmIconType} /> : null;
-				let disabled = true;
-				if (field.origName) {
-					disabled = false;
-				}
-				const fpFieldName = (
-					<span className="properties-fp-field-name">
-						{field.origName}
-					</span>
-				);
-				const fieldNameWithTooltip = (
-					<TruncatedContentTooltip
-						content={fpFieldName}
-						tooltipText={field.origName}
-						disabled={disabled}
-					/>
-				);
-				fieldContent = (
-					<div className="properties-fp-field">
+				const dmIconType = PropertyUtils.getDMFieldIcon(metadata, field.origName, this.props.dmIcon);
+				const icon = dmIconType ? <Icon type={dmIconType} /> : null;
+				// don't show icon for type since it's already being displayed
+				if (icon) {
+					dmIcon = (
 						<div className="properties-fp-field-type-icon">
-							{dmIcon}
+							{icon}
 						</div>
-						{fieldNameWithTooltip}
-					</div>
-				);
+					);
+				}
 			}
+			const fpFieldName = (
+				<span className="properties-fp-field-name">
+					{field.origName}
+				</span>
+			);
+
+			const fieldNameWithTooltip = (
+				<TruncatedContentTooltip
+					content={fpFieldName}
+					tooltipText={field.origName}
+					disabled={false}
+				/>
+			);
+			const fieldContent = (
+				<div className="properties-fp-field">
+					{dmIcon}
+					{fieldNameWithTooltip}
+				</div>
+			);
+
 			columns.push({
 				column: "fieldName",
 				content: fieldContent,
@@ -448,7 +445,7 @@ export default class FieldPicker extends React.Component {
 				onSort={this.onSort}
 				filterKeyword={this.state.filterText}
 				scrollKey="field-picker"
-				rows={-1}
+				noAutoSize
 				tableLabel={this.props.title ? this.props.title : ""}
 				selectedRows={this.selectedRowsIndex}
 				updateRowSelections={this.updateFieldSelections}
@@ -465,14 +462,14 @@ export default class FieldPicker extends React.Component {
 		const table = this._genTable();
 
 		if (this.props.rightFlyout) {
-			return (<div>
+			return (<React.Fragment>
 				<div className="properties-fp-top-row">
 					{filterTypes}
 					{resetButton}
 				</div>
 				{table}
 				{backButton}
-			</div>);
+			</React.Fragment>);
 		}
 
 		return (<div>

package/src/common-properties/components/field-picker/field-picker.scss

@@ -18,10 +18,6 @@
 	height: 100%;
 }
 
-.properties-wf-content .properties-fp-table .properties-ft-container-absolute {
-	height: 450px;
-}
-
 .properties-fp-data {
 	height: 100%;
 	display: flex;
@@ -29,22 +25,22 @@
 }
 
 .properties-fp-field, .properties-fp-data {
-	padding-left: 10px;
+	padding-left: $spacing-05;
 	display: flex;
 	align-items: center;
 }
 
 .properties-fp-schema {
-	padding-left: 12px;
+	padding-left: $spacing-05;
 }
 
 .properties-fp-field-type-icon, .properties-fp-data-type-icon {
-	width: 16px;
-	height: 16px;
-	margin-right: 5px;
+	display: flex;
+	align-items: center;
+	margin-right: $spacing-03;
 	> svg {
-		width: 16px;
-		height: 16px;
+		width: $spacing-05;
+		height: $spacing-05;
 	}
 }
 
@@ -54,23 +50,23 @@
 
 	.properties-fp-filter-list-title.properties-fp-filter-list-li {
 		width: auto;
-		margin-left: 10px;
+		margin-left: $spacing-05;
 	}
 
 	.properties-fp-filter-list-li {
 		float: left;
-		padding: 2px;
+		padding: $spacing-01;
 
 		button {
-			min-height: 15px;
+			min-height: $spacing-05;
 			padding: 0;
 			border: 0;
 		}
 
 		svg {
-			height: 16px;
-			width: 16px;
-			margin: 2px;
+			height: $spacing-05;
+			width: $spacing-05;
+			margin: $spacing-01;
 
 			&[disabled] {
 				fill: $disabled-02;
@@ -81,6 +77,7 @@
 
 .properties-fp-table {
 	width: 100%;
+	height: 100%;
 
 	.properties-fp-top-row {
 		width: 50%;
@@ -99,24 +96,24 @@
 .properties-modal {
 	.properties-fp-top-row {
 		width: 100%;
-		margin-bottom: 6px;
+		margin-bottom: $spacing-03;
 		display: flex;
 		justify-content: space-between;
 
 		.properties-fp-button-label {
 			position: relative;
-			top: 5px;
+			top: $spacing-03;
 		}
 
 		// This back button is used in common-properties modal format
 		.properties-fp-back-button {
-			height: 32px;
-			width: 32px;
+			height: $spacing-07;
+			width: $spacing-07;
 			padding: 0;
-			margin-right: 8px;
+			margin-right: $spacing-03;
 
 			> svg {
-				left: 5px;
+				left: $spacing-03;
 			}
 		}
 	}

package/src/common-properties/components/flexible-table/flexible-table.jsx

@@ -37,7 +37,7 @@ class FlexibleTable extends React.Component {
 		if (typeof this.props.sortable !== "undefined") {
 			for (var i = 0; i < this.props.sortable.length; i++) {
 				const sortCol = this.props.sortable[i];
-				sortDirs[sortCol] = SORT_DIRECTION.DESC;
+				sortDirs[sortCol] = SORT_DIRECTION.NOT_SORTED;
 			}
 		}
 		this.state = {
@@ -242,34 +242,24 @@ class FlexibleTable extends React.Component {
 			return;
 		}
 		let newHeight = this.state.tableHeight;
-		const rowHeight = 2.25; // in em
-		const headerHeight = 2.5; // in em
+		const rowHeight = 2; // in rem
+		const headerHeight = 2; // in rem
 		const rows = typeof this.props.rows !== "undefined" ? this.props.rows : 4;
-		if (rows > 0) {
-			newHeight = (rowHeight * rows + headerHeight);
+		if (Array.isArray(this.props.data) && this.props.data.length < rows) {
+			newHeight = (rowHeight * this.props.data.length + headerHeight) + "rem";
+		} else if (rows > 0) {
+			newHeight = (rowHeight * rows + headerHeight) + "rem";
 		} else if (rows === 0) { // only display header
-			newHeight = headerHeight;
-		} else {
-			// A -1 row count indicates a desire to use the entire available vertical space
-			const rootElement = document.getElementById("root");
-			let container = rootElement ? rootElement.getElementsByClassName("properties-wf-children") : [];
-			if (rootElement && container.length === 0) {
-				container = rootElement.getElementsByClassName("bx--modal-content");
-			}
-			if (container.length > 0) {
-				const parentElement = container[container.length - 1]; // Adjust height to the latest wide flyout opened
-				const tableElements =	parentElement.getElementsByClassName("properties-ft-container-wrapper");
-				const tableElement = tableElements.length > 0 ? tableElements[tableElements.length - 1] : null;
-				if (tableElement) {
-					const style = window.getComputedStyle(tableElement, null).getPropertyValue("font-size");
-					const fontSize = parseFloat(style);
-					// this is to adjust for multiple-select edit.
-					// There is one additional row and header to account for.
-					const minHeight = (rowHeight + headerHeight);
-					newHeight = (parentElement.offsetHeight - tableElement.offsetTop) / fontSize + headerHeight;
-					newHeight = Math.max(newHeight, minHeight);
+			newHeight = headerHeight + "rem";
+		} else if (rows === -1) {
+			if (this.flexibleTable) {
+				const labelAndDescriptionHeight = 50; // possible dynamically set this in the future
+				const ftHeaderHeight = ReactDOM.findDOMNode(this.flexibleTableHeader).getBoundingClientRect().height;
+				const flyoutHeight = this.findPropertyNodeHeight(this.flexibleTable, "properties-wf-children");
+				if (flyoutHeight === 0) {
+					newHeight = "100vh"; // set full window height if flyout height not found
 				} else {
-					newHeight = (rowHeight * 4 + headerHeight);
+					newHeight = `calc(${flyoutHeight - ftHeaderHeight - labelAndDescriptionHeight}px - 3.5rem)`; // 3.5rem to adjust padding
 				}
 			}
 		}
@@ -278,9 +268,29 @@ class FlexibleTable extends React.Component {
 		}
 	}
 
+	findPropertyNodeHeight(node, className) {
+		if (node && node.parentNode && node.parentNode.className && node.parentNode.className.includes(className)) {
+			const foundNode = ReactDOM.findDOMNode(node.parentNode).getBoundingClientRect();
+			if (foundNode) {
+				return foundNode.height;
+			}
+			return 0;
+		} else if (node && node.parentNode) {
+			return this.findPropertyNodeHeight(node.parentNode, className);
+		}
+		return 0;
+	}
+
 	sortHeaderClick({ dataKey }) {
 		const colSortDir = this.state.columnSortDir;
 		if (typeof colSortDir[dataKey] !== "undefined") {
+			// At a time only 1 column will be shown as sorted. Revert other columns to not sorted.
+			Object.keys(colSortDir).forEach((key) => {
+				if (key !== dataKey) {
+					colSortDir[key] = SORT_DIRECTION.NOT_SORTED;
+				}
+			});
+			// Only dataKey column will be sorted
 			colSortDir[dataKey] = (colSortDir[dataKey] === SORT_DIRECTION.ASC) ? SORT_DIRECTION.DESC : SORT_DIRECTION.ASC;
 			this.setState({
 				columnSortDir: colSortDir,
@@ -344,7 +354,8 @@ class FlexibleTable extends React.Component {
 	*     "key": string,
 	*     "label": string,
 	*     "width": integer or string if containts 'px',
-	*     "description": optional string
+	*     "description": optional string,
+	*     "resizable": optional string
 	*   }
 	* ]
 	* @param columnWidths
@@ -370,6 +381,7 @@ class FlexibleTable extends React.Component {
 				width: width,
 				description: columnDef.description,
 				headerLabel: headerLabel,
+				resizable: columnDef.resizable,
 				operation: columnDef.operation
 			});
 		}
@@ -409,7 +421,6 @@ class FlexibleTable extends React.Component {
 
 	render() {
 		const tableWidth = this.state.tableWidth;
-		const tableHeight = this.state.tableHeight; // subtract 2 px for the borders
 		const columnWidths = this.calculateColumnWidths(this.props.columns, tableWidth);
 		const headerInfo = this.generateTableHeaderRow(columnWidths);
 
@@ -449,13 +460,17 @@ class FlexibleTable extends React.Component {
 			scrollIndex = this.props.scrollToRow;
 		}
 
-		const heightStyle = (this.props.noAutoSize || tableHeight === 0) ? {} : { height: tableHeight + "em" };
+		let heightStyle = {};
+		if (!this.props.noAutoSize) {
+			heightStyle = { height: this.state.tableHeight };
+		}
+
 		const containerClass = this.props.showHeader ? "properties-ft-container-absolute " : "properties-ft-container-absolute-noheader ";
 		const messageClass = (!this.props.messageInfo) ? containerClass + STATES.INFO : containerClass + this.props.messageInfo.type;
 
 		return (
-			<div data-id={"properties-ft-" + this.props.scrollKey} className="properties-ft-control-container">
-				<div className="properties-ft-table-header">
+			<div data-id={"properties-ft-" + this.props.scrollKey} className="properties-ft-control-container" ref={ (ref) => (this.flexibleTable = ref) }>
+				<div className="properties-ft-table-header" ref={ (ref) => (this.flexibleTableHeader = ref) }>
 					{searchBar}
 					{this.props.topRightPanel}
 				</div>

package/src/common-properties/components/flexible-table/flexible-table.scss

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$flexible-table-header-row-height: 32px;
-$row-left-padding: 4px;
+$flexible-table-header-row-height: $spacing-07;
+$row-left-padding: $spacing-02;
 
 .properties-ft-table-header {
 	display: flex;
@@ -39,6 +39,14 @@ $row-left-padding: 4px;
 	}
 }
 
+.properties-ft-container-panel {
+	height: calc(100% - $spacing-07); // adjust height for table header
+}
+
+.properties-ft-control-container {
+	height: 100%;
+}
+
 .properties-ft-container-wrapper {
 	height: 400px;
 	width: 100%;
@@ -62,9 +70,6 @@ $row-left-padding: 4px;
 	&.warning {
 		border: 1px solid $support-03;
 	}
-	.row-checkbox {
-		padding-left: 12px;
-	}
 }
 
 .properties-ft-container-absolute {
@@ -83,19 +88,11 @@ $row-left-padding: 4px;
 
 	div[data-role="properties-header-row"] {
 		width: inherit;
-		background-color: $ui-03;
 		display: inline-flex;
-		height: 2.5em;
 		.properties-autosized-vt-header {
 			&:focus {
 				outline: none;
 			}
-			// sort icon in header
-			svg {
-				margin-left: 3px;
-				width: 11px;
-				height: 11px;
-			}
 			// sort icon viewable when hover or sorted column
 			.properties-ft-column-sort-icon
 			svg:not(:root) {
@@ -105,19 +102,19 @@ $row-left-padding: 4px;
 			.properties-ft-column-sort-icon
 			svg:not(:root) {
 				display: inline;
-				stroke: $icon-01;
 			}
-			.sort-column-active
-			.properties-ft-column-sort-icon
+			.sort-column-active > .properties-ft-column-sort-icon
 			svg:not(:root) {
 				display: inline;
-				stroke: $icon-01;
 			}
 		}
 
 		.properties-tooltips-container {
 			display: inline-flex;
+			justify-content: space-between; // Adding space between column label and sort icon
 			width: 100%;
+			align-self: center;
+			padding: 0 $spacing-05;
 		}
 		.tooltip-container {
 			overflow: hidden;