Finalize dag ✨

nfdi4plants · Oct 22, 2021 · 6c62234 · 6c62234
1 parent 48c5c36
commit 6c62234
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 4 deletions.
diff --git a/src/Client/Dag/Dag.fs b/src/Client/Dag/Dag.fs
@@ -44,7 +44,6 @@ let update (msg:Msg) (currentModel: Messages.Model) : Messages.Model * Cmd<Messa
                 worksheetBuildingBlocksTuple
                 (ParseTablesDagServerResponse >> DagMsg)
                 (curry GenericError (Dag.UpdateLoading false |> DagMsg |> Cmd.ofMsg) >> DevMsg)
-
         currentModel, cmd
     //
     | ParseTablesDagServerResponse dagHtml ->
@@ -60,10 +59,17 @@ open Messages
 let defaultMessageEle (model:Model) dispatch =
     mainFunctionContainer [
         Button.a [
-            Button.OnClick(fun e -> ())
+            Button.IsFullWidth
+            Button.Color Color.IsInfo
+            Button.OnClick(fun e -> ParseTablesOfficeInteropRequest |> DagMsg |> dispatch)
         ][
-            str "Click me!"
+            str "Display dag"
         ]
+
+        if model.DagModel.DagHtml.IsSome then
+            Field.div [][
+                iframe [SrcDoc model.DagModel.DagHtml.Value; Style [Width "800px"; Height "400px"] ][]
+            ]
     ]
 
 let mainElement (model:Messages.Model) dispatch =

diff --git a/src/Server/CyjsAdaption.fs b/src/Server/CyjsAdaption.fs
@@ -0,0 +1,112 @@
+module CyjsAdaption
+
+/// The HTML module from the real repo: https://github.com/fslaborg/Cyjs.NET/blob/main/src/Cyjs.NET/Html.fs
+/// does not work in asp.net core because of loop exceptions. Therefore we need to add "JsonSerializerSettings" which determine these loops to be serialized.
+/// the problem part in the repo is the following: https://github.com/fslaborg/Cyjs.NET/blob/main/src/Cyjs.NET/Html.fs#L85
+module MyHTML =
+
+    open System
+    open System.IO
+    open Cyjs.NET
+    open Cyjs.NET.CytoscapeModel
+    open Newtonsoft.Json
+
+    let doc =
+        let newScript = System.Text.StringBuilder()
+        newScript.AppendLine("""<!DOCTYPE html>""") |> ignore
+        newScript.AppendLine("<html>") |> ignore
+        newScript.AppendLine("<head>") |> ignore
+        newScript.AppendLine("""<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.0/cytoscape.min.js"></script>""") |> ignore
+        newScript.AppendLine("</head>") |> ignore
+        newScript.AppendLine("<body> [GRAPH] </body>") |> ignore
+        newScript.AppendLine("""</html>""") |> ignore
+        newScript.ToString() 
+
+    let graphDoc =
+        let newScript = System.Text.StringBuilder()
+        newScript.AppendLine("""<style>#[ID] [CANVAS] </style>""") |> ignore
+        //newScript.AppendLine("""<style>#[ID] { width: [WIDTH]px; height: [HEIGHT]px; display: block }</style>""") |> ignore
+        //newScript.AppendLine("""<style>#[ID] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }</style>""") |> ignore
+        newScript.AppendLine("""<div id="[ID]"></div>""") |> ignore
+        newScript.AppendLine("<script type=\"text/javascript\">") |> ignore
+        newScript.AppendLine(@"
+            var renderCyjs_[SCRIPTID] = function() {
+            var fsharpCyjsRequire = requirejs.config({context:'fsharp-cyjs',paths:{cyjs:'https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.0/cytoscape.min'}}) || require;
+            fsharpCyjsRequire(['cyjs'], function(Cyjs) {")  |> ignore
+        newScript.AppendLine(@"
+            var graphdata = [GRAPHDATA]
+            var cy = cytoscape( graphdata );
+            cy.userZoomingEnabled( [ZOOMING] );
+            ")  |> ignore
+        newScript.AppendLine("""});
+            };
+            if ((typeof(requirejs) !==  typeof(Function)) || (typeof(requirejs.config) !== typeof(Function))) {
+                var script = document.createElement("script");
+                script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js");
+                script.onload = function(){
+                    renderCyjs_[SCRIPTID]();
+                };
+                document.getElementsByTagName("head")[0].appendChild(script);
+            }
+            else {
+                renderCyjs_[SCRIPTID]();
+            }""") |> ignore
+        newScript.AppendLine("</script>") |> ignore
+        newScript.ToString() 
+
+    /// Converts a CyGraph to it HTML representation. The div layer has a default size of 600 if not specified otherwise.
+    let toCytoHTML (cy:Cytoscape) =
+        let guid = Guid.NewGuid().ToString()
+        let id   = sprintf "e%s" <| Guid.NewGuid().ToString().Replace("-","").Substring(0,10)
+        cy.container <- PlainJsonString id
+
+        let userZoomingEnabled =
+            match cy.TryGetTypedValue<Zoom> "zoom"  with
+            | Some z -> 
+                match z.TryGetTypedValue<bool> "zoomingEnabled" with
+                | Some t -> t
+                | None -> false
+            | None -> false
+            |> string 
+            |> fun s -> s.ToLower()
+
+        let strCANVAS = // DynamicObj.DynObj.tryGetValue cy "Dims" //tryGetLayoutSize gChart
+            match cy.TryGetTypedValue<Canvas> "Canvas"  with
+            |Some c -> c
+            |None -> Canvas.InitDefault()
+            //|> fun c -> c?display <-  "block" ; c
+            |> fun c -> 
+                c.GetProperties(true)
+                |> Seq.map (fun k -> sprintf "%s: %O" k.Key k.Value)
+                |> String.concat "; "
+                |> sprintf "{ %s }" 
+
+        DynamicObj.DynObj.remove cy "Canvas"
+
+        /// Create asp.net core able settings
+        let settings =
+            let converter = PlainJsonStringConverter() :> JsonConverter
+            let l = System.Collections.Immutable.ImmutableList.Create<JsonConverter>(converter)
+            let n = new JsonSerializerSettings()
+            n.ReferenceLoopHandling <- ReferenceLoopHandling.Serialize
+            n.Converters <- l
+            n
+
+        let jsonGraph = JsonConvert.SerializeObject (cy,settings)
+
+        let html =
+            graphDoc
+                .Replace("[CANVAS]", strCANVAS)
+                .Replace("[ID]", id)
+                .Replace("[ZOOMING]", userZoomingEnabled)
+                .Replace("[SCRIPTID]", guid.Replace("-",""))
+                .Replace("[GRAPHDATA]", jsonGraph)                
+        html
+
+    /// Converts a CyGraph to it HTML representation and embeds it into a html page.
+    let toEmbeddedHTML (cy:Cytoscape) =
+        let graph =
+            toCytoHTML cy
+        doc
+            .Replace("[GRAPH]", graph)
+            //.Replace("[DESCRIPTION]", "")
diff --git a/src/Server/Server.fs b/src/Server/Server.fs
@@ -24,7 +24,8 @@ let dagApiv1 = {
     parseAnnotationTablesToDagHtml = fun worksheetBuildingBlocks -> async {
         let factors, protocol, assay =  JsonExport.parseBuildingBlockSeqsToAssay worksheetBuildingBlocks
         let processSequence = Option.defaultValue [] assay.ProcessSequence
-        return ""
+        let dag = Viz.DAG.fromProcessSequence (processSequence,Viz.Schema.NFDIBlue) |> CyjsAdaption.MyHTML.toEmbeddedHTML
+        return dag
     }
 }
 

diff --git a/src/Server/Server.fsproj b/src/Server/Server.fsproj
@@ -8,6 +8,7 @@
     <ItemGroup>
         <None Include="paket.references" />
         <Compile Include="Version.fs" />
+        <Compile Include="CyjsAdaption.fs" />
         <Compile Include="TemplateMetadata.fs" />
         <Compile Include="ISADotNet.fs" />
         <Compile Include="JsonExport.fs" />