Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate Sort, Search and Filter in timeline view #1

Open
Thiousi opened this issue Aug 30, 2023 · 3 comments
Open

Integrate Sort, Search and Filter in timeline view #1

Thiousi opened this issue Aug 30, 2023 · 3 comments

Comments

@Thiousi
Copy link

Thiousi commented Aug 30, 2023

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
Copy link
Member

kochrt commented Sep 5, 2023

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
Copy link
Author

Thiousi commented Sep 6, 2023

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:
image

@NonlinearFruit
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants