[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