Dash - Aplicativos da Web analítica em Perl (Port of Plotly's Dash to Perl)
Versão 0.11
use Dash;
use aliased ' Dash::Html::Components ' => ' html ' ;
use aliased ' Dash::Core::Components ' => ' dcc ' ;
use aliased ' Dash::Dependencies ' => ' deps ' ;
my $external_stylesheets = [ ' https://codepen.io/chriddyp/pen/bWLwgP.css ' ];
my $app = Dash -> new(
app_name => ' Basic Callbacks ' ,
external_stylesheets => $external_stylesheets
);
$app -> layout(
html -> Div([
dcc -> Input( id => ' my-id ' , value => ' initial value ' , type => ' text ' ),
html -> Div( id => ' my-div ' )
])
);
$app -> callback(
deps -> Output( ' my-div ' , ' children ' ),
[deps -> Input( ' my-id ' , ' value ' )],
sub {
my $input_value = shift ;
return " You've entered ' $input_value ' " ;
}
);
$app -> run_server();
use Dash;
use aliased ' Dash::Html::Components ' => ' html ' ;
use aliased ' Dash::Core::Components ' => ' dcc ' ;
my $external_stylesheets = [ ' https://codepen.io/chriddyp/pen/bWLwgP.css ' ];
my $app = Dash -> new(
app_name => ' Random chart ' ,
external_stylesheets => $external_stylesheets
);
my $initial_number_of_values = 20;
$app -> layout(
html -> Div( children => [
dcc -> Input( id => ' my-id ' , value => $initial_number_of_values , type => ' number ' ),
dcc -> Graph( id => ' my-graph ' )
])
);
my $serie = [ map { rand (100) } 1 .. $initial_number_of_values ];
$app -> callback(
Output => { component_id => ' my-graph ' , component_property => ' figure ' },
Inputs => [{ component_id => ' my-id ' , component_property => ' value ' }],
callback => sub {
my $number_of_elements = shift ;
my $size_of_serie = scalar @$serie ;
if ( $number_of_elements >= $size_of_serie ) {
push @$serie , map { rand (100) } $size_of_serie .. $number_of_elements ;
} else {
@$serie = @$serie [0 .. $number_of_elements ];
}
return { data => [ {
type => " scatter " ,
y => $serie
}]};
}
);
$app -> run_server();Este pacote é uma porta de traço da plotly para Perl.
O Dash facilita muito a construção de aplicativos da Web analítica. Não é necessário javascript.
É uma ótima maneira de colocar uma boa interface da Web interativa no seu aplicativo de análise de dados sem precisar fazer uma interface JavaScript e sem precisar configurar servidores ou estruturas da Web. O caso de uso típico é que você apenas possui novos dados para o seu modelo ML/AI e deseja explorar diferentes maneiras de treinamento ou apenas visualizar os resultados de diferentes configurações de parâmetros.
As partes principais de um aplicativo DASH são:
Layout
Parte declarativa do aplicativo onde você especifica a visualização. Esse layout é composto de componentes dispostos em uma hierarquia, assim como o HTML. Esses componentes estão disponíveis como suites componentes (por exemplo: Dash :: html :: componentes, Dash :: Core :: Components, ...) e podem ser elementos HTML simples (por exemplo, Dash :: html :: componentes :: h1) ou tão complexo quanto você deseja Dash :: Core :: componentes: Gráfico de Gráfico. Na maioria das vezes, você usará os componentes de traço já construídos e prontos para uso.
Retornos de chamada
Este é o código PERL que é executado quando algum componente muda e o resultado dessa execução outro componente (ou componentes) é atualizado. Todo retorno de chamada declara um conjunto de entradas, um conjunto de saídas e, opcionalmente, um conjunto de entradas de "estado". Todas as entradas, saídas e entradas de "estado" são conhecidas como dependências de retorno de chamada. Toda dependência está relacionada a algumas propriedades de algum componente; portanto, as entradas determinam que, se uma propriedade de um componente declarado como entrada em um retorno de chamada acionará esse retorno de chamada e a saída retornada pelo retorno de chamada atualizará a propriedade do componente declarado como saída.
Portanto, para criar um aplicativo DASH, você só precisa configurar o layout e os retornos de chamada. O esqueleto básico será:
my $app = Dash -> new( app_name => ' My Perl Dash App ' );
$app -> layout(...);
$app -> callback(...);
$app -> run_server();Na sinopse, você pode gostar de como isso funciona e também na pasta exemplos da distribuição
O layout é a parte declarativa do aplicativo e é o DOM do nosso aplicativo. O elemento raiz pode ser qualquer componente e, depois que o elemento raiz é feito, o restante são "filhos" deste componente raiz, ou seja, eles são o valor da propriedade dos filhos do componente pai e dos filhos pode ser uma "coisa" (texto, componente, o que puder, o tempo que puder ser convertido em JSON) ou uma matriz de "coisas". Portanto, os componentes podem ser compostos o quanto você quiser. Por exemplo:
$app -> layout(html -> Div( children => [
html -> H1( children => ' Making Perl Dash Apps ' ),
html -> Img( src => ' https://raw.githubusercontent.com/kraih/perl-raptor/master/example.png ' )
]));Este pacote envia as seguintes suítes componentes e está pronto para usar:
O plano é fazer os pacotes também para Dash-Bio, Dash-DAQ, Dash-Canvas e Dash-Citoscape.
Cada componente tem uma classe própria. Por exemplo, Dash-Html-Component Div tem a classe: DASH :: html :: componentes :: Div e você pode usá-lo a maneira padrão Perl:
use Dash::Html::Components::Div;
...
$app -> layout(Dash::Html::Components::Div -> new( id => ' my-div ' , children => ' This is a simple div ' ));Mas com cada suíte de componentes pode ser muitos componentes. Portanto, para facilitar a tarefa de importá -los (um por um é um pouco tedioso), poderíamos usar duas maneiras:
Cada conjunto de componentes possui um método de fábrica para cada componente. E o uso deste método de fábrica das crianças -chave das crianças é opcional, desde que as crianças sejam o primeiro elemento. Por exemplo, Dash :: html :: componentes tem o método de fábrica div para carregar e construir um traço :: html :: components :: Div Component:
use Dash::Html::Components;
...
$app -> layout(Dash::Html::Components -> Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(Dash::Html::Components -> Div( ' This is a simple div ' , id => ' my-div ' );Mas esses métodos de fábrica devem ser alias, para que isso fique menos detalhado:
use aliased ' Dash::Html::Components ' => ' html ' ;
...
$app -> layout(html -> Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(html -> Div( ' This is a simple div ' , id => ' my-div ' ));Muitos módulos usam o exportador e os amigos para reduzir a digitação. Se você gosta dessa maneira, todo conjunto de componentes recebe um pacote de funções para importar todas essas funções para o seu espaço para nome. O uso dessas funções também permite o início da palavra -chave das crianças se as crianças forem o primeiro elemento.
Por exemplo, para Dash :: html :: componentes, há um pacote Dash :: html :: ComponentsFunctions com uma função de fábrica para carregar e construir o componente com o mesmo nome:
use Dash::Html::ComponentsFunctions;
...
$app -> layout(Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(Div( ' This is a simple div ' , id => ' my-div ' ));Os retornos de chamada são a parte reativa do aplicativo da web. Eles ouvem mudanças nas propriedades dos componentes e são demitidos por essas mudanças. A saída dos retornos de chamada pode atualizar propriedades para outros componentes (ou propriedades diferentes para os mesmos componentes) e potencialmente disparar outros retornos de chamada. Portanto, seu aplicativo está "reagindo" às mudanças. Essas propriedades que o incêndio mudam e as propriedades que são atualizadas são dependências do retorno de chamada, elas são os "links" entre componentes e retornos de chamada.
Todo componente que deve disparar um retorno de chamada deve ter uma propriedade de identificação exclusiva.
Para definir um retorno de chamada, pelo menos é necessário:
Entradas
A propriedade do componente (ou propriedades dos componentes) que disparam o retorno de chamada em todas as alterações. Os valores dessas propriedades são insumos para os retornos de chamada
Saída
O componente (ou componentes) cuja propriedade (ou propriedades) é atualizada
ligar de volta
O código que é executado
Um retorno de chamada mínimo será:
$app -> callback(
Output => { component_id => ' my-div ' , component_property => ' children ' },
Inputs => [{ component_id => ' my-id ' , component_property => ' value ' }],
callback => sub {
my $input_value = shift ;
return " You've entered ' $input_value ' " ;
}
);Dependências "link" componentes e retornos de chamada. Cada dependência de retorno de chamada tem os seguintes atributos:
componente_id
Valor da propriedade ID para o componente
componente_property
Nome da propriedade
Um retorno de chamada pode ter um ou mais entradas e, para todas as entradas declaradas para um retorno de chamada, o valor da propriedade será um parâmetro para o retorno de chamada na mesma ordem que as dependências de entrada são declaradas.
Um retorno de chamada pode ter uma ou mais dependências de saída. Quando houver apenas uma saída, o valor retornado pelo retorno de chamada atualiza o valor da propriedade do componente. No segundo caso, a saída do retorno de chamada deve ser uma lista na lista retornada será mapeada uma a uma para as saídas na mesma ordem que as dependências de saída são declaradas.
Além dos insumos, um retorno de chamada pode precisar do valor de outras propriedades de outros componentes, mas sem disparar o retorno de chamada. As dependências estaduais são para este caso. Portanto, para cada dependência do estado declarada para um retorno de chamada, o Valor OS, a propriedade será um parâmetro para o retorno de chamada na mesma ordem, as dependências do estado são declaradas, mas depois de todas as entradas.
As dependências podem ser declaradas usando apenas uma referência de hash, mas a maneira preferida é usar as classes e métodos e funções de fábrica, como nos componentes.
Usando objetos:
use Dash::Dependencies::Input;
use Dash::Dependencies::Output;
...
$app -> callback(
Output => Dash::Dependencies::Output -> new( component_id => ' my-div ' , component_property => ' children ' ),
Inputs => [Dash::Dependencies::Input -> new( component_id => ' my-id ' , component_property => ' value ' )],
callback => sub {
my $input_value = shift ;
return " You've entered ' $input_value ' " ;
}
);O uso de objetos permite omitir os argumentos das palavras -chave no método de retorno de chamada:
use Dash::Dependencies::Input;
use Dash::Dependencies::Output;
...
$app -> callback(
Dash::Dependencies::Output -> new( component_id => ' my-div ' , component_property => ' children ' ),
[Dash::Dependencies::Input -> new( component_id => ' my-id ' , component_property => ' value ' )],
sub {
my $input_value = shift ;
return " You've entered ' $input_value ' " ;
}
);Também existem métodos de fábrica para usar essas dependências, o que permite omitir os argumentos das palavras -chave para as dependências:
use Dash::Dependencies;
...
$app -> callback(
Dash::Dependencies -> Output( ' my-div ' , ' children ' ),
[Dash::Dependencies -> Input( component_id => ' my-id ' , component_property => ' value ' )],
sub {
my $input_value = shift ;
return " You've entered ' $input_value ' " ;
}
);Isso pode ser alias
use aliased ' Dash::Dependencies ' => ' deps ' ;
...
$app -> callback(
deps -> Output( component_id => ' my-div ' , component_property => ' children ' ),
[deps -> Input( ' my-id ' , ' value ' )],
sub {
my $input_value = shift ;
return " You've entered ' $input_value ' " ;
}
);Mas se você preferir usar apenas funções em seu espaço para nome:
use Dash::DependenciesFunctions;
...
$app -> callback(
Output( ' my-div ' , ' children ' ),
[Input( component_id => ' my-id ' , component_property => ' value ' )],
sub {
my $input_value = shift ;
return " You've entered ' $input_value ' " ;
}
);A última etapa está executando o aplicativo. Basta ligar:
$app->run_server();
E ele iniciará um servidor na porta 8080 e abrirá um navegador para começar a usar seu aplicativo!
Existem muitos componentes ... para Python. Então, se você quiser contribuir, ficarei feliz em ajudar.
Enquanto isso, você pode construir seu próprio componente. Vou fazer um guia melhor e um construtor automatizado, mas agora você deve usar https://github.com/plotly/dash-component-boilerplate para toda a parte do JavaScript (é baseada em React) e depois da parte Perl é muito fácil (os componentes são principalmente JavaScript, ou TypetScript):
DashNamespace
Espaço para nome do componente
_js_dist
Dependências de javascript para o componente
_css_dist
Dependências CSS para o componente
Opcionalmente, o conjunto de componentes terá o pacote de funções e os métodos de fábrica para facilitar o uso.
Então você só precisa publicar o componente Suite como um pacote Perl. Para novos suítes de componentes, você pode usar o nome do pacote que desejar, mas se quiser usar o Dash :: NameSpace, use o Dash :: Components :: para evitar colisões futuras com desenvolvimento adicional. Além disso, facilitará a localização de mais componentes.
Como mencionado cedo, farei um construtor automatizado, mas as contribuições são mais do que bem -vindas !! Enquanto isso, verifique contribuindo.md
Fazer um componente para o DASH que não é baseado no React é um pouco difícil, então, primeiro, obtenha a parte do JavaScript com base e, depois, integrá -lo com Perl, R ou Python será fácil.
Neste momento, essa biblioteca é experimental e ainda está sob desenvolvimento ativo e a API vai mudar!
O objetivo final, é claro, é apoiar tudo o que as versões Python e R suporta.
O uso seguirá a versão python do Dash, o mais próximo possível, para que o documento Python possa ser usado com pequenas alterações:
Na sinopse, você pode gostar de como isso funciona e também na pasta exemplos da distribuição ou diretamente no repositório. O tutorial de traço completo é transportado para Perl nessas pastas de exemplos.
No momento, faltam muitas peças:
E muito mais, mas você pode usá -lo agora para fazer ótimos aplicativos! (Se você precisar de alguma inspiração ... basta verificar https://dash-gallery.plotly.host/portal/)
AVISO : Este módulo não é testado quanto à segurança, portanto, teste -o se você for executar o servidor de aplicativos em um servidor público.
Este é um módulo plotly perl não oficial. Atualmente não sou afiliado de forma alguma com a plotly. Mas acho que Dash é uma ótima biblioteca e quero usá -la com Perl.
Se você gosta de Dash, considere apoiá -los para comprar serviços profissionais: Dash Enterprise
Pablo Rodríguez González [email protected]
Este software é Copyright (C) 2022 por Pablo Rodríguez González.
Este é um software livre, licenciado em:
The MIT (X11) License