render()

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}):&nbsp;
                                        {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>
        );
    }