Skip to content

Add Dash table #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 1, 2021
Merged

Add Dash table #27

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3ad2f67
DashTable: Add dash_table component
mr-m-coetzee Sep 22, 2021
d898368
DashTable: JSON fix for layout data names
mr-m-coetzee Sep 22, 2021
2a3e4bf
DashTable: Working with Sauve
mr-m-coetzee Sep 23, 2021
7ca1ed4
DashTable: Refactor to clean - fix Null tooltip
mr-m-coetzee Sep 23, 2021
2b21540
DashTable: Use anonymous records for converted records
mr-m-coetzee Sep 23, 2021
4ef538f
DashTable: Fixed slider
mr-m-coetzee Sep 23, 2021
9f97643
DashTable: Replace anonymous record with JSON attributes
mr-m-coetzee Sep 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/Dash.NET.Giraffe/DashApp.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ open Microsoft.Extensions.Logging
open Microsoft.Extensions.DependencyInjection
open System.Reflection
open Dash.NET
open Newtonsoft.Json

//Giraffe, Logging and ASP.NET specific
type DashGiraffeConfig = {
Expand Down Expand Up @@ -241,6 +242,11 @@ type DashApp =
services.AddCors() |> ignore
services.AddGiraffe() |> ignore

Common.Json.mkSerializerSettings()
|> NewtonsoftJson.Serializer
|> services.AddSingleton<Json.ISerializer>
|> ignore

let configureLogging (builder : ILoggingBuilder) =
builder.AddFilter(fun l -> l.Equals config.LogLevel)
.AddConsole()
Expand Down
1 change: 1 addition & 0 deletions src/Dash.NET.Giraffe/Views.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ module Views =
script [_type "application/javascript"; _crossorigin " "; _src "https://unpkg.com/[email protected]/dash_core_components/dash_core_components.min.js"] []
script [_type "application/javascript"; _crossorigin " "; _src "https://cdn.jsdelivr.net/npm/[email protected]/dash_html_components/dash_html_components.min.js"] []
script [_type "application/javascript"; _crossorigin " "; _src "https://cdn.plot.ly/plotly-latest.min.js"] []
script [_type "application/javascript"; _crossorigin " "; _src DashTable.CdnLink ] []
]

let createIndex metas appTitle faviconPath css appEntry config scripts renderer =
Expand Down
3 changes: 1 addition & 2 deletions src/Dash.NET.Suave/App.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ open Newtonsoft.Json
open Newtonsoft.Json.Serialization

module Util =
let settings = new JsonSerializerSettings()
settings.ContractResolver <- CamelCasePropertyNamesContractResolver()
let settings = Common.Json.mkSerializerSettings()
let json o = JsonConvert.SerializeObject(o, settings)
let unjson<'T> str = JsonConvert.DeserializeObject<'T>(str,settings)

Expand Down
1 change: 1 addition & 0 deletions src/Dash.NET.Suave/Views.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ module Views =
script ["type", "application/javascript"; "crossorigin", " "; "src", "https://unpkg.com/[email protected]/dash_core_components/dash_core_components.min.js"] []
script ["type", "application/javascript"; "crossorigin", " "; "src", "https://cdn.jsdelivr.net/npm/[email protected]/dash_html_components/dash_html_components.min.js"] []
script ["type", "application/javascript"; "crossorigin", " "; "src", "https://cdn.plot.ly/plotly-latest.min.js"] []
script ["type", "application/javascript"; "crossorigin", " "; "src", DashTable.CdnLink ] []
]

let createIndex metas appTitle faviconPath css appEntry config scripts renderer =
Expand Down
13 changes: 13 additions & 0 deletions src/Dash.NET/Common.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
namespace Dash.NET.Common

[<RequireQualifiedAccess>]
module Json =

open Newtonsoft.Json
open Newtonsoft.Json.Serialization

let mkSerializerSettings () =
JsonSerializerSettings(
ContractResolver = DefaultContractResolver(NamingStrategy = new DefaultNamingStrategy())
)

2 changes: 2 additions & 0 deletions src/Dash.NET/Dash.NET.fsproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,15 @@
<Compile Include="DashComponents\CoreComponents\Textarea.fs" />
<Compile Include="DashComponents\CoreComponents\Upload.fs" />
<Compile Include="DashComponents\CoreComponents\Slider.fs" />
<Compile Include="DashComponents\DashTable.fs" />
<Compile Include="DynamicInvoke.fs" />
<Compile Include="Dependency.fs" />
<Compile Include="CallbackBinding.fs" />
<Compile Include="Callback.fs" />
<Compile Include="CallbackBuilder.fs" />
<Compile Include="DashConfig.fs" />
<Compile Include="Operators.fs" />
<Compile Include="Common.fs" />
</ItemGroup>

<ItemGroup>
Expand Down
41 changes: 36 additions & 5 deletions src/Dash.NET/DashComponents/ComponentBase.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,12 @@ module ComponentPropTypes =
ComponentName : string
}
static member create isLoading propName componentName = {IsLoading=isLoading; PropName=propName; ComponentName=componentName}
static member convert this =
box {|
isLoading = this.IsLoading
propName = this.PropName
componentName = this.ComponentName
|}

type PersistenceTypeOptions =
| Local
Expand All @@ -120,6 +126,13 @@ module ComponentPropTypes =
Title:string
}
static member create label value disabled title = {Label=label; Value=value; Disabled=disabled; Title=title}
static member convert this =
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to stop using the camelCase serializer settings, we should add JsonProperty attributes (like here) to all records that will not get serialized correctly with the new settings. Another example (which is why we used camelCase serialization can be seen here)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point - that would be clearer.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to make sure we're on the same page: The problem with the camel-case field names is with "external" data, i.e. when it is being used to pass data in, e.g.

DataTable.dataTable "memory-table" [
    DataTable.Attr.data [
        {| Country = "Canada" |}
        {| Country = "USA" |}
    ]
]

Country would be camel-cased and would fail to bind correctly to the header record "Country".

box {|
label = this.Label
value = this.Value
disabled = this.Disabled
title= this.Title
|}

type RadioItemsOption =
{
Expand All @@ -128,14 +141,26 @@ module ComponentPropTypes =
Disabled:bool
}
static member create label value disabled = {Label=label; Value=value; Disabled=disabled}

type TabColors =
static member convert this =
box {|
label = this.Label
value = this.Value
disabled = this.Disabled
|}

type TabColors =
{
Border : string
Primary : string
Background : string
}
static member create border primary background = {Border=border; Primary=primary; Background=background}
static member convert this =
box {|
border = this.Border
primary = this.Primary
background = this.Background
|}

type ChecklistOption =
{
Expand All @@ -145,10 +170,16 @@ module ComponentPropTypes =
}
static member create label value disabled =
{
Label=label
Value=value
Disabled=disabled
Label = label
Value = value
Disabled = disabled
}
static member convert this =
box {|
label = this.Label
value = this.Value
disabled = this.Disabled
|}

type ComponentProperty =
| Children
Expand Down
8 changes: 4 additions & 4 deletions src/Dash.NET/DashComponents/CoreComponents/Checklist.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@ module Checklist =
| PersistenceType of PersistenceTypeOptions
static member toDynamicMemberDef(prop: Prop) =
match prop with
| Options p -> "options", box p
| Options p -> "options", p |> Seq.map ChecklistOption.convert |> box
| Value p -> "value", box p
| ClassName p -> "className", box p
| Style p -> "style", box p
| InputStyle p -> "inputStyle", box p
| InputClassName p -> "inputClassName", box p
| LabelStyle p -> "labelStyle", box p
| LabelClassName p -> "labelClassName", box p
| LoadingState p -> "loading_state", box p
| LoadingState p -> "loading_state", LoadingState.convert p
| Persistence p -> "persistence", box p
| PersistedProps p -> "persisted_props", box p
| PersistenceType p -> "persistence_type", PersistenceTypeOptions.convert p
Expand Down Expand Up @@ -201,15 +201,15 @@ module Checklist =
let props = DashComponentProps()
DynObj.setValue props "id" id
DynObj.setValue props "children" children
DynObj.setValueOpt props "options" (options |> Option.map box)
DynObj.setValueOpt props "options" (options |> Option.map (Seq.map ChecklistOption.convert >> box))
DynObj.setValueOpt props "value" (value |> Option.map box)
DynObj.setValueOpt props "className" (className |> Option.map box)
DynObj.setValueOpt props "style" (style |> Option.map box)
DynObj.setValueOpt props "inputStyle" (inputStyle |> Option.map box)
DynObj.setValueOpt props "inputClassName" (inputClassName |> Option.map box)
DynObj.setValueOpt props "labelStyle" (labelStyle |> Option.map box)
DynObj.setValueOpt props "labelClassName" (labelClassName |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValueOpt props "persistence" (persistence |> Option.map box)
DynObj.setValueOpt props "persistedProps" (persistedProps |> Option.map box)
DynObj.setValueOpt props "persistenceType" (persistenceType |> Option.map PersistenceTypeOptions.convert)
Expand Down
6 changes: 3 additions & 3 deletions src/Dash.NET/DashComponents/CoreComponents/Dropdown.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ module Dropdown =
static member toDynamicMemberDef (prop:Prop) =
match prop with
| ClassName p -> "className", box p
| Options p -> "options", box p
| Options p -> "options", p |> Seq.map DropdownOption.convert |> box
| Value p -> "value", p |> DropdownValue.convert
| OptionHeight p -> "optionHeight", box p
| Clearable p -> "clearable", box p
Expand All @@ -105,7 +105,7 @@ module Dropdown =
| Searchable p -> "searchable", box p
| SearchValue p -> "search_value", box p
| Style p -> "style", box p
| LoadingState p -> "loading_state", box p
| LoadingState p -> "loading_state", LoadingState.convert p
| Persistence p -> "persistence", box p
| PersistedProps p -> "persisted_props", box p
| PersistenceType p -> "persistence_type", PersistenceTypeOptions.convert p
Expand Down Expand Up @@ -282,7 +282,7 @@ module Dropdown =
DynObj.setValueOpt props "searchable" (searchable |> Option.map box)
DynObj.setValueOpt props "searchValue" (searchValue |> Option.map box)
DynObj.setValueOpt props "style" (style |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValueOpt props "persistence" (persistence |> Option.map box)
DynObj.setValueOpt props "persistedProps" (persistedProps |> Option.map box)
DynObj.setValueOpt props "persistenceType" (persistenceType |> Option.map PersistenceTypeOptions.convert)
Expand Down
4 changes: 2 additions & 2 deletions src/Dash.NET/DashComponents/CoreComponents/Graph.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ module Graph =
| Animate p -> "animate" , box p
| AnimationOptions p -> "animation_options" , box p
| Config p -> "config" , box p
| LoadingState p -> "loading_state" , box p
| LoadingState p -> "loading_state" , LoadingState.convert p

///<summary>
///A list of children or a property for this dash component
Expand Down Expand Up @@ -320,7 +320,7 @@ module Graph =
DynObj.setValueOpt props "animate" (animate |> Option.map box)
DynObj.setValueOpt props "animationOptions" (animationOptions |> Option.map box)
DynObj.setValueOpt props "config" (config |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValue t "namespace" "dash_core_components"
DynObj.setValue t "props" props
DynObj.setValue t "type" "Graph"
Expand Down
4 changes: 2 additions & 2 deletions src/Dash.NET/DashComponents/CoreComponents/Input.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ module Input =
| NBlur p -> "n_blur", box p
| NBlurTimestamp p -> "n_blur_timestamp", box p
| SetProps p -> "setProps", box p
| LoadingState p -> "loading_state", box p
| LoadingState p -> "loading_state", LoadingState.convert p
| Persistence p -> "persistence", box p
| PersistedProps p -> "persisted_props", box p
| PersistenceType p -> "persistence_type", PersistenceTypeOptions.convert p
Expand Down Expand Up @@ -473,7 +473,7 @@ module Input =
DynObj.setValueOpt props "nBlur" (nBlur |> Option.map box)
DynObj.setValueOpt props "nBlurTimestamp" (nBlurTimestamp |> Option.map box)
DynObj.setValueOpt props "setProps" (setProps |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValueOpt props "persistence" (persistence |> Option.map box)
DynObj.setValueOpt props "persistedProps" (persistedProps |> Option.map box)
DynObj.setValueOpt props "persistenceType" (persistenceType |> Option.map PersistenceTypeOptions.convert)
Expand Down
4 changes: 2 additions & 2 deletions src/Dash.NET/DashComponents/CoreComponents/Markdown.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ module Markdown =
| DangerouslyAllowHtml (p) -> "dangerously_allow_html", box p
| Dedent (p) -> "dedent", box p
| HighlightConfig (p) -> "highlight_config", HighlightConfig.convert p
| LoadingState (p) -> "loading_state", box p
| LoadingState (p) -> "loading_state", LoadingState.convert p
| Style (p) -> "style", box p

///<summary>
Expand Down Expand Up @@ -149,7 +149,7 @@ module Markdown =
DynObj.setValueOpt props "dangerouslyAllowHtml" (dangerouslyAllowHtml |> Option.map box)
DynObj.setValueOpt props "dedent" (dedent |> Option.map box)
DynObj.setValueOpt props "highlightConfig" (highlightConfig |> Option.map HighlightConfig.convert)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValueOpt props "style" (style |> Option.map box)
DynObj.setValue t "namespace" "dash_core_components"
DynObj.setValue t "props" props
Expand Down
8 changes: 4 additions & 4 deletions src/Dash.NET/DashComponents/CoreComponents/RadioItems.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@ module RadioItems =
match prop with
| ClassName p -> "className" , box p
| Style p -> "style" , box p
| Options p -> "options" , box p
| Options p -> "options" , p |> Seq.map RadioItemsOption.convert |> box
| Value p -> "value" , box p
| InputClassName p -> "inputClassName" , box p
| InputStyle p -> "inputStyle" , box p
| LabelClassName p -> "labelClassName" , box p
| LabelStyle p -> "labelStyle" , box p
| LoadingState p -> "loading_state" , box p
| LoadingState p -> "loading_state" , LoadingState.convert p
| Persistence p -> "persistence" , box p
| PersistedProps p -> "persisted_props" , box p
| PersistenceType p -> "persistence_type" , PersistenceTypeOptions.convert p
Expand Down Expand Up @@ -205,15 +205,15 @@ module RadioItems =
let props = DashComponentProps()
DynObj.setValue props "id" id
DynObj.setValue props "children" children
DynObj.setValueOpt props "options" (options |> Option.map box)
DynObj.setValueOpt props "options" (options |> Option.map (Seq.map RadioItemsOption.convert >> box))
DynObj.setValueOpt props "value" (value |> Option.map box)
DynObj.setValueOpt props "style" (style |> Option.map box)
DynObj.setValueOpt props "className" (className |> Option.map box)
DynObj.setValueOpt props "inputStyle" (inputStyle |> Option.map box)
DynObj.setValueOpt props "inputClassName" (inputClassName |> Option.map box)
DynObj.setValueOpt props "labelStyle" (labelStyle |> Option.map box)
DynObj.setValueOpt props "labelClassName" (labelClassName |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValueOpt props "persistence" (persistence |> Option.map box)
DynObj.setValueOpt props "persistedProps" (persistedProps |> Option.map box)
DynObj.setValueOpt props "persistenceType" (persistenceType |> Option.map PersistenceTypeOptions.convert)
Expand Down
8 changes: 6 additions & 2 deletions src/Dash.NET/DashComponents/CoreComponents/Slider.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ module Slider =
box
{| always_visible = this.AlwaysVisible
placement = this.Placement |}
static member convert2 this =
box
{| always_visible = this.AlwaysVisible
placement = this.Placement |> TooltipPlacement.convert |}

///<summary>
///record with the fields: 'label: string (optional)', 'style: record (optional)'
Expand Down Expand Up @@ -195,7 +199,7 @@ module Slider =
| Vertical (p) -> "vertical", box p
| VerticalHeight (p) -> "verticalHeight", box p
| UpdateMode (p) -> "updatemode", UpdateModeType.convert p
| LoadingState (p) -> "loading_state", box p
| LoadingState (p) -> "loading_state", LoadingState.convert p
| Persistence (p) -> "persistence", box p
| PersistedProps (p) -> "persisted_props", box p
| PersistenceType (p) -> "persistence_type", PersistenceTypeOptions.convert p
Expand Down Expand Up @@ -380,7 +384,7 @@ module Slider =
DynObj.setValueOpt props "vertical" (vertical |> Option.map box)
DynObj.setValueOpt props "verticalHeight" (verticalHeight |> Option.map box)
DynObj.setValueOpt props "updatemode" (updatemode |> Option.map UpdateModeType.convert)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValueOpt props "persistence" (persistence |> Option.map box)
DynObj.setValueOpt props "persistedProps" (persistedProps |> Option.map box)
DynObj.setValueOpt props "persistenceType" (persistenceType |> Option.map PersistenceTypeOptions.convert)
Expand Down
4 changes: 2 additions & 2 deletions src/Dash.NET/DashComponents/CoreComponents/Tab.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ module Tab =
| DisabledClassName p -> "disabled_className", box p
| SelectedClassName p -> "selected_className", box p
| SelectedStyle p -> "selected_style", box p
| LoadingState p -> "loading_state", box p
| LoadingState p -> "loading_state", LoadingState.convert p

///<summary>
///A list of children or a property for this dash component
Expand Down Expand Up @@ -169,7 +169,7 @@ module Tab =
DynObj.setValueOpt props "selectedClassName" (selectedClassName |> Option.map box)
DynObj.setValueOpt props "style" (style |> Option.map box)
DynObj.setValueOpt props "selectedStyle" (selectedStyle |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map box)
DynObj.setValueOpt props "loadingState" (loadingState |> Option.map LoadingState.convert)
DynObj.setValue t "namespace" "dash_core_components"
DynObj.setValue t "props" props
DynObj.setValue t "type" "Tab"
Expand Down
Loading