Hi Simon,
thank you again for this great work… implementing it I encounter a problem because it overwrites $:/core/ui/TopBar/menu which sadly I also overwrite in my Layout because it seems to be the logical place to implement a button/menu to switch Layouts…
On the other hand, I would love to use the powerful new story river with its genius your plugin brings in other contexts than intended. This is why I dare to ask: Could we have this as a module that can be used apart from the layout. To my mind works so beautiful, that I would even like to replace the standard story river with it.
Hi @JanJo
Tonight I’ll implement some improvements for the dynanode widget.
It won’t write to state tiddlers anymore.
Are you testing on Chromium browsers? (Chrome/Chromium/Edge…)
For the $:/core/ui/TopBar/menu button I don’t know how to resolve it for you.
Maybe you take a look at my implementation and then add your implementation to it…?
About horizontal view: I think I’ll remove it as it really makes problems…
Best wishes,
Simon
1 Like
Hi @BurningTreeC, great improvements since the fist versions!
Dynanode
Is the dynanode only intended to increase performance when having a lot of tiddlers open? Or did you have some other uses in mind too?
Enabling it causes noticeable scroll lag on Edge/Windows if the Enhanced security1 is turned on (regardless if balanced or strict). MS warns that this feature might break or slow down features on websites and one can add a website to exceptions. Dragging to change the width of sidebar is also a subject to lags if this option is on. So this is by no means a problem of the plugin, but perhaps something to be aware of.
A minor thing: the visible/near/oov labels in sidebar open tab remain displayed when dynanode is switched off.
Layout
Looks very good. There are some minor issues and things to be wished for, if possible:
- When scrolling a column, moving mouse quickly to another column and attempting to scroll before the scroll animation has finished on the first column, the first will be scrolled, not the second one where the mouse is.
- The animation of changing columns on mobile seems not to react to the animation time defined in control panel. It feels a bit slow and I wanted to make it faster by adjusting the setting.
- It would be great if the sidebar and left-sidebar could be opened by swiping horizontally from the last/fist column. This would make sense to use this plugin even for single column layout for mobile.
** Even better (but I have no idea if that’s doable) if swiping horizontally near the sides of the screen would open the sidebars and swiping in the center would move between columns. Some Android apps behave this way, e.g. in Gmail swiping from the left edge opens the “sidebar” menu, swipingin the center activates swipe actions on messages.
1 I’m not sure if this “Enhanced security” mode actually does increase security in any meaningful way. I just thought I’d just leave it on as long as it doesn’t cause issues. I guess that if an attack were to be stopped only by this, there are some other serious problems which might just as well not be stopped by this feature next time (visiting malcious websites in the first place, having not-up-to-date software vulnerable to exploits and so on).
Hi @vilc , thanks for your reply!
It’s mainly to increase performance when there are many tiddlers open, yes.
But I haven’t measured performance yet. I think I’ll have to still optimize the dynanode widget a bit.
Thank you, I wasn’t aware of this setting! Where can it be turned on/off?
Oh yes, I know about that. I plan removing the state tiddlers completely, so there will be no visual feedback in the future. This modified “Open” tab is just for testing purposes.
Is it possible that this happens in Edge only? I just had a similar issue, also on Edge.
That’s true. It uses css scroll-snapping and there’s no option to change the speed of it.
I’ll think about this!
Thank you,
Simon
1 Like
- Settings > Privacy, search, and services.
- Under the Security section, confirm that Enhance your security on the web is On.
- Select the browsing mode that’s right for you.
There’s also a switch in the “URL-padlock” menu for a per-website configuration.
Here’s more info on this: Enhance your security on the web with Microsoft Edge - Microsoft Support
I’ll test in on other browsers and let know.
@BurningTreeC I tested the scrolling issue on a couple of browsers on Windows. It seems that the issue appears in all Chrome-like browsers, but is much more prominent in Edge.
In Firefox, it seems that the mouse position is immediately translated to what is being scrolled. When performing a long continuous scroll and moving mouse between columns, the column with the mouse is scrolled.
In Chrome and Vivaldi, the mouse position seems to be “checked” only when scrolling begins, so when moving mouse between columns during a scroll, the initial column is scrolled until the scrolling finishes, and only then the other column can be scrolled.
Edge behaves similarly, but it has a long “smooth” scroll animation, which goes on for a considerable time after the scrolling has been finished, even more so if the scroll distance was long. The mouse position will not be checked until the animation has finished. Because of that it is much easier to achieve a situation where the scrolling happens somewhere else than expected.
Thanks for testing @vilc
Unfortunately I cannot test this as I’m on a Linux Desktop now with no access to Edge and on Chrome it works fine over here. May be a Windows related issue, may be due to smooth scrolling…
But yes, I also found this issue earlier today on my work-desktop on Edge.
Maybe with css this issue can be fixed…? I don’t know yet, I’ll investigate.
Thank you!
Does the following in a stylesheet tiddler solve the issue by any chance?
.tc-tiddlyflex-story-river-wrapper-inner {
overflow-y: scroll;
}
It doesn’t change anything for me. I think this might be just how different browsers handle scrolling and scrolling animations, which is beyond control from the website level, but hopefully configurable in the browser, for those who care.
The exact same thing happens on the simple code below, which you can give a try on https://scroll-test.tiddlyhost.com/
<table>
<tr>
<td>
<$scrollable class="test"><<list-links filter:"[all[shadows]]">></$scrollable>
</td>
<td>
<$scrollable class="test"><<list-links filter:"[all[shadows]]">></$scrollable>
</td>
</tr>
</table>
<style>
.test {
max-height: 500px;
}
</stye>
Thanks for investigating @vilc ! Much appreciated.
So that means that we cannot do anything about it. That’s a shame but it is as it is…
Hi all,
I’ve now enabled Performance instrumentation on the TiddlyFlex page.
You can see the styleRefresh and mainRefresh in the developer console (right click on the page → inspect → console).
I’ve now added something which improves performance quite a bit. It basically looks if an element has the content-visibility: auto or content-visibility: hidden style and doesn’t refresh it’s widget in that case.
That means, if you enable the dynanode functionality and do something heavy like dragging the sidebar resizer, you will not only see a difference in the Performance instrumentation but you will also feel it.
You will see a big difference if you open - say - 10 tiddlers for editing without dynanode enabled and drag the sidebar resizer. Then enable dynanode and drag it again.
I hope you like this,
best wishes,
Simon
3 Likes
P.S. for best usability DO NOT enable the second dynanode checkbox 
1 Like
Thank you for removing the $:/core/ui/TopBar/menu tiddler! it makes it much easier to integrate your plugin!
I see, it did not really work yet.
You integrated the ensemble-saver, which is very usefull.
In my wiki I have a lot of saved stories (stored in a field story in a tiddler which gives the name to the story) can you give me a hint to build an “open story as new column” button?
@BurningTreeC I am reviewing the demo once again and very happy with it, thanks for your effort again.
A few comments from todays review
-
Perhaps I mentioned it but why is the “sidebars minimum width” so large?, by default, I find myself wanting to reduce this as soon as I start using the site. I think of the stories as my key content and want them to have the best size.
- I find 15% seems good even at different zoom levels.
- Zoom in and out continues to work very well, good work.
-
I notice that the width of the left toolbar is hardcoded in a div style, perhaps a default class, or even config tiddler would be wise?
- Alternatively a second draggable width that (multoiple) left sidebars use a n/100% of?
-
The Page control New Tiddler does not navigate to the new tiddler.
-
As mentioned by others various settings are redundant with TiddlyFlex, such as some in Control Panel > Appearance > Theme Tweaks. It would be nice to find a way to indicate this, perhaps we can enable a message that solutions like yours can introduce by tag to advise the user. eg
“Some settings here are not valid when using TiddlyFlex, see Readme”
- Perhaps even a way to put your own (and others) theme tweaks in the same panel.
- And sensitive to the layout in use.
- Perhaps even a way to put your own (and others) theme tweaks in the same panel.
[Edite] Issue raised here [IDEA] Modify Theme Tweaks (or other element) to respond to selected layout · Issue #8080 · Jermolene/TiddlyWiki5 · GitHub
I had to change it for the horizontal view to work but I could remove it now…
Yes, but it does not save all possible configurations at the moment…
<$set name="newColumn" value={{{ [list[$:/columns]count[]add[1]] }}}>
<$action-listops $tiddler="$:/columns" $subfilter="[<newColumn>]"/>
<$action-setfield $tiddler={{{ [[$:/StoryList-]addsuffix<newColumn>] }}} list={{{ [[MyStoryTiddler]get[story]] }}}/>
</$set>
1 Like
Caro @BurningTreeC (fellow Italian lake lover)
I’m looking in great interest and now this tool is getting to be more than your MCL.
Thankyou for making something good even better.
I do not have time to comment much ATM.
I have ONE thing I hope will definitely stay??? — The horizontal view mode — An HORIZONTAL INFINITE POTENTIAL (HIP).
Why?
It makes a lot of complex in-wiki tasks much easier.
And makes them easily accessible.
Rowing for you, caro,
TT
1 Like
Hi @TW_Tones
I changed the default to 15%
The sidebar is not part of the plugin. It’s for demonstration purposes what the plugin can do.
The sidebar will get the width you want, just specify a width for the content.
Is it still like that? I’ll need to investigate…
Yes it would be a good thing to have something in the theme tweaks that gives a hint. Or a condition like “if standard layout show setting”. Then we could add settings by tag and give them a condition. In my case “if layout is TiddlyFlex then show else hide”. Would be cool
Thank you for your comments,
Simon
Ciao @TiddlyTweeter e grazie!
I hope it will be better
I knew you would ask for it. I’m struggling with it. But I have already gone down that rabbit hole once, I think when I don’t know what to do and/or add I’ll try making it happen 
Thanks, but the dynanode base-idea comes from @jeremyruston, Javascript for it comes from here and Jeremy’s dynaview plugin, I couldn’t have done anything without the help of people in this forum and without stealing pieces of code from here and there. And it’s a lot of try and error.
Hello Simon,
I have just made a raw sketch for a “new column search dropdown”, to ad a column from a storyfield.
Doing this, I asked myself whether the new columns always have to have numerical names, or whether the name of the story could be appended - which is the experiment in the code below. Result a new column containing the chosen story can be created that way; it works fine - but cannot be removed with the “-” button so far. For me it would be very practical to have columns name like that, because they could be written back to the “story” field easily. What do you think of that idea?
\define story2column()
<$let newColumn={{$:/temp/newcolumn}}>
<$action-listops $tiddler="$:/columns" $subfilter="[<newColumn>]"/>
<$action-setfield $tiddler={{{ [[$:/StoryList-]addsuffix<newColumn>] }}} list={{{ [{$:/temp/newcolumn}get[story]] }}}/>
</$let>
\end
<$edit-text tiddler="$:/temp/newcolumn" tag="input"/>
<$linkcatcher to="$:/temp/newcolumn" actions=<<story2column>>>
<$list filter="[search{$:/temp/newcolumn}]">
</$list>
</$linkcatcher>
1 Like