O que graph-viewer faz?
Integre o visualizador de gráficos CDF reutilizável (useGraphViewer) em um aplicativo Flows copiando o pacote de código local. Use ao incorporar uma visualização de grafo, adicionar um grafo de conhecimento ou exibir relacionamentos e instâncias do modelo de dados CDF.
Visão Geral
O skill cognitedata/graph-viewer fornece um mecanismo simples para trazer o componente useGraphViewer para sua aplicação Flows. Ele copia automaticamente o código-fonte, configurações e dependências necessárias para o diretório do seu projeto, permitindo que você comece a usar o visualizador de grafos imediatamente.
Como Usar
Para utilizar este skill, execute o seguinte comando no diretório raiz do seu projeto Flows:
cdf flows skill add cognitedata/graph-viewer
Isso copiará os arquivos do visualizador de grafo para ./src/skills/cognitedata/graph-viewer/.
O que é Incluído
- Componente React:
GraphViewer.jsx– um componente pronto para uso. - Hooks customizados:
useGraphViewer.js– gerencia o estado e a lógica de busca de dados do grafo. - Estilos iniciais:
graphViewer.css– estilos básicos para o componente. - Exemplo de uso:
example.js– um exemplo simples de como integrar o componente em uma página.
Pré-requisitos
- Um projeto Flows existente.
- Acesso aos recursos do CDF (credenciais configuradas via variáveis de ambiente, ex:
CDF_CLUSTER,CDF_PROJECT,CDF_CREDENTIALS).
Integração
Após copiar os arquivos, você pode importar e usar o GraphViewer em qualquer parte do seu aplicativo:
import GraphViewer from './skills/cognitedata/graph-viewer/GraphViewer';
function MyPage() {
return (
<div>
<h2>Visualização do Grafo de Conhecimento</h2>
<GraphViewer />
</div>
);
}
Personalização
O componente aceita as seguintes props:
| Prop | Tipo | Descrição | Padrão |
|---|---|---|---|
query | string | Consulta CDF GraphQL para buscar dados do grafo | undefined |
height | string | Altura do contêiner do grafo | '600px' |
theme | object | Objeto de tema para customização visual | {} |
onNodeClick | function | Callback disparado ao clicar em um nó | undefined |
Solução de Problemas
- Erro de autenticação: Verifique se as variáveis de ambiente do CDF estão configuradas corretamente.
- Visualização em branco: Confirme se a consulta GraphQL retorna dados válidos. Consulte a documentação do CDF GraphQL para mais detalhes.