mobx-react#observer JavaScript Examples

FiltersButton = buttonInjector(observer(
  React.forwardRef(({ activeFiltersNumber, size, sidebarEnabled, viewsStore, ...rest }, ref) => {
    const hasFilters = activeFiltersNumber > 0;

    return (
      <Button
        ref={ref}
        size={size}
        onClick={() => sidebarEnabled && viewsStore.toggleSidebar()}
        {...rest}
      >
        Filters {hasFilters && (
          <Badge size="small" style={{ marginLeft: 5 }}>{activeFiltersNumber}</Badge>
        )}
        <FaAngleDown size="16" style={{ marginLeft: 4 }} color="#0077FF" />
      </Button>
    );
  }),
))

render() {
    return (
      <View style={alStyles.main}>
        <Text style={alStyles.title}>{this.title}</Text>
        <View style={alStyles.separator} />
        <Observer>
          {() => this.data.map((item, index) => <AddressCell key={index + ""} data={item} hud={this.hud} />)}
        </Observer>
        {this.showExpand && [
          <View key="1" style={alStyles.separator} />,
          <Button
            key="2"
            containerStyle={alStyles.buttonContainer}
            title={this.expandText}
            titleStyle={alStyles.expand}
            onPress={this.onExpandPress}
          />,
        ]}
      </View>
    );
  }

ButtonTooltip = inject("store")(observer(({ store, title, children }) => {
  return (
    <Tooltip
      title={title}
      enabled={store.settings.enableTooltips}
      mouseEnterDelay={TOOLTIP_DELAY}
    >
      {children}
    </Tooltip>
  );
}))

registerInstrument(name, initializer) {
    if (instruments[name]) {
      return console.warn(`Can't override native instrument ${name}`);
    }

    this.instruments.set(name, initializer({
      store: this.store,
      observer,
      inject,
    }));

    this.store.updateInstruments();
  }

ProjectFilter = observer((props) => {
    const { params = "", projectType = "" } = props
    const { callApiStore } = store;
    let workspacefilters = [];
    let projectList = [];
    let option = ["all"];

    useEffect(() => {
        callApiStore.filterList = []
        callApiStore.dataCheck = true
    }, []);
    if (callApiStore.projectFilterList != null) {
        workspacefilters = callApiStore.projectFilterList
        projectList = workspacefilters.filter((schema, index, self) => index === self.findIndex((obj) => (obj.projectName === schema.projectName)))
        projectList.map(list => {

            option.push(list.projectName)
        })
    }

    return (
        <div className="btn  mb-2">
            <Dropdown
                placeholder="Select a Project"
                className="my-className"
                options={option}
                value="one"
                onChange={(value) => {
                    console.log("value", value.value)
                    callApiStore.projectFilter = value.value
                    callApiStore.getFilterList(params, callApiStore.workspaceFilter, callApiStore.projectFilter)
                }}
            />
        </div>
    )
})

AppWrapper = observer(({ children }) => {
  const { settings } = useStore()

  useEffect(() => {
    if (settings.apiUrl) { return }

    const timeout = setTimeout(() => {
      settings.applyValues({
        apiUrl: defaultApiUrl
      })
    }, 100)

    // todo: re-create keyring

    return () => clearTimeout(timeout)
  }, [settings.apiUrl])

  return <Queue>
    {!!settings.apiUrl && (
      <Api 
        url={settings.apiUrl}
        initialTypesChain={typesChain}
      >
        <BlockAuthors>
          <Events>
            <Signer />
            {children}
          </Events>
        </BlockAuthors>
      </Api>
    )}
  </Queue>
})

template = observer((props) => {
    const { clusterStore } = store;

    useEffect(() => {

        return () => {
        };
        //상태값이 변할때마다 다시 렌더링 한다.
    }, []);

    return (<div>


    </div >)

})

Assets = observer(() => {
  const { wallet } = useStore();

  useEffect(() => {
    wallet.updateAssets();

    const interval = setInterval(() => {
      try {
        wallet.updateAssets();
      } catch (e) {
        console.warn(e);
      }
    }, 5000);

    return () => clearInterval(interval);
  }, [wallet]);

  return wallet.assets ? (
    wallet.assets.map((item, index) => (
      <AssetItem key={`Assets-${item.metadata.id}`} itemIndex={index} />
    ))
  ) : (
    <Loading size="large" />
  );
})

SmartTools = observer(({ tools }) => {
  const [selectedIndex, setSelectedIndex] = useState(Math.max(tools.findIndex(t => t.selected), 0));

  const selected = useMemo(() => tools[selectedIndex], [selectedIndex]);

  const hasSelected = tools.some(t => t.selected);

  return tools.length > 0 && (
    <Elem name="group">
      <Tool
        smart
        label="Auto-Detect"
        active={hasSelected}
        icon={selected.iconClass}
        shortcut="M"
        extra={tools.length > 1 ? (
          <Elem name="smart">
            {tools.map((t, i) => {
              const ToolView = t.viewClass;

              return (
                <div key={`${i}`} onClickCapture={(e) => {
                  e.preventDefault();
                  setSelectedIndex(i);
                  t.manager.selectTool(t, true);
                }}>
                  <ToolView />
                </div>
              );
            })}
          </Elem>
        ) : null}
        controls={selected.controls}
        onClick={() => {
          let nextIndex = selectedIndex + 1;

          if (!hasSelected) nextIndex = 0;
          else if (nextIndex >= tools.length) nextIndex = 0;

          const nextTool = tools[nextIndex];

          setSelectedIndex(nextIndex);
          nextTool.manager.selectTool(nextTool, true);
        }}
      />
    </Elem>
  );
})

StickyList = observer(
  forwardRef((props, listRef) => {
    const {
      children,
      stickyComponent,
      stickyItems,
      stickyItemsHeight,
      totalCount,
      isItemLoaded,
      loadMore,
      initialScrollOffset,
      ...rest
    } = props;

    const itemData = {
      Renderer: children,
      StickyComponent: stickyComponent,
      stickyItems,
      stickyItemsHeight,
    };

    const itemSize = (index) => {
      if (stickyItems.includes(index)) {
        return stickyItemsHeight[index] ?? rest.itemHeight;
      }
      return rest.itemHeight;
    };

    return (
      <StickyListContext.Provider value={itemData}>
        <TableElem tag={AutoSizer} name="auto-size">
          {({ width, height }) => (
            <InfiniteLoader
              ref={listRef}
              itemCount={totalCount}
              loadMoreItems={loadMore}
              isItemLoaded={isItemLoaded}
            >
              {({ onItemsRendered, ref }) => (
                <TableElem
                  name="virual"
                  tag={VariableSizeList}
                  {...rest}
                  ref={ref}
                  width={width}
                  height={height}
                  itemData={itemData}
                  itemSize={itemSize}
                  onItemsRendered={onItemsRendered}
                  initialScrollOffset={initialScrollOffset?.(height) ?? 0}
                >
                  {ItemWrapper}
                </TableElem>
              )}
            </InfiniteLoader>
          )}
        </TableElem>
      </StickyListContext.Provider>
    );
  }),
)

AppMonitor = observer(() => {
  const { clusterStore } = store;

  const [breadcrumbItems, setBreadcrumbItems] = React.useState([
    { title: "모니터링", link: "#" },
    { title: "어플리케이션 모니터링", link: "#" },
  ]);

  const [anchorEl, setAnchorEl] = React.useState(null);

  useEffect(() => {
    clusterStore.cluster_lists();
    clusterStore.physical_request(60, 10, "all", "cpu_usage|memory_usage", "cluster");
    clusterStore.resource_request(60, 10, "all", "pod_count|service_count|deployment_count|cronjob_count|job_count|pv_count|pvc_count|namespace_count", "app");
  }, []);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const MenuClose = (value) => {
    clusterStore.cur_cluster = value
    setAnchorEl(null);
  };

  const ButtonClose = () => {
    setAnchorEl(null);
  };

  const clusterList = clusterStore.cluster_list
  const cur_cluster = clusterStore.cur_cluster
  // let clusterNameList = [];

  // clusterList.map((item, idx) => {
  //   clusterNameList.push(item.clusterName)
  // })

  const clusterNameList = clusterList.map((item, idx) => {
    return (
      <MenuItem onClick={() => MenuClose(item.clusterName)}>{item.clusterName}</MenuItem>
    )
  })

  return (
    <React.Fragment>
      <div className="page-content">
        <Container fluid>
          <Breadcrumbs title="모니터링" breadcrumbItems={breadcrumbItems} />
          <Card>
            <CardBody>
              <div>
                <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
                  {clusterStore.cur_cluster}
                </Button>
                <Menu
                  id="simple-menu"
                  anchorEl={anchorEl}
                  keepMounted
                  open={Boolean(anchorEl)}
                  onClose={ButtonClose}
                >
                  {clusterNameList}
                </Menu>
              </div>
              <hr></hr>
              <h4>클러스터 리소스 사용량</h4>
              <Cluster />
            </CardBody>
          </Card>
          <Card>
            <CardBody>
              <h4>어플리케이션 리소스 사용량</h4>
              <Application />
            </CardBody>
          </Card>
        </Container>
      </div>
    </React.Fragment>
  );
})

FilterLine = observer(({
  filter,
  availableFilters,
  index,
  view,
  sidebar,
  dropdownClassName,
}) => {
  return (
    <Block name="filter-line" tag={Fragment}>
      <GroupWrapper wrap={sidebar}>
        <Elem name="column" mix="conjunction">
          {index === 0 ? (
            <span style={{ fontSize: 12, paddingRight: 5 }}>Where</span>
          ) : (
            <Conjunction index={index} view={view} />
          )}
        </Elem>
        <Elem name="column" mix="field">
          <FilterDropdown
            placeholder="Column"
            defaultValue={filter.filter.id}
            items={availableFilters}
            width={80}
            dropdownWidth={120}
            dropdownClassName={dropdownClassName}
            onChange={(value) => filter.setFilterDelayed(value)}
            optionRender={({ item: { original: filter } }) => (
              <Elem name="selector">
                {filter.field.title}
                {filter.field.parent && (
                  <Tag
                    size="small"
                    className="filters-data-tag"
                    color="#1d91e4"
                    style={{ marginLeft: 7 }}
                  >
                    {filter.field.parent.title}
                  </Tag>
                )}
              </Elem>
            )}
          />
        </Elem>
      </GroupWrapper>
      <GroupWrapper wrap={sidebar}>
        <FilterOperation
          filter={filter}
          value={filter.currentValue}
          operator={filter.operator}
          field={filter.field}
        />
      </GroupWrapper>
      <Elem name="remove">
        <Button
          type="link"
          onClick={(e) => {
            e.stopPropagation();
            filter.delete();
          }}
          icon={<Icon icon={FaTrash} size={12} />}
        />
      </Elem>
    </Block>
  );
},
)

EdgeDetailMeta = observer((props) => {
    const { labels, annotations } = props
    const { clusterStore } = store;

    console.log(labels, annotations)

    // labels.map((item, key) => {
    //     console.log(item)
    // })
    let labelTable = [];
    if (labels !== undefined) {
        Object.entries(labels).forEach(([keys, values]) => {
            labelTable.push(
                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }
    // console.log(labelTable)

    let annotationsTable = [];
    if (annotations !== undefined) {
        Object.entries(annotations).forEach(([keys, values]) => {
            annotationsTable.push(

                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }

    useEffect(() => {
        return () => {
        };
    }, []);

    return (
        <React.Fragment>
            <hr />
            <h4 className="card-title">Labels</h4>
            <hr />
            {labelTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >라벨</th>
                        </tr>
                    </thead>
                    <tbody>
                        {labelTable}
                    </tbody>
                </Table>
            </div> */}
            <hr />
            <h4 className="card-title">Annotations</h4>
            <hr />
            {annotationsTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >어노테이션</th>
                        </tr>
                    </thead>
                    <tbody>
                        {annotationsTable}
                    </tbody>
                </Table>
            </div> */}


        </React.Fragment >
    )

})

Toolbar = observer(({ view, history, lsf, isLabelStream, hasInstruction }) => {
  const annotation = lsf?.annotationStore?.selected;

  const task = view.dataStore.selected;

  const { viewingAllAnnotations, viewingAllPredictions } =
    lsf?.annotationStore ?? {};

  const viewAll = viewingAllAnnotations || viewingAllPredictions;

  return lsf?.noTask === false && task ? (
    <Block name="label-toolbar" mod={{ labelStream: isLabelStream }}>
      <Elem name="task">
        <Space size="large">
          <div style={{ display: "flex", alignItems: "center" }}>
            <History history={history}>
              <div style={{ margin: history ? "0 10px" : 0 }}>
                Task #{task.id}
              </div>
            </History>
          </div>

          {!viewAll && <LSFOperations history={annotation?.history} />}
        </Space>
      </Elem>

      {!!lsf && !!annotation && annotation.type === "annotation" && (
        <Elem name="actions">
          {!viewAll && (
            <SubmissionButtons
              lsf={lsf}
              annotation={annotation}
              isLabelStream={isLabelStream}
              disabled={lsf.isLoading}
            />
          )}

          <Elem name="tools">
            <Space>
              {hasInstruction && (
                <Tooltip title="Labeling Instructions">
                  <Button
                    look={lsf.showingDescription ? "primary" : "dashed"}
                    icon={<Icon icon={FaInfoCircle} />}
                    onClick={() => lsf.toggleDescription()}
                  />
                </Tooltip>
              )}

              <Tooltip title="Settings">
                <Button
                  look="dashed"
                  icon={<Icon icon={FaCog} />}
                  onClick={() => lsf.toggleSettings()}
                />
              </Tooltip>
            </Space>
          </Elem>
        </Elem>
      )}
    </Block>
  ) : null;
})

TxModal = observer(({
  contractId, payload, onSuccessMsg, modalTitle, modalSubtitle,
  onSuccessCallback, onFailedCallback,
  setVisible, bindings
}) => {
  const { account, appRuntime } = useStore()
  const { ecdhChannel } = appRuntime
  const [isBusy, setIsBusy] = useState(false)
  const [, setToast] = useToasts()
  const [command, setCommand] = useState('')
  const [disabled, setDisabled] = useState(false)

  const { t } = useTranslation()

  useEffect(() => {
    if (!appRuntime?.channelReady) return
    setDisabled(true)
    ;(async () => {
      const cipher = await encryptObj(ecdhChannel, payload)
      const apiCipher = toApi(cipher)
      setCommand(JSON.stringify({ Cipher: apiCipher }))
      setDisabled(false)
    })()
  }, [payload, appRuntime?.channelReady])

  const onStart = useCallback(() => {
    setIsBusy(true)
  }, [setIsBusy])

  const onFailed = useCallback(e => {
    setIsBusy(false)
    e && console.warn(e)
    setToast({
      text: t('Failed to submit.'),
      type: 'error'
    })
    if (onFailedCallback) onFailedCallback(e)
  }, [t, setIsBusy])

  const onSuccess = useCallback(() => {
    setToast({
      text: onSuccessMsg
    })
    onClose()
    if (onSuccessCallback) onSuccessCallback()
  }, [t, onClose])

  const onClose = useCallback(() => {
    if (isBusy) { return }

    setVisible(false)
  }, [isBusy])

  const doSend = useCallback(() => {
    if (isBusy) { return }
  }, [isBusy])

  return <Modal {...bindings} disableBackdropClick>
    <Modal.Title>{modalTitle}</Modal.Title>
    <Modal.Subtitle>{modalSubtitle}</Modal.Subtitle>
    <Spacer y={1} />
    <TxButton
      accountId={account.address || ''}
      onClick={doSend}
      params={[contractId, command]}
      tx='phala.pushCommand'
      withSpinner
      onStart={onStart}
      onFailed={onFailed}
      onSuccess={onSuccess}
      disabled={disabled}
    >
      {t('Submit')}
    </TxButton>
    <Modal.Action onClick={onClose}>{t('Cancel')}</Modal.Action>
  </Modal>
})

CoreDetailMeta = observer((props) => {
    const { labels, annotations } = props
    const { clusterStore } = store;

    console.log(labels, annotations)

    // labels.map((item, key) => {
    //     console.log(item)
    // })

    let labelTable = [];
    if (labels !== undefined) {
        Object.entries(labels).forEach(([keys, values]) => {
            labelTable.push(
                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }
    // console.log(labelTable)

    let annotationsTable = [];
    if (annotations !== undefined) {
        Object.entries(annotations).forEach(([keys, values]) => {
            annotationsTable.push(

                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }
    useEffect(() => {
        return () => {
        };
    }, []);

    return (
        <React.Fragment>
            <hr />
            <h4 className="card-title">Labels</h4>
            <hr />
            {labelTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >라벨</th>
                        </tr>
                    </thead>
                    <tbody>
                        {labelTable}
                    </tbody>
                </Table>
            </div> */}
            <hr />
            <h4 className="card-title">Annotations</h4>
            <hr />
            {annotationsTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >어노테이션</th>
                        </tr>
                    </thead>
                    <tbody>
                        {annotationsTable}
                    </tbody>
                </Table>
            </div> */}


        </React.Fragment >
    )

})

prepareInstruments = (instruments) => {
  const result = Object
    .entries(instruments)
    .map(([name, builder]) => [name, builder({ inject, observer })]);

  return objectToMap(Object.fromEntries(result));
}

AnnotationTab = observer(({ store }) => {
  const as = store.annotationStore;
  const annotation = as.selectedHistory ?? as.selected;
  const { selectionSize } = annotation || {};
  const hasSegmentation = store.hasSegmentation;

  return (
    <>
      {store.hasInterface("annotations:current") && (
        <CurrentEntity
          entity={as.selected}
          showControls={store.hasInterface("controls")}
          canDelete={store.hasInterface("annotations:delete")}
          showHistory={store.hasInterface("annotations:history")}
          showGroundTruth={store.hasInterface("ground-truth")}
        />
      )}

      {selectionSize ? (
        <Entity store={store} annotation={annotation} />
      ) : hasSegmentation ? (
        <p style={{ marginTop: 12, marginBottom: 0, paddingInline: 15 }}>
          No Region selected
        </p>
      ) : null}

      {hasSegmentation && (
        <Entities
          store={store}
          annotation={annotation}
          regionStore={annotation.regionStore}
        />
      )}

      {hasSegmentation && (
        <Relations store={store} item={annotation} />
      )}
    </>
  );
})

StoreInjector = observer(({ children }) => {
  const [shouldInitRuntime, setShouldInitRuntime] = useState(false)

  const appStore = useStore()
  window.__store = appStore

  const keypair = appStore.account?.keypair
  const locked = appStore.account?.locked
  const address = appStore.account?.address

  useEffect(() => {
    if (locked) {
      setShouldInitRuntime(false)
      appStore.appRuntime = undefined
    }
  }, [address, locked])

  useEffect(() => {
    if (!appStore) {
      return
    }
    if (!(!locked && address)) {
      return
    }
    if (shouldInitRuntime) {
      return
    }

    appStore.appRuntime = createAppRuntimeStore({
      appSettings: appStore.settings,
      appAccount: appStore.account
    })
  }, [address, locked, appStore, shouldInitRuntime])

  useEffect(
    () => {
      if (!appStore?.appRuntime) {
        return
      }

      reaction(
        () => appStore.appRuntime,
        () => {
          if (appStore.appRuntime && !shouldInitRuntime) {
            setShouldInitRuntime(true)
          }
        },
        { fireImmediately: true })
    },
    [appStore?.appRuntime]
  )

  return shouldInitRuntime ? <RuntimeInit /> : null
})

SelectionLayer = observer(({ item, selectionArea }) => {

  const scale = 1 / (item.zoomScale || 1);

  const [isMouseWheelClick, setIsMouseWheelClick] = useState(false);
  const [shift, setShift] = useState(false);
  const isPanTool = item.getToolsManager().findSelectedTool()?.fullName === 'ZoomPanTool';

  const dragHandler = (e) => setIsMouseWheelClick(e.buttons === 4);

  const handleKey = (e) => setShift(e.shiftKey);

  useEffect(()=>{  
    window.addEventListener("keydown", handleKey);
    window.addEventListener("keyup", handleKey);
    window.addEventListener("mousedown", dragHandler);
    window.addEventListener("mouseup", dragHandler);
    return () => {
      window.removeEventListener("keydown", handleKey);
      window.removeEventListener("keyup", handleKey);
      window.removeEventListener("mousedown", dragHandler);
      window.removeEventListener("mouseup", dragHandler);
    };
  },[]);

  const disableTransform = item.zoomScale > 1 && (shift || isPanTool || isMouseWheelClick);

  let supportsTransform = true;
  let supportsRotate = true;
  let supportsScale = true;

  item.selectedRegions?.forEach(shape => {
    supportsTransform = supportsTransform && shape.supportsTransform === true;
    supportsRotate = supportsRotate && shape.canRotate === true;
    supportsScale = supportsScale && true;
  });

  supportsTransform =
    supportsTransform &&
    (item.selectedRegions.length > 1 ||
      ((item.useTransformer || item.selectedShape?.preferTransformer) && item.selectedShape?.useTransformer));
  
  return (
    <Layer scaleX={scale} scaleY={scale}>
      {selectionArea.isActive ? (
        <SelectionRect item={selectionArea} />
      ) : !supportsTransform && item.selectedRegions.length > 1 ? (
        <SelectionBorders item={item} selectionArea={selectionArea} />
      ) : null}
      <ImageTransformer
        item={item}
        rotateEnabled={supportsRotate}
        supportsTransform={!disableTransform && supportsTransform}
        supportsScale={supportsScale}
        selectedShapes={item.selectedRegions}
        singleNodeMode={item.selectedRegions.length === 1}
        useSingleNodeRotation={item.selectedRegions.length === 1 && supportsRotate}
        draggableBackgroundSelector={`#${TRANSFORMER_BACK_ID}`}
      />
    </Layer>
  );
})

RuntimeInit = observer(({ children }) => {
  const appStore = useStore()
  const { settings, appRuntime } = appStore

  React.useEffect(() => {
    appRuntime.initEcdhChannel()
  }, [])

  useEffect(
    () =>
      reaction(
        () => settings.phalaTeeApiUrl,
        () => {
          appRuntime.resetNetwork()
        }),
    []
  )

  useEffect(
    () =>
      autorun(
        () => {
          if (!(appRuntime.ecdhShouldJoin && appRuntime.ecdhChannel && appRuntime.info?.ecdhPublicKey)) {
            return
          }
          appRuntime.joinEcdhChannel()
        }),
    []
  )

  useEffect(
    () =>
      autorun(
        () => {
          if (!(settings.phalaTeeApiUrl && appRuntime.ecdhChannel)) {
            return
          }
          appRuntime.initPApi(settings.phalaTeeApiUrl)
        }),
    []
  )

  return <>
    <RuntimeLifecycle />
    {children}
  </>
})

LabelOnPolygon = observer(({ item, color }) => {
  const isLabeling = !!item.labeling;
  const isTexting = !!item.texting;
  const labelText = item.getLabelText(",");

  if (!isLabeling && !isTexting) return null;

  const bbox = item.bboxCoords;

  if (!bbox) return null;

  const settings = getRoot(item).settings;

  return (
    <Fragment>
      {settings && (settings.showLabels || settings.showScore) && (
        <Rect
          x={bbox.left}
          y={bbox.top}
          fillEnabled={false}
          width={bbox.right - bbox.left}
          height={bbox.bottom - bbox.top}
          stroke={item.style?.strokecolor}
          strokeWidth={1}
          strokeScaleEnabled={false}
          shadowBlur={0}
        />
      )}
      <LabelOnBbox
        x={bbox.left}
        y={bbox.top + 2 / item.parent.zoomScale}
        isTexting={isTexting}
        text={labelText}
        score={item.score}
        showLabels={settings && settings.showLabels}
        showScore={settings && settings.showScore}
        zoomScale={item.parent.zoomScale}
        color={color}
        onClickLabel={item.onClickLabel}
      />
    </Fragment>
  );
})