render()

in components/RunCard.tsx [143:209]

• 66 lines of code
• 8 McCabe index (conditional complexity)

	render() {
		const {show, itemProvider} = this
		const {runStore, runCount} = this.props
		
		return <Observer renderChildren={itemProvider}>
			{(observedProps: { itemProvider }) => {
				const qualityDomain = tryOr(() => runStore.run.tool.driver.properties['microsoft/qualityDomain'])
				return <Card
					titleProps={{
						ariaLevel: 2,
						text: <Tooltip
							text={<>
								<div>{tryOr(
									() => runStore.run.tool.driver.fullName,
									() => `${runStore.run.tool.driver.name} ${runStore.run.tool.driver.semanticVersion || ''}`,
								)}</div>
								{tryOr(
									() => <div>{runStore.run.tool.driver.fullDescription.text}</div>,
									() => <div>{runStore.run.tool.driver.shortDescription.text}</div>,
								)}
							</> as any}>
							<span className={'swcRunTitle'}>
								<Hi>{runStore.driverName}</Hi>{qualityDomain && ` (${qualityDomain})`}
								<Pill size={PillSize.compact}>{runStore.filteredCount}</Pill>
							</span>{/* Tooltip marked as React.Children.only thus extra span. */}
						</Tooltip> as any
					}}
					contentProps={{ contentPadding: false }}
					headerCommandBarItems={[
						runCount > 1
							? {
								id: 'hide',
								text: '', // Remove?
								ariaLabel: 'Show/Hide',
								onActivate: () => this.show = !this.show,
								iconProps: { iconName: this.show ? 'ChevronDown' : 'ChevronUp' }, // Naturally updates as this entire object is re-created each render.
								important: runCount > 1
							}
							: undefined,
						...this.groupByMenuItems,
						...this.sortRuleByMenuItems,
					].filter(item => item)}
					className="flex-grow bolt-card-no-vertical-padding">
					{show && (itemProvider.length
						? <Tree<ResultOrRuleOrMore>
							className="swcTree"
							columns={this.columns}
							itemProvider={itemProvider}
							onToggle={(event, treeItem: ITreeItemEx<ResultOrRuleOrMore>) => {
								itemProvider.toggle(treeItem.underlyingItem)
							}}
							onActivate={(event, treeRow) => {
								const treeItem = treeRow.data.underlyingItem
								const more = treeItem.data as More
								if (more.onClick) {
									more.onClick() // Handle "Show All"
								} else {
									itemProvider.toggle(treeItem)
								}
							}}
							behaviors={[this.sortingBehavior]}
							selectableText={true}
							/>
						: <div className="swcRunEmpty">No Results</div>
					)}
				</Card>
			}}