Dash - Aplicaciones web analíticas en Perl (puerto de Plotly's Dash to Perl)
Versión 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 paquete es un puerto de Plotly's Dash a Perl.
Dash facilita la creación de aplicaciones web analíticas muy fáciles. No se requiere JavaScript.
Es una excelente manera de poner una buena interfaz web interactiva a su aplicación de análisis de datos sin tener que hacer una interfaz JavaScript y sin tener que configurar servidores o marcos web. El caso de uso típico es que solo tiene nuevos datos en su modelo ML/AI y desea explorar diferentes formas de entrenamiento o simplemente visualizar los resultados de diferentes configuraciones de parámetros.
Las partes principales de una aplicación de tablero son:
Disposición
Parte declarativa de la aplicación donde especifica la vista. Este diseño está compuesto por componentes dispuestos en una jerarquía, al igual que HTML. Estos componentes están disponibles como suites de componentes (por ejemplo: Dash :: HTML :: Components, Dash :: Core :: Components, ...) y pueden ser elementos simples HTML (por ejemplo Dash :: Html :: Components :: H1) o tan complejos como desee como Dash :: Core :: Components :: Graph que es un componente de registro basado en trama.js. La mayoría de las veces usará los componentes del tablero ya construidos y listos para usar.
Devoluciones de llamada
Este es el código Perl que se ejecuta cuando cambia algún componente y el resultado de esta ejecución se actualiza otro componente (o componentes). Cada devolución de llamada declara un conjunto de entradas, un conjunto de salidas y, opcionalmente, un conjunto de entradas de "estado". Todas las entradas, salidas y entradas de "estado" se conocen como dependencias de devolución de llamada. Cada dependencia está relacionada con alguna propiedad de algún componente, por lo que las entradas determinan que si una propiedad de un componente declarada como entrada en una devolución de llamada activará esa devolución de llamada, y la salida devuelta por la devolución de llamada actualizará la propiedad del componente declarado como salida.
Por lo tanto, para hacer una aplicación de tablero, solo necesita configurar el diseño y las devoluciones de llamada. El esqueleto básico será:
my $app = Dash -> new( app_name => ' My Perl Dash App ' );
$app -> layout(...);
$app -> callback(...);
$app -> run_server();En la sinopsis puede probar cómo funciona esto y también en la carpeta de ejemplos de la distribución
El diseño es la parte declarativa de la aplicación y es el DOM de nuestra aplicación. El elemento raíz puede ser cualquier componente, y después de que se realiza el elemento raíz, el resto son "niños" de este componente de raíz, es decir, son el valor de la propiedad de los niños del componente principal y los niños pueden ser una "cosa" (texto, componente, lo que sea que se pueda convertir a JSON) o un arrayref de "cosas". Entonces, los componentes pueden componerse tanto como desee. Por ejemplo:
$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 paquete envía las siguientes suites de componentes y están listos para usar:
El plan es hacer los paquetes también para Dash-Bio, Dash-Daq, Dash-Canvas y Dash-Cytoscape.
Cada componente tiene una clase propia. Por ejemplo, Dash-Html-Component Div tiene la clase: Dash :: HTML :: Components :: Div y puede usarlo de la manera estándar de Perl:
use Dash::Html::Components::Div;
...
$app -> layout(Dash::Html::Components::Div -> new( id => ' my-div ' , children => ' This is a simple div ' ));Pero con cada suite de componentes podría ser muchos componentes. Entonces, para aliviar la tarea de importarlos (uno por uno es un poco tedioso) podríamos usar dos maneras:
Cada conjunto de componentes tiene un método de fábrica para cada componente. Y el uso de estos métodos de fábrica, la palabra clave para niños es opcional siempre que los niños sea el primer elemento. Por ejemplo, Dash :: Html :: Components tiene el método de fábrica Div para cargar y construir un tablero :: html :: componentes :: componente div:
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 ' );Pero estos métodos de fábrica están destinados a ser alias, por lo que esto se vuelve menos detallado:
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 ' ));Muchos módulos usan el exportador y los amigos para reducir la escritura. Si le gusta de esa manera, cada suite de componentes obtiene un paquete de funciones para importar todas estas funciones a su espacio de nombres. El uso de estas funciones también permite omitir la palabra clave de los niños si los niños es el primer elemento.
Entonces, por ejemplo, para Dash :: Html :: Components Hay un paquete DASH :: HTML :: ComponentsFunctions con una función de fábrica para cargar y construir el componente con el mismo nombre:
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 ' ));Las devoluciones de llamada son la parte reactiva de la aplicación web. Escuchan cambios en las propiedades de los componentes y se disparan por esos cambios. La salida de las devoluciones de llamada puede actualizar las propiedades para otros componentes (o diferentes propiedades para los mismos componentes) y potencialmente disparar otras devoluciones de llamada. Entonces su aplicación está "reaccionando" a los cambios. Estas propiedades que se disparan y las propiedades que se actualizan son dependencias de la devolución de llamada, son los "enlaces" entre componentes y devoluciones de llamada.
Cada componente que se espera que dispare una devolución de llamada debe tener una propiedad de identificación única.
Para definir una devolución de llamada es necesaria al menos:
Entradas
La propiedad del componente (o las propiedades de los componentes) que disparan la devolución de llamada en cada cambio. Los valores de estas propiedades son entradas para las devoluciones de llamada
Producción
El componente (o componentes) cuya propiedad (o propiedades) se actualiza
llamar de vuelta
El código que se ejecuta
Una devolución de llamada minimun 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 ' " ;
}
);Dependencias "Enlace" componentes y devoluciones de llamada. Cada dependencia de devolución de llamada tiene los siguientes atributos:
componente_id
Valor de la propiedad de identificación para el componente
componente_property
Nombre de la propiedad
Una devolución de llamada puede tener una o más entradas y para cada entrada declarada para una devolución de llamada, el valor de la propiedad será un parámetro para la devolución de llamada en el mismo orden que se declaran las dependencias de entrada.
Una devolución de llamada puede tener una o más dependencias de salida. Cuando solo hay una salida, el valor devuelto por la devolución de llamada actualiza el valor de la propiedad del componente. En el segundo caso, la salida de la devolución de llamada debe ser una lista en la lista devuelta se asignará una por una a las salidas en el mismo orden que se declaran las dependencias de salida.
Además de las entradas, una devolución de llamada podría necesitar el valor de otras propiedades de otros componentes pero sin disparar la devolución de llamada. Las dependencias estatales son para este caso. Entonces, para cada dependencia del estado declarada para una devolución de llamada, el valor del sistema operativo, la propiedad será un parámetro para la devolución de llamada en el mismo orden, se declaran las dependencias de estado, pero después de todas las entradas.
Las dependencias se pueden declarar utilizando solo una referencia hash, pero la forma preferida es usar las clases y los métodos y funciones de fábrica como con los 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 ' " ;
}
);El uso de objetos permite omitir los argumentos de palabras clave en el método de devolución de llamada:
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 ' " ;
}
);También hay métodos de fábrica para usar estas dependencias, lo que permite omitir los argumentos de palabras clave para las dependencias:
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 ' " ;
}
);Esto puede 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 ' " ;
}
);Pero si prefiere usar solo funciones en su espacio de nombres:
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 ' " ;
}
);El último paso es ejecutar la aplicación. Solo llame:
$app->run_server();
¡Y iniciará un servidor en el puerto 8080 y abrirá un navegador para comenzar a usar su aplicación!
Hay muchos componentes ... para Python. Entonces, si quieres contribuir, estaré encantado de ayudar.
Mientras tanto, puede construir su propio componente. Haré una mejor guía y un constructor automatizado, pero en este momento debería usar https://github.com/plotly/dash-component-boilerplate para toda la parte de JavaScript (está basada en reaccionamiento) y después de eso la parte perl es muy fácil (los componentes son en su mayoría javascript, o mecanografiado):
DashNamespace
Espacio de nombres del componente
_js_dist
Dependencias de JavaScript para el componente
_css_dist
Dependencias de CSS para el componente
Opcionalmente, el conjunto de componentes tendrá el paquete de funciones y los métodos de fábrica para facilitar el uso.
Entonces solo tiene que publicar el conjunto de componentes como un paquete Perl. Para nuevas suites de componentes, puede usar cualquier nombre de paquete que desee, pero si desea usar Dash :: Espacio de nombres, use Dash :: Components :: para evitar colisiones futuras con un mayor desarrollo. Además de esto, facilitará encontrar más componentes.
Como se mencionó temprano, haré un constructor automático, ¡pero las contribuciones son más que bienvenidas! Mientras tanto, consulte la contribución.md
Hacer un componente para DASH que no esté basado en React es un poco difícil, así que primero obtenga la parte JavaScript React Based y después de eso, integrarlo con Perl, R o Python será fácil.
¡En este momento, esta biblioteca es experimental y aún está bajo desarrollo activo y la API va a cambiar!
El objetivo final, por supuesto, es apoyar todo lo que las versiones de Python y R respaldan.
El uso seguirá la versión Python de Dash, lo más cerca posible, por lo que el Doc de Python se puede usar con cambios menores:
En la sinopsis, puede probar cómo funciona esto y también en la carpeta de ejemplos de la distribución o directamente en el repositorio. El tutorial de tablero completo está portado a Perl en la carpeta de esos ejemplos.
En este momento faltan muchas piezas:
Y muchos más, ¡pero podrías usarlo ahora mismo para hacer excelentes aplicaciones! (Si necesita algo de inspiración ... simplemente consulte https://dash-gallery.plotly.host/portal/)
ADVERTENCIA : Este módulo no se prueba por seguridad, así que pruebe si va a ejecutar el servidor de aplicaciones en un servidor de orientación pública.
Este es un módulo de perl no oficial de plumamente. Actualmente no estoy afiliado de ninguna manera con Plotly. Pero creo que Dash es una gran biblioteca y quiero usarla con Perl.
Si desea Dash, considere apoyarlos para comprar servicios profesionales: Dash Enterprise
Pablo Rodríguez González [email protected]
Este software es Copyright (C) 2022 de Pablo Rodríguez González.
Este es un software gratuito, con licencia bajo:
The MIT (X11) License