Add modal result + download ✨

Author: Freymaurer

package-lock.json

@@ -10,9 +10,11 @@
         "test:live": "webpack-dev-server --mode development --env test"
     },
     "dependencies": {
+        "bulma": "^0.9.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "bulma": "^0.9.3"
+        "sweetalert2": "^10.16.11",
+        "sweetalert2-react-content": "^3.3.3"
     },
     "devDependencies": {
         "copy-webpack-plugin": "^10.0.0",

package.json

@@ -2,6 +2,7 @@ source https://api.nuget.org/v3/index.json
 framework: net6.0
 storage: none
 
+nuget Feliz.SweetAlert
 nuget Feliz.UseElmish 1.6.0
 nuget Fsharp.Core ~> 6
 nuget Fable.Remoting.Giraffe

paket.dependencies

@@ -61,6 +61,9 @@ NUGET
     Fable.Parsimmon (4.1)
       Fable.Core (>= 3.0)
       FSharp.Core (>= 4.6.2)
+    Fable.Promise (2.2.2)
+      Fable.Core (>= 3.1.5)
+      FSharp.Core (>= 4.7.2)
     Fable.React (7.4.3)
       Fable.Browser.Dom (>= 2.4.4)
       Fable.Core (>= 3.2.7)
@@ -141,6 +144,12 @@ NUGET
     Feliz.CompilerPlugins (1.8)
       Fable.AST (>= 3.0)
       FSharp.Core (>= 4.7.2)
+    Feliz.SweetAlert (2.8)
+      Fable.Core (>= 3.1.5 < 4.0)
+      Fable.Elmish.React (>= 3.0.1 < 4.0)
+      Fable.Promise (>= 2.1 < 3.0)
+      Feliz (>= 1.5 < 2.0)
+      FSharp.Core (>= 4.7.2)
     Feliz.UseElmish (1.6)
       Fable.Elmish (>= 3.0.6)
       Feliz (>= 1.55)

paket.lock

@@ -11,6 +11,7 @@
         <Compile Include="Api.fs" />
         <Compile Include="State.fs" />
         <Compile Include="ModalLogic.fs" />
+        <Compile Include="View\Components\SweetAlertModals.fs" />
         <Compile Include="View\Components\ResultModal.fs" />
         <Compile Include="View\Components\Footer.fs" />
         <Compile Include="View\Components\Navbar.fs" />

src/Client/Client.fsproj

@@ -17,7 +17,7 @@ let view (model: Model) (dispatch: Msg -> unit) =
             Client.Components.Navbar.Navbar model dispatch
             Client.View.MainView.hero model dispatch
             ModalLogic.modalContainer
-            Client.View.InputView.View model.HasJobRunning dispatch
+            Client.View.InputView.View model.Version model.HasJobRunning dispatch
             Client.Components.Footer.footer model.Version
         ]
     ]

src/Client/Index.fs

@@ -17,11 +17,13 @@ type Versions = {
 
 type Model = {
     Version         : Versions
+    Result          : DeepStabP.Types.PredictorResponse []
     HasJobRunning   : bool
 } with
     static member init = {
-        HasJobRunning   = false
         Version         = Versions.init
+        Result          = Array.empty
+        HasJobRunning   = false
     }
 
 type Msg =

src/Client/State.fs

@@ -14,6 +14,8 @@ let init () : Model * Cmd<Msg> =
 
     model, cmd
 
+open Feliz.SweetAlert
+
 let update (msg: Msg) (model: Model) : Model * Cmd<Msg> =
     match msg with
     | GetVersionUIRequest ->
@@ -48,10 +50,9 @@ let update (msg: Msg) (model: Model) : Model * Cmd<Msg> =
                 (Error >> PredictionResponse)
         nextModel, cmd
     | PredictionResponse (Ok response) ->
-        let nextModel = { model with HasJobRunning = false }
-        ModalLogic.renderModal(Client.Components.ResultModal.Results())
-        nextModel, Cmd.none
+        let nextModel = { model with HasJobRunning = false; Result = response }
+        let modal = Client.Components.SweetAlertModals.resultModal_success(nextModel)
+        nextModel, modal
     | PredictionResponse (Error e) ->
         let nextModel = { model with HasJobRunning = false }
-        Browser.Dom.window.alert (e)
-        nextModel, Cmd.none
+        nextModel, Cmd.Swal.Simple.error(e.Message, e.InnerException.ToString())

src/Client/Update.fs

@@ -0,0 +1,90 @@
+module Client.Components.SweetAlertModals
+
+open Elmish
+open Feliz
+open Feliz.Bulma
+open Feliz.SweetAlert
+
+module private ResultModal_success =
+
+    open Fable.Core.JsInterop
+
+    let resultsToCsv (results: DeepStabP.Types.PredictorResponse []) =
+        results
+        |> Array.map (fun x ->
+            $"{x.Protein},{x.MeltingTemp}{System.Environment.NewLine}"
+        )
+        |> String.concat ""
+
+    let downloadResults (filename: string) (filedata: string) =
+        let element = Browser.Dom.document.createElement("a");
+        element.setAttribute("href", "data:text/plain;charset=utf-8," +  Fable.Core.JS.encodeURIComponent(filedata));
+        element.setAttribute("download", filename);
+
+        element?style?display <- "None";
+        let _ = Browser.Dom.document.body.appendChild(element);
+
+        element.click();
+
+        Browser.Dom.document.body.removeChild(element) |> ignore
+        ()
+
+    let body (model:State.Model) =
+        Html.div [
+            prop.style [
+                style.maxHeight (length.vh 40);
+                style.overflow.auto
+            ]
+            prop.children [
+                Bulma.table [
+                    Bulma.table.isFullWidth
+                    Bulma.table.isBordered
+                    prop.children [
+                        Html.thead [Html.tr [
+                            Html.th "index"
+                            Html.th "Protein"
+                            Html.th "mt"
+                        ]]
+                        Html.tbody [
+                            for i in 0 .. model.Result.Length-1 do
+                                yield
+                                    Html.tr [
+                                        let r = model.Result.[i]
+                                        Html.td i
+                                        Html.td r.Protein
+                                        Html.td r.MeltingTemp
+                                    ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+open ResultModal_success
+
+
+/// if more customization is needed one can fallback to ModalLogic
+let resultModal_success (model:State.Model)=
+    Cmd.Swal.fire([
+        swal.icon.success
+        swal.title "Success"
+        swal.html (body model)
+        swal.showCloseButton true
+        swal.showCancelButton true
+        swal.cancelButtonText "Close"
+        swal.cancelButtonColor "#E31B4C"
+        swal.showConfirmButton true
+        swal.confirmButtonText "Download as .csv"
+        swal.reverseButtons true
+        swal.width (length.perc 70)
+        swal.preConfirm (fun _ ->
+            let fileName =
+                [
+                    System.DateTime.UtcNow.ToString("yyyyMMdd_hhmmss")
+                    "DeepStabP"
+                ] |> String.concat "_"
+            model.Result
+            |> resultsToCsv
+            |> downloadResults fileName
+        )
+    ])

src/Client/View/Components/SweetAlertModals.fs

@@ -124,27 +124,33 @@ module private Update =
 
 open State
 
-let private validateInputState (state:InputState) =
-    match state.SeqMode with
-    | Some Single ->
-        match state.SingleSequence with
-        | "" -> false, "No data provided"
-        | _ ->
-            match state.HasValidFasta with
-            | false -> false, "Fasta is invalid"
-            | _ -> true, "Start computation"
-    | Some Fasta -> 
-        match state.FastaFileData with
-        | "" -> false, "No data provided"
-        | x when x.Split([|'>'|],System.StringSplitOptions.RemoveEmptyEntries).Length > 1000 ->
-            false, "Too many sequences (>1000)."
-        | _ ->
-            match state.HasValidFasta with
-            | false -> false, "Fasta is invalid"
-            | _ -> true, "Start computation"
-    | None ->
-        false, "No data provided"
-
+let private validateInputState (versions: State.Versions) (state:InputState) =
+    let validateInput() =
+        match state.SeqMode with
+        | Some Single ->
+            match state.SingleSequence with
+            | "" -> false, "No data provided"
+            | _ ->
+                match state.HasValidFasta with
+                | false -> false, "Fasta is invalid"
+                | _ -> true, "Start computation"
+        | Some Fasta -> 
+            match state.FastaFileData with
+            | "" -> false, "No data provided"
+            | x when x.Split([|'>'|],System.StringSplitOptions.RemoveEmptyEntries).Length > 1000 ->
+                false, "Too many sequences (>1000)."
+            | _ ->
+                match state.HasValidFasta with
+                | false -> false, "Fasta is invalid"
+                | _ -> true, "Start computation"
+        | None ->
+            false, "No data provided"
+    match versions with
+    | noServerConnection when versions.UI = "" ->
+        false, "No connection to server"
+    | noApiConnection when versions.Api = "" ->
+        false, "No connection to predictor service"
+    | _ -> validateInput()
 module private UploadHandler =
     open Fable.Core.JsInterop
 
@@ -327,10 +333,10 @@ let private startPredictionRight (hasJobRunning:bool) (isValidState:bool) (butto
 open Update
 
 [<ReactComponent>]
-let View (hasJobRunning: bool) (dispatch : Msg -> unit) =
+let View (versions: State.Versions) (hasJobRunning: bool) (dispatch : Msg -> unit) =
     let state, setState = React.useElmish(init, update, [||])
 
-    let isValidState, buttonMsg = validateInputState state
+    let isValidState, buttonMsg = validateInputState versions state
 
     div [Style [FlexGrow 1; Display DisplayOptions.Flex; FlexDirection "column"]] [
         Columns.columns [Columns.CustomClass "ProcessDecision"; Columns.Props [Style [FlexGrow 1]]] [

src/Client/View/InputView.fs

@@ -9,4 +9,5 @@ Feliz
 Feliz.Bulma
 Fsharp.Core
 Fulma
-Feliz.UseElmish
+Feliz.UseElmish
+Feliz.SweetAlert