Skip to content

Commit

Permalink
fix some cell search issues 🐛
Browse files Browse the repository at this point in the history
  • Loading branch information
@Freymaurer
Freymaurer committed Feb 15, 2024
1 parent 0cf3093 commit 36e57f3
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 45 deletions.
58 changes: 21 additions & 37 deletions src/Client/MainComponents/Cells.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ open Components
type private CellMode =
| Active
| Idle
| Search

type private CellState = {
CellMode: CellMode
Expand All @@ -32,7 +31,6 @@ type private CellState = {
}

member this.IsActive = this.CellMode = Active
member this.IsSearch = this.CellMode = Search
member this.IsIdle = this.CellMode = Idle

type private ColumnType =
Expand Down Expand Up @@ -111,7 +109,7 @@ module private CellComponents =
prop.style [style.borderWidth 0; style.borderRadius 0]
prop.onClick(fun e ->
e.stopPropagation()
setState_cell {state_cell with CellMode = Search}
//setState_cell {state_cell with CellMode = Search}
)
prop.children [
Bulma.icon [Html.i [prop.className "fa-solid fa-search"]]
Expand Down Expand Up @@ -319,30 +317,7 @@ type Cell =
]]

[<ReactComponent>]
static member private SearchCellSubcomponent(setter, headerOA: OntologyAnnotation option, cell: CompositeCell, makeIdle, cellState: CellState) =
let oa = cell.ToOA()
let onBlur = fun e -> makeIdle()
let onEscape = fun e -> makeIdle()
let onEnter = fun e -> makeIdle()
let nosearch, setNoSearch= React.useState(true)
Bulma.field.div [
prop.style [style.flexGrow 1]
Bulma.field.hasAddons
prop.children [
Bulma.control.p [
Bulma.button.a [
prop.style [style.borderWidth 0]
if nosearch then Bulma.color.hasTextGreyLight
Bulma.button.isInverted
prop.onClick(fun _ -> setNoSearch (not nosearch))
prop.children [Bulma.icon [Html.i [prop.className "fa-solid fa-magnifying-glass"]]]
]
]
]
]

[<ReactComponent>]
static member private BodyBase(columnType: ColumnType, cellValue: string, setter: string -> unit, index: (int*int), cell: CompositeCell, model: Model, dispatch, ?oasetter: OntologyAnnotation option -> unit) =
static member private BodyBase(columnType: ColumnType, cellValue: string, setter: string -> unit, index: (int*int), cell: CompositeCell, model: Model, dispatch, ?oasetter: OntologyAnnotation -> unit) =
let columnIndex, rowIndex = index
let state = model.SpreadsheetModel
let state_cell, setState_cell = React.useState(CellState.init(cellValue))
Expand All @@ -360,26 +335,32 @@ type Cell =
cellInnerContainerStyle []
prop.onDoubleClick(fun e ->
e.preventDefault()
e.stopPropagation()
let mode = if (e.ctrlKey || e.metaKey) && columnType = Main then Search else Active
if state_cell.IsIdle then setState_cell {state_cell with CellMode = mode}
e.stopPropagation()
if state_cell.IsIdle then setState_cell {state_cell with CellMode = Active}
UpdateSelectedCells Set.empty |> SpreadsheetMsg |> dispatch
)
if state_cell.IsIdle then prop.onClick <| EventPresets.onClickSelect(index, state_cell, state.SelectedCells, model, dispatch)
prop.onMouseDown(fun e -> if state_cell.IsIdle && e.shiftKey then e.preventDefault())
prop.children [
match state_cell.CellMode with
| Active | Search ->
| Active ->
// Update change to mainState and exit active input.
if oasetter.IsSome then
let oa = cell.ToOA()
let onBlur = fun e -> makeIdle()
let onEscape = fun e -> makeIdle()
let onEnter = fun e -> makeIdle()
let headerOA = state.ActiveTable.Headers.[columnIndex].TryOA()
Components.TermSearch.Input(oasetter.Value, input=oa, fullwidth=true, ?parent'=headerOA, displayParent=false, debounceSetter=1000, onBlur=onBlur, onEscape=onEscape, onEnter=onEnter, autofocus=true, borderRadius=0, border="unset", searchableToggle=true)
let setter = fun (oa: OntologyAnnotation option) ->
if oa.IsSome then oasetter.Value oa.Value else setter ""
Components.TermSearch.Input(setter, input=oa, fullwidth=true, ?parent'=headerOA, displayParent=false, debounceSetter=1000, onBlur=onBlur, onEscape=onEscape, onEnter=onEnter, autofocus=true, borderRadius=0, border="unset", searchableToggle=true)
else
printfn "No setter for OntologyAnnotation given for table cell term search."
let updateMainStateTable = fun (s: string) ->
// Only update if changed
if s <> cellValue then
setter s
makeIdle()
CellInputElement(false, false, updateMainStateTable, setState_cell, state_cell, cellValue, columnType)
| Idle ->
if columnType = Main then
compositeCellDisplay cell
Expand All @@ -395,10 +376,13 @@ type Cell =
let setter = fun (s: string) ->
let nextCell = cell.UpdateMainField s
Msg.UpdateCell (index, nextCell) |> SpreadsheetMsg |> dispatch
let oaSetter = fun (oa:OntologyAnnotation option) ->
let nextCell = oa |> Option.map cell.UpdateWithOA
if nextCell.IsSome then
Msg.UpdateCell (index, nextCell.Value) |> SpreadsheetMsg |> dispatch
let oaSetter = fun (oa:OntologyAnnotation) ->
let nextCell =
if oa.TermSourceREF.IsNone && oa.TermAccessionNumber.IsNone then // update only mainfield, if mainfield is the only field with value
cell.UpdateMainField oa.NameText
else
cell.UpdateWithOA oa
Msg.UpdateCell (index, nextCell) |> SpreadsheetMsg |> dispatch
Cell.BodyBase(Main, cellValue, setter, index, cell, model, dispatch, oaSetter)

static member BodyUnit(index: (int*int), cell: CompositeCell, model: Model, dispatch) =
Expand Down
16 changes: 8 additions & 8 deletions src/Client/SharedComponents/TermSearchInput.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ type TermSearch =
element
Bulma.control.p [
Bulma.button.a [
prop.style [style.borderWidth 0]
prop.style [style.borderWidth 0; style.borderRadius 0]
if not searchable then Bulma.color.hasTextGreyLight
Bulma.button.isInverted
prop.onClick(fun _ -> searchableSetter (not searchable))
Expand Down Expand Up @@ -291,7 +291,7 @@ type TermSearch =
static member Input (
setter: OntologyAnnotation option -> unit,
?input: OntologyAnnotation, ?parent': OntologyAnnotation,
?debounceSetter: int, ?searchableToggle: bool,
?debounceSetter: int, ?searchableToggle: bool,
?advancedSearchDispatch: Messages.Msg -> unit,
?portalTermSelectArea: HTMLElement,
?onBlur: Event -> unit, ?onEscape: KeyboardEvent -> unit, ?onEnter: KeyboardEvent -> unit,
Expand All @@ -306,7 +306,7 @@ type TermSearch =
let loading, setLoading = React.useState(false)
let state, setState = React.useState(input)
let parent, setParent = React.useState(parent')
let searchable, setSearchable= React.useState(not searchableToggle)
let searchable, setSearchable = React.useState(not searchableToggle)
let searchNameState, setSearchNameState = React.useState(SearchState.init)
let searchTreeState, setSearchTreeState = React.useState(SearchState.init)
let isSearching, setIsSearching = React.useState(false)
Expand Down Expand Up @@ -338,7 +338,7 @@ type TermSearch =
Bulma.control.div [
if isExpanded then Bulma.control.isExpanded
if size.IsSome then size.Value
if searchable then Bulma.control.hasIconsLeft
if not searchableToggle then Bulma.control.hasIconsLeft
Bulma.control.hasIconsRight
if not searchableToggle then prop.ref ref
prop.style [
Expand All @@ -359,10 +359,10 @@ type TermSearch =
let s : string = e.target?value
if s.Trim() = "" && parent.IsSome && parent.Value.TermAccessionShort <> "" then // trigger get all by parent search
startSearch(None, false)
if searchable then allByParentSearch(parent.Value, setSearchTreeState, setLoading, stopSearch, debounceStorage.current, 0)
if searchable then allByParentSearch(parent.Value, setSearchTreeState, setLoading, stopSearch, debounceStorage.current, 0) else stopSearch()
elif s.Trim() <> "" then
startSearch (Some s, false)
if searchable then mainSearch(s, parent, setSearchNameState, setSearchTreeState, setLoading, stopSearch, debounceStorage.current, 0)
if searchable then mainSearch(s, parent, setSearchNameState, setSearchTreeState, setLoading, stopSearch, debounceStorage.current, 0) else stopSearch()
else
()
)
Expand All @@ -372,7 +372,7 @@ type TermSearch =
stopSearch()
else
startSearch (Some s, true)
if searchable then mainSearch(s, parent, setSearchNameState, setSearchTreeState, setLoading, stopSearch, debounceStorage.current, 1000)
if searchable then mainSearch(s, parent, setSearchNameState, setSearchTreeState, setLoading, stopSearch, debounceStorage.current, 1000) else stopSearch()
)
prop.onKeyDown(fun e ->
match e.which with
Expand All @@ -396,7 +396,7 @@ type TermSearch =
ReactDOM.createPortal(TermSelectArea,portalTermSelectArea.Value)
else
TermSelectArea
if searchable then Components.searchIcon
if not searchableToggle then Components.searchIcon
if state.IsSome && state.Value.Name.IsSome && state.Value.TermAccessionNumber.IsSome && not isSearching then Components.verifiedIcon
// Optional elements
Html.div [
Expand Down

0 comments on commit 36e57f3

Please sign in to comment.