render()

in packages/sanddance-explorer/src/explorer.tsx [978:1083]

• 98 lines of code
• 19 McCabe index (conditional complexity)

        render() {
            const { colorBin, columns, directColor, facetStyle, filter, hideAxes, hideLegend, scheme, signalValues, size, totalStyle, transform, chart, view } = this.state;
            const insight: SandDance.specs.Insight = {
                colorBin,
                columns,
                directColor,
                facetStyle,
                filter,
                hideAxes,
                hideLegend,
                scheme,
                signalValues,
                size,
                totalStyle,
                transform,
                chart,
                view
            };

            const loaded = !!(this.state.columns && this.state.dataContent);

            const selectionState: SandDance.types.SelectionState = (this.viewer && this.viewer.getSelection()) || {};
            const selectionSearch = selectionState && selectionState.search;

            const columnMapProps = this.getColumnMapBaseProps();

            const datas: { [key: number]: object[] } = {};
            datas[DataScopeId.AllData] = this.state.dataContent && this.state.dataContent.data;
            datas[DataScopeId.FilteredData] = this.state.filteredData;
            datas[DataScopeId.SelectedData] = selectionState && selectionState.selectedData;

            if (this.state.calculating) {
                requestAnimationFrame(() => {
                    //allow render to complete
                    if (this.state.calculating) {
                        this.state.calculating();
                        this.setState({ calculating: null });
                    }
                });
            }

            const theme = this.props.theme || '';
            const themePalette = themePalettes[theme];

            return (
                <div
                    ref={div => { if (div) this.div = div; }}
                    className={util.classList('sanddance-explorer', this.props.theme)}
                >
                    <Topbar
                        collapseLabels={this.props.compactUI}
                        historyIndex={this.state.historyIndex}
                        historyItems={this.state.historyItems}
                        undo={() => this.undo()}
                        redo={() => this.redo()}
                        logoClickUrl={this.props.logoClickUrl}
                        logoClickTarget={this.props.logoClickTarget}
                        themePalette={themePalette}
                        loaded={loaded}
                        doDeselect={this.doDeselect.bind(this)}
                        doFilter={this.doFilter.bind(this)}
                        doUnfilter={this.doUnfilter.bind(this)}
                        filter={this.state.filter}
                        selectionSearch={selectionSearch}
                        selectionState={selectionState}
                        buttons={this.props.topBarButtonProps}
                        view={this.state.view}
                        snapshots={this.state.snapshots}
                        onSnapshotPreviousClick={() => {
                            let selectedSnapshotIndex: number;
                            if (this.state.selectedSnapshotIndex === -1) {
                                selectedSnapshotIndex = this.state.snapshots.length - 1;
                            } else {
                                selectedSnapshotIndex = this.state.selectedSnapshotIndex;
                                selectedSnapshotIndex--;
                                if (selectedSnapshotIndex < 0) {
                                    selectedSnapshotIndex = this.state.snapshots.length - 1;
                                }
                            }
                            this.handleReviveSnapshot(this.state.snapshots[selectedSnapshotIndex], selectedSnapshotIndex);
                        }}
                        onSnapshotClick={() => this.snapshotEditor.editSnapshot()}
                        onSnapshotNextClick={() => {
                            let selectedSnapshotIndex: number;
                            if (this.state.selectedSnapshotIndex === -1) {
                                selectedSnapshotIndex = 0;
                            } else {
                                selectedSnapshotIndex = this.state.selectedSnapshotIndex;
                                selectedSnapshotIndex++;
                                if (selectedSnapshotIndex > this.state.snapshots.length - 1) {
                                    selectedSnapshotIndex = 0;
                                }
                            }
                            this.handleReviveSnapshot(this.state.snapshots[selectedSnapshotIndex], selectedSnapshotIndex);
                        }}
                        onViewClick={() => {
                            const view = this.state.view === '2d' ? '3d' : '2d';
                            this.changeInsight(
                                { view },
                                { label: view === '2d' ? strings.labelViewType2d : strings.labelViewType3d }
                            );
                        }}
                        onHomeClick={() => this.viewer.presenter.homeCamera()}
                    />
                    <div className={util.classList('sanddance-main', this.state.sidebarPinned && 'pinned', this.state.sidebarClosed && 'closed', (insight.hideLegend || insight.directColor || !colorMapping(insight, this.state.dataContent && this.state.dataContent.columns)) && 'hide-legend')}>
                        <div ref={div => { if (div && !this.layoutDivUnpinned) this.layoutDivUnpinned = div; }} className="sanddance-layout-unpinned"></div>