in Clients/Xamarin.Interactive.Client.Web/ClientApp/components/CodeCellView.tsx [138:218]
render() {
return (
<div className="CodeCell-container">
<div className="CodeCell-editor-container">
{this.renderEditor()}
</div>
<div className="CodeCell-diagnostics-container">
<ul>
{this.state.diagnostics.map((diag, i) => {
return (
<li
key={randomReactKey()}
className={"CodeCell-diagnostic-" + diag.severity}
onClick={(e) => {
e.stopPropagation()
this.sendEditorMessage({
target: this.getBlockKey(),
type: EditorMessageType.setCursor,
data: {
lineNumber: diag.range.startLineNumber,
column: diag.range.startColumn
}
})
}}>
({diag.range.startLineNumber},{diag.range.startColumn}):
{diag.severity} {diag.id}: {diag.message}
</li>
)
})}
</ul>
</div>
{this.state.capturedOutput.length > 0 &&
<div className="CodeCell-captured-output-container">
<CapturedOutputView segments={this.state.capturedOutput} />
</div>}
<div className="CodeCell-results-container">
{this.state.results.map((resultState, i) => {
const representationKeys = Object.keys(resultState.representations)
if (representationKeys.length === 0)
return
const dropdownOptions = representationKeys.length > 1
? representationKeys.map(key => {
return {
key: key,
text: resultState.representations[key].displayName
}
})
: null
let repElem = null
if (resultState.selectedRepresentationKey) {
const rep = resultState.representations[resultState.selectedRepresentationKey]
repElem = <rep.component
key={rep.key}
{...rep.componentProps}/>
}
return (
<div
key={i}
className="CodeCell-result">
<div className="CodeCell-result-renderer-container">
{repElem}
</div>
{dropdownOptions && <Dropdown
options={dropdownOptions}
defaultSelectedKey={dropdownOptions[0].key}
onChanged={item => {
resultState.selectedRepresentationKey = item.key as string
this.setState(this.state)
}}/>}
</div>
)
})}
</div>
<div className="CodeCell-actions-container">
{this.renderActions()}
</div>
</div>
);
}