[WIDGET] Trilium Timeline - A simple integration of vis.js that displays fetched notes as dates on a timeline

[QuentinLeCaignec]

UPDATE: this is still regularly updated and has been cleaned-up and made more easily configurable, check the repo and the README of that repo, link below.

https://gitlab.com/QuentinLeCaignec/trilium-timeline

---

Hey there.
Using vis.js timeline, i've made it work as a widget to visualize specific label values as dates (it grabs all notes with those labels) on a timeline, it's scrollable and zoomable, with potential custom css for groups/items, toggleable groups and with each item acting as note links with previews, and a few other things.

This code is made for my own purposes and it's not the best, you'll also have to modify a bunch of values to what you need (name of labels it grabs, name of groups, default zoom/start time, etc..)

Here's a pretty preview :

Tell me what you think and don't be afraid to ask me if you've got issues making it work ! There's also a lot of ways to improve this, so feel free to suggest them and send me your fixes/improvements.
I might make a repo for this if enough people are interested.

[zadam]

Very cool!

[ehamminga]

I had to look twice at your preview to understand these wrong dates, only to realize that you're a Pathfinder fan! Very interesting implementation and thanks for your contribution

[QuentinLeCaignec]

Oh good catch! I didn't know if anyone would notice, the only clue being the year around 4720+ and the month of Kuthona ;)

[QuentinLeCaignec]

I've put this into a little repo so it's easier to track the few changes i've made.

Here's it is : https://gitlab.com/QuentinLeCaignec/trilium-timeline

[6-AND-9]

Wow, this looks great. Great job!

[QuentinLeCaignec]

I've updated the repo in the same way I updated my hexmap widget (https://gitlab.com/QuentinLeCaignec/trilium-hexmap), with a ready-to-import .zip file since manually zipping and importing the source files wasn't working.
If anyone uses this or wants to, let me know, and just like the hexmap I might go back to this and update/polish things. One thing I could do is remove all my personal tags/categories from the code and do that from attributes instead, that way it would be configurable (setting your own categories, etc.) without changing the source code as much.

[gerroon]

This should be a default feature in Trilium .

[ecodiv]

I am trying to get this to work, but I gives me the follow error code:

Execution of JS note "render.html" with ID xg1yzvuegTm3 failed with error: Malformed arrow function parameter list

And in the script.js there is this error message:

[QuentinLeCaignec]

Huh. The script.js message always showed an error but it still worked, and it was done according to the wiki so I thought that was probably just mistake.

What version of trilium are you on?

[ecodiv]

version 0.47.7

[zadam]

You can ignore this "error", it's just ESLint validation which doesn't understand "top level await".

[ecodiv]

Concerning your question, I would like to use it, removing all your personal tags/categories from the code and do that from attributes instead would make things a lot easier to use :-)

[QuentinLeCaignec]

I'm glad! Had not gotten any response so far. I'll look into it and use attributes for tag names (something I had already started to do for my Hexmap widget) when I've got some time. I'll keep you posted.

[QuentinLeCaignec]

I updated the repo, see my new message at bottom. Tell me if it works for you, it's now all customizable in attributes but it also makes it a bit hard to figure out at first (there's a lot of attributes now and trilium doesn't show them in a very readable way..). There's a working example included and a detailed README.

[QuentinLeCaignec]

I updated the repo to version 1.1, this is a big update!

I moved all my personal labels/logic into customizable attributes with no need to change the source code. This took some effort (and required the addition of a few special cases that are a bit weird), but it means you can now customize this to use your own labels and define your own groups!

This also makes it a bit complicated to understand and use (especially the groups), but I added a working example in the Widget as well as detailed explanations in the README file.

Get it here : https://gitlab.com/QuentinLeCaignec/trilium-timeline

[QuentinLeCaignec]

Updated to 1.2 for trilium version 0.48.3. This is just a precaution because everything still worked, but I tweaked the script a bit and moved things into an async function. Some slight update to the README and such.

[IssbesAstieris]

Hello Mr. Le Caignec,

Sorry for coming to you so "late": I've just discovered your script and it might be a life-saver (I'm a student, and in order to memorize the historical knowledge I've been compiling in Trilium, timeline charts are a must).
I've flipped through your readme file and tried my hand at it for the last two hours. Yet I'm stuck on one thing: I've been unable to make B.C. dates work. For instance, Seneca is born in 4 B.C. and died in 65 A.D. ; I've tried labels (the "event" being Seneca's lifespan) such as :

#event_start=-0004-01-01 #event_end=0065-04-12

and trying quick alternatives (like "~0004")... unsuccessfully: the chart registers "-4" as "4" for the event. Yet the timeline does display B.C. dates (-500, -1000, ...).
Is it actually possible to input B.C. dates? (My programming skills are probably lacking...)

Looking forward to your answer!

[QuentinLeCaignec]

Huh, it used to work with negatives dates but with a strange format with two zeros added to the front, such as "-005294-01-01", but it looks like that's broken and those dates show up in some other weird places now.
I have not checked my timeline script in a while so I'll look into it later today and try to bugfix. Which version of trilium are you using ?

[IssbesAstieris]

Hello! I'd figured as much regarding the two-zeroes format (still in effect for A.D. dates), something must have broken indeed. I'm using the very last version of Trilium right now (0.50.3), but by the time I messaged you, I was using v.0.49.5.

Thank you very much for your (quick!) answer, I'm looking forward to your fix!

[QuentinLeCaignec]

I didn't forget about you! I've just been very busy this week and finally got around to this.
So I played with it a bit and didn't understand why it stopped working when the vis.js version hadn't changed, don't know why it broke, but I fixed it by parsing the string dates as new Date() before transforming into a vis.moment object.

Long story short, it works now. I updated the repo, and I added a working example of a negative date in the examples (which shows the special format you need to input the date for it to work, with 6 digits on the year such as -000100-01-01 rather than -100-01-01 or -0100-01-01 as you would expect).

https://gitlab.com/QuentinLeCaignec/trilium-timeline

[IssbesAstieris]

Hello! No problem for the time you took, life has to go on at any rate (see, my answer's come late too... sorry about that!).
I'm extremely grateful you took the time to fix it: I've been fiddling with this new version for a few hours now and it works like a charm! I'll keep in mind the six-digits year format (the dummy events you smuggled in your plugin are plenty useful). Thank you so much, I really appreciate your help!

[QuentinLeCaignec]

Updated to 1.3 for trilium version 0.50.2+. I fixed a bug where negative dates were not being parsed properly, and added a working example of a negative date in the examples.

[nicollasricas]

Hey, @QuentinLeCaignec

I was trying to integrate your timeline plugin with my to-do notes plugin, but couldn't figure out.

I have multiple to-do lists from multiple projects that are separated by these categories: Archive, Backlog, Done, In Progress.

I need to show in a timeline all notes from backlog from all projects that have the due date label set.

Here's how I filter them using the built-in search engine: 
(#todoItem and #dueDate) and (note.ancestors.labels.todoBacklog)

I'm using Collection Views plugin just to show you how I get them and which attributes I've used to get the information required.

Do you think I could achieve this with your plugin?

Best regards,
Nicollas

[nicollasricas]

Just ignore it. After more testing, I think it's not going to work. I should just implement a timeline myself.

Thanks anyway!

[QuentinLeCaignec]

Hello !
This plugin should work, it simply reads notes with a certain label, you can define which label it looks for as well.
It could take some work if the way your notes are already tagged/labeled isn't the same way. Currently you need at least one specific label that contains a date string (and optionally another for the end date, to make a start/end time block), and another label with a value that determines its group.
So in your case, all your notes need to have the same label containing a date string (let's say "date_string") and you can define the "event_label_start" attribute as "date_string".
For your categories, all your notes need to have an attribute (let's say "note_category") that contains a value (in your example those would be "archive", "backlog", "done" "in_progress"). You can define the "event_label_type" attribute of the widget to "note_category" and it will read it, you also need the "event_type_list" attribute which will be the more annoying part (declaring each group, color, options, etc).

If your notes aren't tagged in this way (with a same date attribute, and with a type attribute containing a value) then yes, it's not going to work and would require a rework on your notes, sadly.

But I could make some changes on my plugin to allow for what your need, if I can get a better idea of what you require. Really, it probably comes down to exactly how the notes are tagged, and I could make it configurable on my plugin to allow for different types of tagging to be compatible.

[QuentinLeCaignec]

Just quickly looking at your plugin, if the problem comes with the date attribute being in a different format from the string I use, I could add an option to be able to read the format you have.
If the problem comes from the fact that each of your categories of notes are tagged with a different tag rather than the same attribute with different values, then I could also make it the behaviour of "event_type_list" to look for the ID as a tag rather than the value of the attribute defined by "event_label_type", for example if "event_label_type" has been left empty.

[nicollasricas]

Thanks, but I have already implemented the timeline.

Best,
Nicollas

[QuentinLeCaignec]

Updated to 1.5 for trilium 0.54.2, refactors/cleans up code.

[spazlet]

Hello! Attempted install twice, once without Safe Import and once with. Followed all instructions but it seems that the html file is not rendering. Is it possible that this integration no longer works or am I doing something incorrectly?

[spazlet]

I am currently on 0.60, waiting for 0.61 is perfect as I expect that it will come out very soon. Thank you!

[spazlet]

0.61 j dropped, assuming you haven't been obsessively checking it as I have so commenting just to notify you

[QuentinLeCaignec]

Oh nice, when I have some time I'll look into updating. This might take a bit as the APIs seem to have changed. I'll update you when it's released :)

[QuentinLeCaignec]

@spazlet updated! Sorry for the delay.

[spazlet]

No worries! Thank you so much!

[QuentinLeCaignec]

Updated to 1.7 for 0.62.4 !

[QuentinLeCaignec]

Updated to 1.8, still for 0.62.4 but should work perfectly for 0.63.x versions, no breaking changes.

Added an optional feature (can be toggled off using the can_day_click label on the widget, see the README) which creates a new day note when clicking on the day label at the bottom of the view (thanks to @FliegendeWurst).

Only limitation, when the view is zoomed in a month or year scale out the note will still be created based on where exactly the mouse was clicked (at the left or right of the month label for example), so it still knows which day is clicked but the day isn't visible to the user in this view, which is not very intuitive.

[meichthys]

Nice addition!