Meu primeiro componente¶

Vamos acrescentar um painel Olá ao EdgePy Viewer. Ele terá uma mensagem, um contador e um botão. Esse exemplo mostra o caminho mínimo de uma extensão: criar o componente → registrar o painel → abrir no viewer.

Antes de começar, prepare o ambiente descrito em Comece aqui e abra o viewer com npm run dev. Você não precisa carregar um estudo para este exercício.

Experimente o resultado¶

Abra o laboratório e selecione Olá na barra lateral. Clique em Contar um clique, feche o painel e abra novamente para observar o estado reiniciar.

Seu primeiro painel, funcionando no viewer
Explore o contador em uma janela ampla e volte ao tutorial quando terminar.

Experimentar o componente ↗

Abrir direto em nova aba · Baixar os exemplos

Este é o PycomClinicalViewerNext real, com HelloPanel registrado em customPanels. A matriz ao fundo vem do renderizador didático apresentado em Tipos de componente. O exemplo e o código abaixo usam o mesmo arquivo fonte.

1. Crie o componente React¶

Na pasta do repositório que você clonou, crie apps/viewer-demo/src/components/HelloPanel.tsx com o conteúdo abaixo. Crie também a pasta components/ se ela ainda não existir. Se usou o ZIP de exemplos, o arquivo já estará nesse lugar.

import { useState } from "react";

export function HelloPanel() {
  const [clicks, setClicks] = useState(0);

  return (
    <section aria-label="Meu primeiro componente">
      <h2>Olá, EdgePy!</h2>
      <p>Este painel foi acrescentado pela aplicação.</p>
      <p role="status">Cliques: {clicks}</p>
      <button type="button" onClick={() => setClicks((current) => current + 1)}>
        Contar um clique
      </button>
    </section>
  );
}

É um componente React comum: useState guarda o número de cliques e o botão atualiza esse estado. O único import é do React. No próximo passo, vamos registrá-lo no viewer pela aplicação.

2. Descreva o painel na aplicação¶

Abra apps/viewer-demo/src/App.tsx e acrescente estes imports junto aos existentes:

import type { ViewerCustomPanel } from "@pycom-next/react-viewer";
import { HelloPanel } from "./components/HelloPanel";

Depois dos imports e antes de export function App(), acrescente:

const helloPanel: ViewerCustomPanel = {
  key: "hello",
  label: "Olá",
  presentation: "side",
  content: <HelloPanel />,
};

Esse objeto conecta seu componente ao contrato do viewer:

O tipo ViewerCustomPanel permite que o TypeScript confira esse registro. Como este exemplo não precisa de dados do App, sua descrição pode ficar fora da função.

3. Acrescente à lista de painéis¶

Ainda em App.tsx, encontre a propriedade customPanels do elemento PycomClinicalViewerNext:

customPanels={viewerConfig.localAgents ? [agentsPanel] : []}

Substitua-a por:

customPanels={[
  ...(viewerConfig.localAgents ? [agentsPanel] : []),
  helloPanel,
]}

O operador ... mantém os painéis já habilitados, e helloPanel acrescenta a nova ferramenta. Se sua aplicação já tiver outras entradas, preserve-as também.

O viewer usa essa lista para criar a ação Olá na barra lateral e apresentar <HelloPanel /> quando ela for selecionada. Toda a interface interna de abertura e fechamento já faz parte de react-viewer.

4. Experimente¶

Salve os arquivos e volte ao navegador:

1. Localize Olá na barra lateral do viewer.
2. Abra o painel. Você deve ver Olá, EdgePy! e Cliques: 0.
3. Pressione Contar um clique duas vezes. O resultado deve ser Cliques: 2.
4. Feche e reabra o painel. O contador volta a zero: o estado pertence ao componente, que é desmontado quando seu conteúdo deixa de ser exibido.
5. Confira que os painéis existentes continuam disponíveis.

Para experimentar outra apresentação, altere presentation: "side" para presentation: "bottom" e abra o painel novamente. O viewer cuida da nova posição, sem exigir mudanças na lógica do componente.

Se Olá não aparecer, confira se helloPanel está na lista customPanels do viewer renderizado e consulte os erros mostrados pelo Vite.

5. Confira a alteração¶

Na raiz do workspace, execute:

npm run typecheck
npm run build -w @pycom/clinical-viewer-next-demo
git status --short
git diff -- apps/viewer-demo/src/App.tsx

O resultado esperado é a tipagem e o build concluírem sem erros. O comando de build compila apenas a aplicação do viewer, sem exigir as dependências Python das docs. O git status também mostra o componente novo, que ainda não aparece no diff enquanto não for rastreado.

O que este exemplo demonstra¶

A aplicação forneceu um componente por customPanels, e o viewer acrescentou sua ação e seu conteúdo à interface. As mudanças ficaram no componente novo e no registro em App.tsx. Para isso, não foi preciso acessar o modelo clínico, a importação DICOM ou o Cornerstone.

Ao reproduzir, registre se esses dois arquivos foram suficientes, se o comportamento observado correspondeu aos passos e quais dúvidas surgiram. Isso documenta a extensibilidade para a tarefa de acrescentar um painel interativo simples.

Anterior: Tipos de componente · Próximo: Histograma, que acrescenta leitura de pixels e cálculo a esse mesmo mecanismo de registro.