[WIP] Using Component Generator

.circleci/config.yml

@@ -25,18 +25,20 @@ jobs:
  python -m venv venv || virtualenv venv
  . venv/bin/activate
  pip install -r dev-requirements.txt --quiet
- git clone --depth 1 git@github.com:plotly/dash.git dash-main
- pip install -e ./dash-main[dev,testing] --quiet
- cd dash-main/dash-renderer && npm ci && npm run build && pip install -e . && cd ./../..
+ git clone --depth 1 -b dcg-template git@github.com:plotly/dash.git main
+ cd ./main/\@plotly/dash-generate-components; npm ci; cd ../../..
+ pip install -e ./main[dev,testing] --quiet
+ cd main/dash-renderer && npm ci && npm run build && pip install -e . && cd ./../..
 
  - run:
  name: Build
  command: |
  . venv/bin/activate
  npm run private::build:js-test
  npm run private::build:backends
- python setup.py sdist
- cd dist
+ ls -laR .dcg/dist/py
+ cat .dcg/dist/py/dash_table/metadata.json
+ cd .dcg/dist/py; python setup.py sdist; cd dist
  find . -name "*.gz" | xargs pip install --no-cache-dir --ignore-installed && cd ..
 
  - run:
@@ -107,7 +109,9 @@ jobs:
  python -m venv venv || virtualenv venv
  . venv/bin/activate
  pip install -r dev-requirements.txt --quiet
- pip install --progress-bar off -e git+https://github.com/plotly/dash.git@dev#egg=dash[dev,testing]
+ pip install --progress-bar off -e git+https://github.com/plotly/dash.git@dcg-template#egg=dash[dev,testing]
+ git clone --depth 1 -b dcg-template git@github.com:plotly/dash.git main
+ cd ./main/\@plotly/dash-generate-components; npm ci; cd ../../..
 
  - run:
  name: Run tests
@@ -213,15 +217,17 @@ jobs:
  name: Install dependencies (dash)
  command: |
  . venv/bin/activate
- git clone --depth 1 git@github.com:plotly/dash.git dash-main
- pip install -e ./dash-main[dev,testing] --quiet
- cd dash-main/dash-renderer && npm ci && npm run build && pip install -e . && cd ../..
+ git clone --depth 1 -b dcg-template git@github.com:plotly/dash.git main
+ cd ./main/\@plotly/dash-generate-components; npm ci; cd ../../..
+ pip install -e ./main[dev,testing] --quiet
+ cd main/dash-renderer && npm ci && npm run build && pip install -e . && cd ../..
 
  - run:
  name: Install test requirements
  command: |
  . venv/bin/activate
  npm run build
+ cd .dcg/dist/py
  python setup.py sdist
  cd dist
  find . -name "*.gz" | xargs pip install --no-cache-dir --ignore-installed && cd ..

.dcg/R/dashDataTable.R

@@ -0,0 +1,70 @@
+# For comprehensive documentation of this package's features,
+# please consult https://dashr.plot.ly/datatable
+#
+# A package vignette is currently in development and will
+# provide many of the same examples currently available online
+# in an offline-friendly format.
+
+# The following if statement is not required to run this
+# example locally, but was added at the request of CRAN
+# maintainers.
+if (interactive() && require(dash)) {
+ library(dash)
+ library(dashTable)
+
+ app <- Dash$new()
+
+ # We can easily restrict the number of rows to display at
+ # once by using style_table:
+ app$layout(
+ dashDataTable(
+ id = "table",
+ columns = lapply(colnames(iris),
+ function(colName){
+ list(
+ id = colName,
+ name = colName
+ )
+ }),
+ style_table = list(
+ maxHeight = "250px",
+ overflowY = "scroll"
+ ),
+ data = df_to_list(iris)
+ )
+ )
+
+ app$run_server()
+
+ app <- Dash$new()
+
+ # We can also make rows and columns selectable/deletable
+ # by setting a few additional attributes:
+ app$layout(
+ dashDataTable(
+ id = "table",
+ columns = lapply(colnames(iris),
+ function(colName){
+ list(
+ id = colName,
+ name = colName,
+ deletable = TRUE
+ )
+ }),
+ style_table = list(
+ maxHeight = "250px",
+ overflowY = "scroll"
+ ),
+ data = df_to_list(iris),
+ editable = TRUE,
+ filter_action = "native",
+ sort_action = "native",
+ sort_mode = "multi",
+ column_selectable = "single",
+ row_selectable = "multi",
+ row_deletable = TRUE
+ )
+ )
+
+ app$run_server()
+}

.dcg/R/df_to_list.R

@@ -0,0 +1,8 @@
+df_to_list <- function(df) {
+ if(!(is.data.frame(df)))
+ stop("df_to_list requires a data.frame object; please verify that df is of the correct type.")
+ stats::setNames(lapply(split(df, seq(nrow(df))),
+ FUN = function (x) {
+ as.list(x)
+ }), NULL)
+}

.dcg/R/df_to_list.Rd

@@ -0,0 +1,43 @@
+% Auto-generated: do not edit by hand
+\name{df_to_list}
+
+\alias{df_to_list}
+
+\title{Convert data.frame objects to list-of-lists format}
+
+\description{
+Convert a \code{\link{data.frame}} to a list of lists for compatibility with \code{\link{dashDataTable}}. The function will return a nested list object in which the sublists contain named elements of varying type; the names correspond to the column names in the original \code{\link{data.frame}}.
+}
+
+\usage{
+df_to_list(df)
+}
+
+\arguments{
+\item{df}{A \code{data.frame} object, which will be transformed into a list of lists. Each row will become a single named list, in which the elements are named as the columns from which they were extracted.}
+}
+
+\value{
+a \code{list} object, in which the sublists are named elements of varying type; the names correspond to the column names in the \code{data.frame} specified by \code{df}.
+}
+
+\examples{
+# first, create data frame
+df <- read.csv(url(
+ 'https://raw.githubusercontent.com/plotly/datasets/master/solar.csv'
+ ),
+ check.names=FALSE,
+ stringsAsFactors=FALSE
+)
+
+# then convert to list-of-lists format for use in dashTable
+# the following snippet below will print as JSON
+# see the help for dashDataTable to see an actual app example
+dashDataTable(
+ id = 'table',
+ columns = lapply(colnames(df), function(x) {
+ list(name = x, id = x)
+ }),
+ data = df_to_list(df)
+)
+}

.dcg/R/pkg_help_description.txt

@@ -0,0 +1,7 @@
+An interactive table component designed for editing and exploring
+large datasets, 'dashDataTable' is rendered with standard, semantic HTML
+<table/> markup, which makes it accessible, responsive, and easy
+to style. This component was written from scratch in 'React.js'
+specifically for the 'Dash' community. Its API was designed to be
+ergonomic and its behaviour is completely customizable through its
+properties.

.dcg/config.yaml

@@ -0,0 +1,68 @@
+componentPaths:
+ - src/dash-table/dash/DataTable.js
+
+recipes:
+ - py
+ - R
+
+dist:
+ - source: dash_table/bundle.js
+ target: bundle.js
+ external: true
+ - source: dash_table/bundle.js.map
+ target: bundle.js.map
+ dynamic: true
+ external: true
+ - source: dash_table/async-export.js
+ target: async-export.js
+ async: true
+ external: true
+ - source: dash_table/async-export.js.map
+ target: async-export.js.map
+ dynamic: true
+ external: true
+ - source: dash_table/async-highlight.js
+ target: async-highlight.js
+ async: true
+ external: true
+ - source: dash_table/async-highlight.js.map
+ target: async-highlight.js.map
+ dynamic: true
+ external: true
+ - source: dash_table/async-table.js
+ target: async-table.js
+ async: true
+ external: true
+ - source: dash_table/async-table.js.map
+ target: async-table.js.map
+ dynamic: true
+ external: true
+
+vars:
+ py:
+ dist:
+ - source: Format.py
+ target: Format.py
+ - source: FormatTemplate.py
+ target: FormatTemplate.py
+
+ R:
+ prefix: dash
+ depends:
+ imports:
+ suggests:
+ - dash
+
+ pkg_authors: c(person("Chris", "Parmer", email = "chris@plotly.com", role = c("aut")), person("Ryan Patrick", "Kyle", email = "ryan@plotly.com", role = c("cre"), comment = c(ORCID = "0000-0002-4958-2844")), person(family = "Plotly Technologies, Inc.", role = "cph"))
+ pkg_help_description: ${js.core.readConfigFile('pkg_help_description.txt')}
+ pkg_help_title: Core Interactive Table Component for 'Dash'
+ pkg_copyright: Plotly Technologies, Inc.
+ examples:
+ DataTable:
+ dontrun: false
+ code: ${js.core.readConfigFile('dashDataTable.R')}
+ dist:
+ - source: df_to_list.Rd
+ target: man/df_to_list.Rd
+ - source: df_to_list.R
+ target: R/df_to_list.R