render()

in wstl1/tools/notebook/data-model-browser/src/components/data_model_viewer.tsx [252:353]
99 lines of code
5 McCabe index (conditional complexity)

  render() {
    if (!this.state.hasLoaded) {
      return (
        <div className={localStyles.panel}>
          <header className={localStyles.header}>
            {HEADER_TITLE}
          </header>
          <Typography color="textPrimary">Loading...</Typography>
        </div>
      );
    }

    if (this.state.selectedPath.length === 0) {
      return (
        <div className={localStyles.panel}>
          <header className={localStyles.header}>
            {HEADER_TITLE}
          </header>
          <Typography color="textPrimary">Missing data model schema</Typography>
        </div>
      );
    } else if (this.state.selectedPath.length === 1) {
      // No resources have been selected so render the resource list.
      return (
        <div className={localStyles.panel}>
          <header className={localStyles.header}>
            {HEADER_TITLE}
          </header>
          <div className={localStyles.tableName}>
            Select version
          </div>
          <InputLabel></InputLabel>
          <Select
            value={this.state.activeDataModelId}
            className={localStyles.select}
            disabled
          >
            <MenuItem value="FHIR">{'FHIR-stu3'}</MenuItem>
          </Select>
          <div className={localStyles.tableName}>
            Search tables and fields
          </div>
          <SearchBar
            dataModel={this.state.activeDataModel}
            onSearchResultSelected={this.onSearchResultSelected}
          />
          <div className={localStyles.tableName}>
            Resource name
          </div>
          <div className={localStyles.viewer}>
            <TopEntitiesViewer
              topEntities={this.state.topEntities}
              onInspect={this.onEntityInspected}
              onSelect={this.onEntitySelected}
              selected={this.state.inspectPath}
            />
          </div>
        </div>
      );
    }

    const previousPaths = this.state.selectedPath.slice(
      0,
      this.state.selectedPath.length - 1
    );
    const activePath = this.state.selectedPath[
      this.state.selectedPath.length - 1
    ];
    let pathOffset = 0;
    return (
      <div className={localStyles.panel}>
        <div className="bread-crumb-wrapper">
          <BreadCrumb maxItems={3} aria-label="breadcrumb">
            {previousPaths.map(previousPath => {
              return (
                <BreadCrumbItem
                  key={previousPath}
                  path={this.state.selectedPath.slice(0, ++pathOffset)}
                  label={previousPath}
                  onClick={this.onListItemClicked}
                />
              );
            })}
            <Typography color="textPrimary">{activePath}</Typography>
          </BreadCrumb>
        </div>
        <div className={localStyles.tableName}>
            Select or hover over a resource for more details
        </div>
        <SearchBar
          dataModel={this.state.activeDataModel}
          onSearchResultSelected={this.onSearchResultSelected}
        />
        <div className={localStyles.viewer}>
          {this.getSelectionDetails(
            this.state.selectedPath.slice(1),
            this.state.activeDataModel.schema
          )}
        </div>
      </div>
    );
  }