public render()

in frontend/src/common/components/hocr/hocr-preview/hocr-page.component.tsx [46:81]

35 lines of code
3 McCabe index (conditional complexity)


  public render() {
    if (!this.props.node) return null;
    const pageOptions = getNodeOptions(this.props.node);

    return (
      <>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className={this.props.userStyle.page}
          id={getNodeId(this.props.node, this.props.idSuffix)}
          viewBox={pageOptions.bbox.join(" ")}
          style={getZoomStyle(this.props.zoomMode || "original", pageOptions.bbox)}
        >
          <rect className={this.props.userStyle.background}
            x="0" y="0" width="100%" height="100%" />
          <image className={this.props.userStyle.image}
            x="0" y="0" width="100%" height="100%"
            xlinkHref={pageOptions.image} />
          <g className={this.props.userStyle.placeholders}>
            {getNodeChildrenComponents({
              node: this.props.node,
              key: this.props.key,
              wordCompare: this.props.wordCompare,
              idSuffix: this.props.idSuffix,
              renderOnlyTargetWords: this.props.renderOnlyTargetWords,
              userStyle: this.props.userStyle,
              onWordHover: this.onNodeHover,
            })}
          </g>
        </svg>
        <HocrTooltipComponent
          rectangleProps={this.state.rectangleProps}
        />
      </>
    );
  }