Signal prematurely cycling

[bbarker]

By prematurely, I at least mean before I expect it to. This may be working as intended, as I've not isolated exactly where the problem occurs. I have confirmed it is NOT an issue with debounce by disabling it. In the dateInput branch (commit = https://github.com/labordynamicsinstitute/metajelo-ui/tree/058ae0f942a0a5a43d164aebd75a108ff17664c2 ) I have a lot of log statements enabled.

I confirmed that the value refresh is set to true correctly when an XML file is loaded in the app (example file at https://labordynamicsinstitute.github.io/metajelo-web/), however, true never fully propagates down to the textInput signal and associated widget, as can be seen from this log output:

refresh init is : false index.opt.js:152:385
date sent to dateInput: (Right (DateTime (Date (Year -271820) January (Day 1)) (Time (Hour 0) (Minute 0) (Second 0) (Millisecond 0)))) index.opt.js:152:385
date retrieved in dateInput: (Right (DateTime (Date (Year -271820) January (Day 1)) (Time (Hour 0) (Minute 0) (Second 0) (Millisecond 0)))) index.opt.js:152:385
txt retrieved in dateInput: -271820-01-01T00:00:00.000Z index.opt.js:152:385
textInputWidget: false -271820-01-01T00:00:00.000Z index.opt.js:152:385
refresh init is : true index.opt.js:152:385
date sent to dateInput: (Right (DateTime (Date (Year 2020) April (Day 4)) (Time (Hour 0) (Minute 0) (Second 0) (Millisecond 0)))) index.opt.js:152:385
date retrieved in dateInput: (Right (DateTime (Date (Year 2020) April (Day 4)) (Time (Hour 0) (Minute 0) (Second 0) (Millisecond 0)))) index.opt.js:152:385
txt retrieved in dateInput: 2020-04-04T00:00:00.000Z index.opt.js:152:385
refresh init is : false index.opt.js:152:385
date sent to dateInput: (Right (DateTime (Date (Year 2020) April (Day 4)) (Time (Hour 0) (Minute 0) (Second 0) (Millisecond 0)))) index.opt.js:152:385
date retrieved in dateInput: (Right (DateTime (Date (Year 2020) April (Day 4)) (Time (Hour 0) (Minute 0) (Second 0) (Millisecond 0)))) index.opt.js:152:385
txt retrieved in dateInput: 2020-04-04T00:00:00.000Z index.opt.js:152:385
textInputWidget: false 2020-04-04T00:00:00.000Z index.opt.js:152:385
textInputWidget: false v7Ra9f_ index.opt.js:152:385
textInputWidget: false sm3AM1NbOSx index.opt.js:152:385
textInputWidget: false niBi6PpDgbhM3 index.opt.js:152:385
textInputWidget: false cbK1 index.opt.js:152:385
textInputWidget: false 2019 index.opt.js:152:385
textInputWidget: false bW8w2m5bzZ0WoKj7SBI_ index.opt.js:152:385
textInputWidget: false cNMAxYjF0j0k index.opt.js:152:385
textInputWidget: false aPd4QER93hRARj3HudkWUwratMGEd index.opt.js:152:385
textInputWidget: false Vf5ti6 index.opt.js:152:385
textInputWidget: false http://HgMuxvbx.au/ index.opt.js:152:385
textInputWidget: false institutionID0 index.opt.js:152:385
textInputWidget: false pKhb index.opt.js:152:385
textInputWidget: false DHv5J4LquWfN42iu1a index.opt.js:152:385
textInputWidget: false foo@baz.edu index.opt.js:152:385
textInputWidget: false http://akbNcujU.fz/ index.opt.js:152:385
textInputWidget: false http://tdjmeVUQ.lm/ index.opt.js:152:385
textInputWidget: false http://skGHargw.com/ index.opt.js:152:385
textInputWidget: false fqxRlcso3 index.opt.js:152:385
textInputWidget: false M._y index.opt.js:152:385
textInputWidget: false T4nUil6 index.opt.js:152:385
textInputWidget: false 2020 index.opt.js:152:385
textInputWidget: false lCi7-M50qjeFNhiAt index.opt.js:152:385
textInputWidget: false ewNM9_1KtEgas9spr8PEY index.opt.js:152:385
textInputWidget: false S2Zq5 index.opt.js:152:385
textInputWidget: false JmjVZzqUrJ653r4_9Y8ex6RpZ index.opt.js:152:385
textInputWidget: false http://iEhiBPjr.foo/ index.opt.js:152:385
textInputWidget: false institutionID1 index.opt.js:152:385
textInputWidget: false m0-XHPS index.opt.js:152:385
textInputWidget: false Ld0KhpgrA_LdvGgp-WDVZgeIgtJkM index.opt.js:152:385
textInputWidget: false foo@bar.edu index.opt.js:152:385
textInputWidget: false http://RadUMcWC.baz/ index.opt.js:152:385
textInputWidget: false http://YWYwhJyz.bar/ index.opt.js:152:385
textInputWidget: false lo8H7YsHaOEYf4BvtW_RXXHFZ index.opt.js:152:385
textInputWidget: false eRNBB2 index.opt.js:152:385

The end result is that, in some cases (namely dateInput, for some reason) won't update the value. I went down this route of adding refresh because I noticed that for dateInput, using P.value instead of P.defaultValue would allow it to be updated, but enabling that globally causes lag issues. Thus, I only want to do it when refresh == true (that is, when a user uploads a file) -- otherwise, we stick to defaultValue.

[bbarker]

I just pushed another commit to the branch; this is interesting: refresh==true gets all the way into textInput', but never makes into to the actual widget (textInputWidget):

type RefreshString = {ref :: Boolean, str:: String}

textInputWidget :: RefreshString -> Widget HTML RefreshString
textInputWidget rs = do
  log $ "textInputWidget: " <> (show rs.ref) <> " " <> rs.str
  txtNew <- D.input [valProp rs.str, P.unsafeTargetValue <$> P.onChange]
  pure {ref: rs.ref, str: txtNew}
  where
    valProp = if rs.ref then P.value else P.defaultValue

textInput' :: Boolean -> CtrlSignal HTML String
textInput' refresh initVal = do
  refstrNew <- sigNow refstr
  pure refstrNew.str
  where
    refstr = {ref: refresh, str: initVal}
    sigNow rs = step rs $ do
      pure $ unsafePerformEffect $ log $ "refstr in textInput sigNow': " <> (show rs)
      rsNew <- textInputWidget rs
      pure $ sigNow rsNew
    sig rs = do
      pure $ unsafePerformEffect $ log $ "refstr in textInput sig': " <> (show rs)
      debounce 500.0 rs textInputWidget

This happens regardless of whether or not sigNow or sig is used (just verifying debounce isn't an issue again).

So it seems somewhat likely there is a problem with textInput', or possibly (but IMO less likely) textInputWidget, but I'm not sure what it could be.

[ajnsit]

Hi @bbarker I will look at this (and the other issue you reported) over this weekend.

[bbarker]

It also occurs to me that I probably don't need refresh being passed around, if the underlying issue is resolved.

[bbarker]

I added a hack to workaround the issue. This is not a solution as you will see, but it does seem to work, so that may provide another data point. I manually modify the DOM after doing a serach for input elements. In the signal that creates a textInput signal, right after the creation of the signal I call my custom function setChildInputByTag:

  txtMay :: Maybe NonEmptyString <- D.div_ [P._id mjUI_dateInput]
    $ textInput refresh (fromString prevTxt) -- assumes this id is unique ... (hack) :
  pure $ unsafePerformEffect $ setChildInputByTag mjUI_dateInput "INPUT" prevTxt

The function is defined like:

windowDoc :: Effect Document
windowDoc = do
  win <- window
  hDoc <- document win
  pure $ HTML.toDocument hDoc

setChildInputByTag :: String -> String -> String -> Effect Unit
setChildInputByTag id tag value = do
  doc <- windowDoc
  let root = toNonElementParentNode doc
  parEleMay <- getElementById id root
  case parEleMay of
    Just parEle -> do
      let par = Ele.toParentNode parEle
      childCollection <- children par
      childArray <- HTML.toArray childCollection
      let childMatches = filter (\c -> Ele.tagName c == tag) childArray
      let childInputs = catMaybes $ HTML.fromElement <$> childMatches
      -- log $ "Child array tags: " <> (show $ Ele.tagName <$> childArray) -- DEBUG
      when (length childMatches == 0) $ log
        $ "No children of " <> id <> " with tag == " <> tag
      when (length childInputs == 0) $ log
        $ "No input element children of " <> id <> " with tag == " <> tag
      for_ childInputs (HTML.setValue value)
    Nothing -> log $ "in setChildByTag, couldn't find element with id " <> id