Create term modal #296

src/Client/Client.fsproj

@@ -42,6 +42,7 @@
         <Compile Include="Modals\WarningModal.fs" />
         <Compile Include="Modals\InteropLoggingModal.fs" />
         <Compile Include="Modals\ErrorModal.fs" />
+        <Compile Include="Modals\TermModal.fs" />
         <Compile Include="Modals\BuildingBlockDetailsModal.fs" />
         <Compile Include="Modals\CytoscapeView.fs" />
         <Compile Include="Spreadsheet\LocalStorage.fs" />

src/Client/Modals/TermModal.fs

@@ -0,0 +1,92 @@
+module Modals.TermModal
+
+open Shared.TermTypes
+open Feliz
+open Feliz.Bulma
+
+let l = 200
+
+let private isTooLong (str:string) = str.Length > l
+
+type private UI = {
+    DescriptionTooLong: bool
+    IsExpanded: bool
+    DescriptionShort: string
+    DescriptionLong: string
+} with
+    static member init(description: string) =
+        let isTooLong = isTooLong description
+        let descriptionShort =
+            if isTooLong then description.Substring(0,l).Trim() + ".. " else description
+        {
+            IsExpanded = false
+            DescriptionTooLong = isTooLong
+            DescriptionShort = descriptionShort
+            DescriptionLong = description
+        }
+
+
+[<ReactComponent>]
+let Main (term: Term, dispatch) (rmv: _ -> unit) =
+
+    let state, setState = React.useState(UI.init(term.Description))
+
+    Bulma.modal [
+        Bulma.modal.isActive
+        prop.children [
+            Bulma.modalBackground [
+                prop.onClick rmv
+                prop.style [style.backgroundColor.transparent]
+            ]
+            Bulma.modalCard [
+                prop.style [style.maxWidth 300; style.border (1,borderStyle.solid,NFDIColors.black); style.borderRadius 0]
+                prop.children [
+                    Bulma.modalCardHead [
+                        prop.className "p-2"
+                        prop.children [
+                            Bulma.modalCardTitle [
+                                Bulma.size.isSize6
+                                prop.text $"{term.Name} ({term.Accession})" 
+                            ]
+                            Bulma.delete [
+                                Bulma.delete.isSmall
+                                prop.onClick rmv
+                            ]
+                        ]
+                    ]
+                    Bulma.modalCardBody [
+                        prop.className "p-2 has-text-justified"
+                        prop.children [
+                            Bulma.content [
+                                Html.p [
+                                    Html.span ( if state.IsExpanded then state.DescriptionLong else state.DescriptionShort)
+                                    if state.DescriptionTooLong && not state.IsExpanded then
+                                        Html.a [
+                                            prop.onClick(fun _ -> setState {state with IsExpanded = true})
+                                            prop.text "(more)"
+                                        ]
+                                ]
+                                //if term.IsObsolete then
+                                Html.div [
+                                    prop.style [style.display.flex; style.justifyContent.spaceBetween]
+                                    prop.children [
+                                        Html.span [
+                                            Html.a [
+                                                prop.href (Shared.URLs.OntobeeOntologyPrefix + term.FK_Ontology)
+                                                prop.text "Source"
+                                            ]
+                                        ]
+                                        if term.IsObsolete then
+                                            Html.span [
+                                                Bulma.color.hasTextDanger
+                                                prop.text "obsolete"
+                                            ]
+                                    ]
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+    ]

src/Client/Views/SplitWindowView.fs

@@ -92,6 +92,14 @@ let private dragbar (model:SplitWindow) (setModel: SplitWindow -> unit) (dispatc
         prop.onMouseDown <| mouseDown_event (mouseMove_event model setModel)
     ]
 
+let exampleTerm =
+    Shared.TermTypes.createTerm
+        "MS:1023810"
+        "instrument model"
+        "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+        false
+        "MS"
+
 // https://jsfiddle.net/gaby/Bek9L/
 // https://stackoverflow.com/questions/6219031/how-can-i-resize-a-div-by-dragging-just-one-side-of-it
 /// Splits screen into two parts. Left and right, with a dragbar in between to change size of right side.

src/Shared/URLs.fs

@@ -55,4 +55,9 @@ module URLs =
     [<LiteralAttribute>]
     let CSBWebsiteUrl = @"https://csb.bio.uni-kl.de/"
 
-    let NfdiWebsite = @"https://nfdi4plants.org"
+    [<LiteralAttribute>]
+    let NfdiWebsite = @"https://nfdi4plants.org"
+
+    [<LiteralAttribute>]
+    let OntobeeOntologyPrefix = @"https://ontobee.org/ontology/"
+