improve behavior for switching between column types.

nfdi4plants · Dec 12, 2023 · 0b3543e · 0b3543e
1 parent 1b551c5
commit 0b3543e
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 40 deletions.
diff --git a/src/Client/Pages/BuildingBlock/Dropdown.fs b/src/Client/Pages/BuildingBlock/Dropdown.fs
@@ -90,19 +90,29 @@ module private DropdownElements =
             ]
         ]
 
-    let createBuildingBlockDropdownItem dispatch uiState setUiState (header: CompositeHeader) =
-        Bulma.dropdownItem.a [
+    let createBuildingBlockDropdownItem (model: Model) dispatch uiState setUiState (header: CompositeHeader) =
+        let isDeepFreeText = 
             match header with
             | CompositeHeader.FreeText _ 
             | CompositeHeader.Input (IOType.FreeText _) 
             | CompositeHeader.Output (IOType.FreeText _) -> 
-                ()
+                true
             | _ ->
+                false
+        Bulma.dropdownItem.a [
+            if not isDeepFreeText then //disable clicking on freetext elements
+                let nextHeader = 
+                    if header.IsTermColumn && not header.IsFeaturedColumn then
+                        header.UpdateDeepWith model.AddBuildingBlockState.Header
+                    else 
+                        header
                 prop.onClick (fun e ->
                     e.stopPropagation()
-                    selectHeader uiState setUiState header |> dispatch
+                    selectHeader uiState setUiState nextHeader |> dispatch
+                )
+                prop.onKeyDown(fun k ->
+                    if (int k.which) = 13 then selectHeader uiState setUiState nextHeader |> dispatch
                 )
-                prop.onKeyDown(fun k -> if (int k.which) = 13 then selectHeader uiState setUiState header |> dispatch)
             prop.children [
                 //Html.span [
                 //    prop.style itemTooltipStyle
@@ -134,10 +144,10 @@ module private DropdownElements =
         [
             DropdownPage.IOTypes (CompositeHeader.Input, CompositeHeader.InputEmpty.AsButtonName) |> createSubBuildingBlockDropdownLink state setState
             Bulma.dropdownDivider []
-            CompositeHeader.ParameterEmpty      |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.FactorEmpty         |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.CharacteristicEmpty |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.ComponentEmpty      |> createBuildingBlockDropdownItem dispatch state setState
+            CompositeHeader.ParameterEmpty      |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.FactorEmpty         |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.CharacteristicEmpty |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.ComponentEmpty      |> createBuildingBlockDropdownItem model dispatch state setState
             Model.BuildingBlock.DropdownPage.More  |> createSubBuildingBlockDropdownLink state setState
             Bulma.dropdownDivider []
             DropdownPage.IOTypes (CompositeHeader.Output, CompositeHeader.OutputEmpty.AsButtonName) |> createSubBuildingBlockDropdownLink state setState
@@ -162,13 +172,13 @@ module private DropdownElements =
             //    ]
             //]
             //Bulma.dropdownDivider []
-            CompositeHeader.Date                |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.Performer           |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.ProtocolDescription |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.ProtocolREF         |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.ProtocolType        |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.ProtocolUri         |> createBuildingBlockDropdownItem dispatch state setState
-            CompositeHeader.ProtocolVersion     |> createBuildingBlockDropdownItem dispatch state setState
+            CompositeHeader.Date                |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.Performer           |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.ProtocolDescription |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.ProtocolREF         |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.ProtocolType        |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.ProtocolUri         |> createBuildingBlockDropdownItem model dispatch state setState
+            CompositeHeader.ProtocolVersion     |> createBuildingBlockDropdownItem model dispatch state setState
             // Navigation element back to main page
             backToMainDropdownButton state setState
         ]
@@ -188,13 +198,13 @@ module private DropdownElements =
             //    ]
             //]
             //Bulma.dropdownDivider []
-            createHeaderFunc IOType.Source            |> createBuildingBlockDropdownItem dispatch state setState
-            createHeaderFunc IOType.Sample            |> createBuildingBlockDropdownItem dispatch state setState
-            createHeaderFunc IOType.Material          |> createBuildingBlockDropdownItem dispatch state setState
-            createHeaderFunc IOType.RawDataFile       |> createBuildingBlockDropdownItem dispatch state setState
-            createHeaderFunc IOType.DerivedDataFile   |> createBuildingBlockDropdownItem dispatch state setState
-            createHeaderFunc IOType.ImageFile         |> createBuildingBlockDropdownItem dispatch state setState
-            createHeaderFunc (IOType.FreeText "")     |> createBuildingBlockDropdownItem dispatch state setState
+            createHeaderFunc IOType.Source            |> createBuildingBlockDropdownItem model dispatch state setState
+            createHeaderFunc IOType.Sample            |> createBuildingBlockDropdownItem model dispatch state setState
+            createHeaderFunc IOType.Material          |> createBuildingBlockDropdownItem model dispatch state setState
+            createHeaderFunc IOType.RawDataFile       |> createBuildingBlockDropdownItem model dispatch state setState
+            createHeaderFunc IOType.DerivedDataFile   |> createBuildingBlockDropdownItem model dispatch state setState
+            createHeaderFunc IOType.ImageFile         |> createBuildingBlockDropdownItem model dispatch state setState
+            createHeaderFunc (IOType.FreeText "")     |> createBuildingBlockDropdownItem model dispatch state setState
             // Navigation element back to main page
             backToMainDropdownButton state setState
         ]

diff --git a/src/Client/Pages/BuildingBlock/Helper.fs b/src/Client/Pages/BuildingBlock/Helper.fs
@@ -13,14 +13,23 @@ let createCellFromUiStateAndOA (uiState: BuildingBlockUIState) (oa:OntologyAnnot
     | BodyCellType.Term -> CompositeCell.createTerm oa
     | BodyCellType.Unitized -> CompositeCell.createUnitized("", oa)
 
-let selectHeader (uiState: BuildingBlockUIState) (setUiState: BuildingBlockUIState -> unit) (header: CompositeHeader) = 
-    let bodyType =
-        match header.IsTermColumn, uiState.BodyCellType with
-        | true, BodyCellType.Term | true, BodyCellType.Unitized -> { uiState with DropdownPage = DropdownPage.Main; DropdownIsActive = false }
-        | true, BodyCellType.Text -> { BodyCellType = BodyCellType.Term; DropdownPage = DropdownPage.Main; DropdownIsActive = false }
-        | false, _ -> { BodyCellType = BodyCellType.Text; DropdownPage = DropdownPage.Main; DropdownIsActive = false }
-    setUiState bodyType
-    BuildingBlock.Msg.SelectHeader header |> BuildingBlockMsg
+let selectHeader (uiState: BuildingBlockUIState) (setUiState: BuildingBlockUIState -> unit) (nextHeader: CompositeHeader) = 
+    let nextState, updateBodyCellMsg =
+        match nextHeader.IsTermColumn, uiState.BodyCellType with
+        | true, BodyCellType.Term | true, BodyCellType.Unitized -> 
+            { uiState with DropdownPage = DropdownPage.Main; DropdownIsActive = false },
+            Msg.DoNothing
+        | true, BodyCellType.Text -> 
+            { BodyCellType = BodyCellType.Term; DropdownPage = DropdownPage.Main; DropdownIsActive = false },
+            BuildingBlock.Msg.SelectBodyCell (CompositeCell.emptyTerm) |> BuildingBlockMsg
+        | false, _ -> 
+            { BodyCellType = BodyCellType.Text; DropdownPage = DropdownPage.Main; DropdownIsActive = false },
+            BuildingBlock.Msg.SelectBodyCell (CompositeCell.emptyFreeText) |> BuildingBlockMsg
+    setUiState nextState
+    Msg.Batch [
+        BuildingBlock.Msg.SelectHeader nextHeader |> BuildingBlockMsg
+        updateBodyCellMsg
+    ]
 
 let selectBody (body: CompositeCell) =
     BuildingBlock.Msg.SelectBodyCell body |> BuildingBlockMsg

diff --git a/src/Client/Pages/BuildingBlock/SearchComponent.fs b/src/Client/Pages/BuildingBlock/SearchComponent.fs
@@ -359,8 +359,6 @@ module private BodyTerm =
     let private body_searchElement inputId state setState (model: Model) dispatch =
         let state_isDirectedSearchMode, setState_isDirectedSearchMode = React.useState(true)
         let onChangeMsg = fun (isClicked: bool) (v:string) -> 
-            //BuildingBlock.Msg.SelectBodyCell None |> BuildingBlockMsg |> dispatch
-            //BuildingBlock.UpdateBodySearchText v |> BuildingBlockMsg |> dispatch
             let updateSearchState msg =
                 setState {SearchIsActive = true; SearchIsLoading = true}
                 let bounce_msg = Bounce (System.TimeSpan.FromSeconds 0.5,nameof(msg), msg)
@@ -442,14 +440,8 @@ let private add_button (ui: BuildingBlockUIState) (model: Model) dispatch =
                 prop.disabled true
             Bulma.button.isFullWidth
             prop.onClick (fun _ ->
-                let updateBodyCell =
-                    match ui.BodyCellType with
-                    | BodyCellType.Text -> body.ToFreeTextCell()
-                    | BodyCellType.Term -> body.ToTermCell()
-                    | BodyCellType.Unitized -> body.ToUnitizedCell()
-                let column = CompositeColumn.create(header, [|updateBodyCell|])
+                let column = CompositeColumn.create(header, [|body|])
                 SpreadsheetInterface.AddAnnotationBlock column |> InterfaceMsg |> dispatch
-                BuildingBlock.Msg.SelectBodyCell (updateBodyCell.GetEmptyCell()) |> BuildingBlockMsg |> dispatch
             )
             prop.text "Add Column"
         ]

diff --git a/src/Shared/ARCtrl.Helper.fs b/src/Shared/ARCtrl.Helper.fs
@@ -48,6 +48,25 @@ module Extensions =
         static member InputEmpty = CompositeHeader.Input <| IOType.FreeText ""
         static member OutputEmpty = CompositeHeader.Output <| IOType.FreeText ""
 
+        /// <summary>
+        /// Keep the outer `CompositeHeader` information (e.g.: Parameter, Factor, Input, Output..) and update the inner "of" value with the value from `other.`
+        /// This will only run successfully if the inner values are of the same type
+        /// </summary>
+        /// <param name="other">The header from which the inner value will be taken.</param>
+        member this.UpdateDeepWith(other:CompositeHeader) = 
+            match this, other with
+            | h1, h2 when this.IsIOType && other.IsIOType ->
+                let io1 = h2.TryIOType().Value
+                match h1 with 
+                | CompositeHeader.Input _ -> CompositeHeader.Input io1 
+                | CompositeHeader.Output _ -> CompositeHeader.Output io1
+                | _ -> failwith "Error 1 in UpdateSurfaceTo. This should never hit."
+            | h1, h2 when this.IsTermColumn && other.IsTermColumn && not this.IsFeaturedColumn && not other.IsFeaturedColumn ->
+                let oa1 = h2.ToTerm()
+                h1.UpdateWithOA oa1
+            | _ -> 
+                this
+
     type CompositeCell with
         member this.UpdateWithOA(oa:OntologyAnnotation) =
             match this with