fjvallarino/monomer

Question regarding image rendering

Closed this issue · 7 comments

prolic commented

In my main application model, I have an property like this: selectedKeys :: Keys - whereas the Keys are only known, once the application gets booted (f.e. reading the keys file from disk). Of course I could make it Maybe Keys instead of providing some hard coded initial keys value, but I don't think that's the problem I have.

When the UI renders first time, I expect it to show a profile image for some dummy initial keys for a fraction of a second.
As soon as the keys are loaded, the correct image should be displayed. However the wrong image gets displayed (the old one).

What's even more strange is, that after the keys are loaded, I grab some messages and display them, there also a profile image should get rendered, but instead I do see nothing at all instead. Once I click somewhere else (go to a different widget) and come back, all images are rendered correctly.

I am totally new to Haskell, so it's very likely I a doing something utterly stupid again.

Again some video upload (seeing is better than explaining I guess):

pl-next-2022-06-18_23.56.02.mp4

I have some Debug.Trace output where I render the profile image, this is the output:

"https://robohash.org/134bdeaf23fe7078d94b2836dcb748e762073d4bc274a2c188a44a3fc29df31c.png?size=40x40"
"https://robohash.org/18755d9063629e12cfd5a1c03ed58d9f6891297b6577d658373ebe8e1ad590c4.png?size=40x40"
trying to connect to ws://localhost:2700 ...
"https://robohash.org/18755d9063629e12cfd5a1c03ed58d9f6891297b6577d658373ebe8e1ad590c4.png?size=40x40"
Connected to ws://localhost:2700
"https://robohash.org/18755d9063629e12cfd5a1c03ed58d9f6891297b6577d658373ebe8e1ad590c4.png?size=40x40"
"https://robohash.org/18755d9063629e12cfd5a1c03ed58d9f6891297b6577d658373ebe8e1ad590c4.png?size=40x40"
"https://robohash.org/18755d9063629e12cfd5a1c03ed58d9f6891297b6577d658373ebe8e1ad590c4.png?size=40x40"

So what happens here, first time it renders a different image, which is expected, as there is a placeholder, but as soon as the app ist booted, there should be a different image, and from the debug output you see exactly that. The correct image should get rendered a fraction of a second later.

Just in case the problem is within my profile image helper, I'll post the code for it as well:

data ImageSize
  = Big
  | Small

profileImage :: WidgetEvent e => Maybe Text -> XOnlyPubKey -> ImageSize -> WidgetNode s e
profileImage picture xo size = image_ (trace (show path) path) [ fitEither ]
  where
  path = case picture of
    Just p ->
      if p == "" then fallback else p
    Nothing -> fallback
  fallback = do
    let baseUrl = T.pack $ "https://robohash.org/<xo>.png" ++ imageSize size
    let imgUrl x = T.replace "<xo>" (T.pack $ exportXOnlyPubKey x) baseUrl
    imgUrl xo

imageSize :: ImageSize -> String
imageSize Big = "?size=300x300"
imageSize Small = "?size=40x40"
fjvallarino commented

It depends on how this is used. The main thing is making sure the model of the Composite that contains your buttons is updated. If xo is not somehow part of the model, you will have to use mergeRequired to account for it.

Could you point me to the location in your project where you use this?

prolic commented

I just tried your suggestion and added this to the box:

box_
  [ mergeRequired keysChanged
  , onClick $ if model ^. waitingForConns then NoOp else EditProfile
  ] $ tooltip "Edit Account" $ profileImage pImage xo Small
  `styleBasic` imageButtonStyling
where
    keysChanged wenv old new = old ^. selectedKeys /= new ^. selectedKeys

However nothing changes, same weird behavior.

fjvallarino commented

I tried running the application but I get this:

image

Is there any way I can force it to start? Maybe by faking the content of the keys file?

prolic commented

Ah sorry, no it expects a localhost relay server. I just pushed a code change to master that enables one that is production, so you don't need to setup anything.

  • 👍1
fjvallarino commented

How should I test this?

  • I created an account and posted something.
  • Restarted the application, but profile information was not loaded so I input it again.
  • Pasted an image link, loaded it and then saved it.
  • The image in the right-most button (Edit Account) was updated correctly.
  • The image in the previously created post was not updated.

Should the image in the post be updated too?

I don't think you need mergeRequired for these buttons. Maybe you want to have one box that wraps a complete section so you can avoid re-creating it unless the model that section is interested in has changed.

Another thing to consider is that merge is hierarchical. If a parent widget has a box with mergeRequired and its condition returns false, no children will have its merged function called.

prolic commented

I did some refactoring and the problem is gone. Probably some seemingly unrelated bug in how the model received updates. No further investigation is needed.
Thank you very much for your support.