Integrate Sort, Search and Filter in timeline view

[Thiousi]

First of all, great to have this CLI to generate static html from markwhen.

I have been tinkering with it for a while but cannot find a way to integrate the Sort, Search and Filter functionalities that are available on the markwhen web app. I have found them in the markwhen/markwhen repo (ex sort: https://github.com/mark-when/markwhen/blob/25779d9238477ec76eb988a0c6a0af754fdf624e/src/Drawer/ViewSettings/Sort.vue) but don't find them on the individual markwhen/timeline repo.

[kochrt]

The views are really only designed to display what is given to them, already sorted/filtered. What the web app and vs code extension do is postMessages to the views to alter or update what they are displaying. This way the host's chrome/UI can be tailored to each platform and the view doesn't have to worry about it.

Is this the right way? I don't know. I like the strict separation but a case could be made that it's separated at the wrong point.

You could make a simple iframe that hosts the timeline (or other views, for that matter; they all speak the same language) and adds some of that functionality back by sending messages for sorted and filtered views.

The views display whatever is in the transformed field of a markwhenState update (https://github.com/mark-when/timeline/blob/9873067e99e815efab40be914c27252b56c7fb20/src/Markwhen/markwhenStore.ts#L114). transformed here meaning, "after filtering and sorting".

It might be easier to do this inside the timeline view and other people might be interested in it too 🤷

[Thiousi]

Thanks @kochrt for the explanation for this. I have a specific use case where the static html that doesn't require any links works very well. I was hoping we could keep the static html and add the filtering but I guess not. We'll keep an eye out for a future upgrade integrating this feature in the html output of the CLI. Thanks!

Edit: just for fun, I tried exploring the postMessage to the iframe solution. I have the timeline opened in an iframe, displaying the timeline as intended. I post a message (and monitor it is received in the console) but fail to see an update on the view.

Here is the quick and dirty approach:

function refreshMw() {
        document.getElementById('iframe').contentWindow.postMessage(
            {
                "markwhenState": {
                    "transformed": transformedMw
                },

            },"*"
        )
    }

where transformedMw holds the full transformed json from the output of the CLI, with a tiny change on the first event. I do not see the change reflected in the timeline. Should I not use the timeline view generated by the CLI ?

The console is seeing the message:

[NonlinearFruit]

We're source controlling some mw files and we have a pipeline use mw to turn them into html and puts them on GitHub pages/GitLab pages.

If the CLI could optionally include sort/search/filter in the stand alone html that would be super helpful. We don't really need a full website, the goal is interactive data visualization.