[Research] OUI Compliance audit of the vis_type_tagcloud plugin

[BSFishy]

Tracking issue for OUI compliance audit of the vis_type_tagcloud plugin.

Follow the steps in #3945 to complete the audit, then open another issue with findings. Once the work of performing the audit is done, this issue can be closed.

Related files

size (bytes)	file	notes
442	src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss

If this issue isn't already assigned to someone and you'd like to take on this work, please ping @BSFishy in the comments and I can assign it to you.

[nurSaadat]

tag_cloud.scss has four custom classes.

tgcChart__container and tgcChart__wrapper

OpenSearch-Dashboards/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss

Lines 8 to 12 in 20c928f

	.tgcChart__container,
	.tgcChart__wrapper {
	flex: 1 1 0;
	display: flex;
	}

They are used in tag_cloud_chart.tsx to wrap a tag cloud component.

OpenSearch-Dashboards/src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx

Lines 83 to 89 in 20c928f

	<EuiResizeObserver onResize={updateChartSize}>
	{(resizeRef) => (
	<div className="tgcChart__wrapper" ref={resizeRef}>
	<div className="tgcChart__container" ref={chartDiv} />
	</div>
	)}
	</EuiResizeObserver>

I suggest replacing div className="tgcChart__wrapper" by EuiFlexGroup.
Also, I suggest replacing div className="tgcChart__container" by EuiFlexItem. However, I found that EuiFlexItem doesn't have property ref, so maybe it can be added.

tgcChart

OpenSearch-Dashboards/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss

Lines 14 to 21 in f017eaa

	.tgcChart {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

This class is used in tag_cloud_visualization.js

OpenSearch-Dashboards/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js

Lines 50 to 54 in 20c928f

	const cloudRelativeContainer = document.createElement('div');
	cloudRelativeContainer.classList.add('tgcChart');
	cloudRelativeContainer.setAttribute('style', 'position: relative');
	const cloudContainer = document.createElement('div');
	cloudContainer.classList.add('tgcChart');

I suggest element creation should be realized as a function. Otherwise, it is hard to substitute div by OUI component. The most important properties for chart's visual appearance are height: 100% and position: relative.

tgcChart__label

OpenSearch-Dashboards/src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss

Lines 23 to 27 in f017eaa

	.tgcChart__label {
	width: 100%;
	text-align: center;
	font-weight: $euiFontWeightBold;
	}

This class is used to style the label of a tag cloud. Apparently, this label is not shown, as the property shouldShowLabel is never changed.

OpenSearch-Dashboards/src/plugins/vis_type_tagcloud/public/components/label.js

Lines 33 to 49 in f017eaa

	export class Label extends Component {
	constructor() {
	super();
	this.state = { label: '', shouldShowLabel: true };
	}
	render() {
	return (
	<div
	className="tgcChart__label"
	style={{ display: this.state.shouldShowLabel ? 'block' : 'none' }}
	>
	{this.state.label}
	</div>
	);
	}
	}

Later, Label component is used as follows

OpenSearch-Dashboards/src/plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js

Lines 92 to 95 in f017eaa

	this._labelNode = document.createElement('div');
	this._containerNode.appendChild(this._labelNode);
	this._label = React.createRef();
	render(<Label ref={this._label} />, this._labelNode);

I suggest Label component can be substituted by OUI text component, or removed and put into metadata as aria label, for example.

Conclusion

• Add ref property to EuiFlexItem
• Substitute custom classes by OUI components
• Refactor new DOM element creation
• Remove Label component

[nurSaadat]

@joshuarrrr @BSFishy could you assign me to this issue?

[joshuarrrr]

@nurSaadat Do you mind moving your audit findings to a new issue? Sorry for the extra administrative overhead, but it will help us track progress on the overall initiative easier.

[nurSaadat]

@joshuarrrr sure. Opened as #4285