render()

in seatunnel-ui/src/views/task/synchronization-definition/dag/sidebar/index.tsx [56:147]
90 lines of code
10 McCabe index (conditional complexity)

  render() {
    return (
      <NCard class={styles['task-container']}>
        <NSpace vertical>
          <h3>
            {this.t('project.synchronization_definition.source_and_sink')}
          </h3>
          <div
            class={styles['task-item']}
            draggable='true'
            onDragstart={() => this.handleDragstart('source', 'Source')}
          >
            <NSpace align='center'>
              <img class={styles['task-image']} src={SourceImg} />
              <span>Source</span>
            </NSpace>
            <span 
              class="task-item-info ml-auto inline-block"
              title={'Drag Source into Canvas and Double Click to Setup Configurations'}
            >
             <InfoCircleOutlined style={{width:'17px', height:'17px'}} />
            </span>
          </div>
          <div
            class={styles['task-item']}
            draggable='true'
            onDragstart={() => this.handleDragstart('sink', 'Sink')}
          >
            <NSpace align='center'>
              <img class={styles['task-image']} src={SinkImg} />
              <span>Sink</span>
            </NSpace>
            <span 
              class="task-item-info ml-auto inline-block"
              title={'Drag Sink into Canvas and Double Click to Setup Configurations'}
            >
              <InfoCircleOutlined style={{width:'17px', height:'17px'}} />
            </span>
          </div>
          {this.transforms.length > 0 && (
            <h3>{this.t('project.synchronization_definition.transforms')}</h3>
          )}
          {this.businessModel === 'data-integration' &&
            this.transforms.map((t: any) => {
              const item: any = {
                name: t.pluginIdentifier.pluginName
              }

              if (item.name === 'FieldMapper') {
                item.icon = FieldMapperImg
              } else if (item.name === 'FilterRowKind') {
                item.icon = FilterEventTypeImg
              } else if (item.name === 'Replace') {
                item.icon = ReplaceImg
              } else if (item.name === 'MultiFieldSplit') {
                item.icon = SplitImg
              } else if (item.name === 'Copy') {
                item.icon = CopyImg
              } else if (item.name === 'Sql') {
                item.icon = SqlImg
              } else if (item.name === 'JsonPath') {
                item.icon = JsonPathImg
              }

              return (
                <div
                  class={styles['task-item']}
                  draggable='true'
                  onDragstart={() =>
                    this.handleDragstart(
                      'transform',
                      t.pluginIdentifier.pluginName
                    )
                  }
                >
                  <NSpace align='center'>
                    <img class={styles['task-image']} src={item.icon} />
                    <span>{item.name}</span>
                  </NSpace>
                  <span 
                    class="task-item-info ml-auto inline-block"
                    title={'Drag '+ item.name +' into Canvas and Double Click to Setup Configurations'}
                  >
                    <InfoCircleOutlined style={{width:'17px', height:'17px'}} />
                  </span>
                </div>
              )
            })}
        </NSpace>
      </NCard>
    )
  }