[Userscript]: WaniKani Ultimate Timeline

This sounds awesome, rfindley! Will be great to use… when I have more than 5-30 reviews a day. (After I subscribe.) Looks pretty, too! :smiley:

kobayashi said…

The range select is nice, but I’m not sure I like the click-release, select (move-mouse), click (to finish).
It seemed sort of unexpected behavior,

I agree. (I haven’t tried it yet myself), but that is also what I would expect. That seems more natural.

Thanks for all your hard work, with all your scripts! :smiley:

kobayashi said...When I first tried your new script I got the same no-bars issue.
Refreshed page. Clicked the force-refresh. Still no-bars.
localstorage timeln_cache was just:
{"radicals":[],"kanji":[],"vocabulary":[]}

Then I deleted all my localstorage data for WK and now it works and I can't get it to break again...
Awesome, that helps narrow it down.  I did my best to prevent overlap of localStorage names (other than apiKey), so I'm wondering if maybe localStorage is getting full on some people's PCs.  This Timeline can potentially store a LOT of information, depending on how many items are scheduled for the future.  If I can prove this is the problem, I can limit the cache to a week and a few days.

That's a lot of api requests... But it is very fast!
Yeah, I experimented to find best balance of how many levels to request at once.  Seems like about 5 levels per request is optimal for WK.

I like the switch to SVG.
Nice loading screen.
And no-page-refresh reload.

The range select is nice, but I'm not sure I like the click-release, select (move-mouse), click (to finish).
It seemed sort of unexpected behavior, but maybe I'd get used to it.
Holding down mouse button click-drag-select seems more normal.
The select mode kept getting stuck on for me...
It should support both [click-move-click] and [mousedown-drag-mouseup].  Can you elaborate what sequence you are doing?  I definitely want it to be intuitive.

I updated my version with a new theme a few weeks ago.
Maybe take a look at it and see if you like anything.
I kinda like my new bar markings.
It updates the graph as you drag the slider using a debounce filter to rate-limit.
I'll take a look.

Maybe hide the time-text label when it would be clipped?
(And now I can't get it to clip, but I'm sure I saw it clipping on the right...)
Yeah... I debated that.  Haven't looked to see if there's a way to determine text width.  I suppose it should be easy with SVG.

The time label for the current reviews column says 'Today 12:45pm', maybe it should say 'Available Now' or something?
Ahh, good point... and easy change.  Thanks!

Any progress on that review and lesson AJAX sniffing framework? (or do I mis-remember?)
Then timeline could insta-update with no extra API requests.
You are remembering correctly.  I have a lot of it done in piecewise fashion, but haven't put it all together yet.
embe said... Still nothing. It works on firefox...
 In Chrome:
Settings -> Show advanced settings -> Privacy -> Content settings -> Cookies -> All cookies and site data -> www.wanikani.com (it's sorted alphabetically by the middle part of the name... i.e. 'wanikani') -> local storage

What size do you have in your local storage?  I think the default max per-site storage is something like 5MB.  Anyway, maybe try to 'Remove' localstorage like @kobayashi did, then refresh dashboard.


awesome !! thanks :slight_smile:

I have deleted local storage for both wanikani.com and wanikani.com and refreshed. Nothing.

Ok, I did figure out what was up for me. I had to delete the localstorage and then disable the wanikani real times script I was using. I did turn the script back on and the timeline is still working. 

sirvorn said... Ok, I did figure out what was up for me. I had to delete the localstorage and then disable the wanikani real times script I was using. I did turn the script back on and the timeline is still working. 
 Great!  That gives me something I can investigate.
rfindley said...
sirvorn said... Ok, I did figure out what was up for me. I had to delete the localstorage and then disable the wanikani real times script I was using. I did turn the script back on and the timeline is still working. 
 Great!  That gives me something I can investigate.
 I disabled all the other scripts, cleared those three variables.  Still not working on my end.
DaisukeJigen said...
rfindley said...
sirvorn said... Ok, I did figure out what was up for me. I had to delete the localstorage and then disable the wanikani real times script I was using. I did turn the script back on and the timeline is still working. 
 Great!  That gives me something I can investigate.
 I disabled all the other scripts, cleared those three variables.  Still not working on my end.
 If you decide to try clearing local storage (not just the 3 deletes; see earlier posts), please let me know how much space was taken up.
Are you also running the "real times" script?
rfindley said...
DaisukeJigen said...
rfindley said...
sirvorn said... Ok, I did figure out what was up for me. I had to delete the localstorage and then disable the wanikani real times script I was using. I did turn the script back on and the timeline is still working. 
 Great!  That gives me something I can investigate.
 I disabled all the other scripts, cleared those three variables.  Still not working on my end.
 If you decide to try clearing local storage (not just the 3 deletes; see earlier posts), please let me know how much space was taken up.
Are you also running the "real times" script?
 Real times, Real Numbers, and Dashboard Plus

Did what sirvorn did and working. :slight_smile:

'Wanikani Real Times' does seem to interfere for me.
But only if it is enabled when the script loads new data.

Now I tried it on a different browser (firefox) and did NOT clear the localStorage.
No bars and {"radicals":[],"kanji":[],"vocabulary":[]} again.
apiKey is correct.
Script is making lots of ajax requests to load data.
API responses contain normal data.
But timeln_cache is not getting filled?

Disable 'Wanikani Real Times'.
refresh page.
click force reload.
It Works!

Enable 'Wanikani Real Times'.
refresh page.
still works.

click force reload.
Broken Again (no bars)

Disable 'Wanikani Real Times'.
refresh page.
still broken.

Can confirm that when I hit force refresh it breaks again.

When I disable real times and hit force fresh it works again.

Cool, now to figure out the conflict.
Thanks for the clues!!

Turned off real time and real numbers, then hit force refresh as others suggested.  Works.

Great update.  There are so many nice improvements—even just little things like having the slider’s label update while dragging it (which fixes the one thing that ever really bothered me about the old version).  Thanks for sharing your fantastic work, rfindley.

great script!
is there a way to manually add more fonts?

lucasan88 said... great script!
is there a way to manually add more fonts?
 If you open the script in GreaseMonkey or TamperMonkey (or whatever), there is a comma-separated list of font names near the top.  You should be able to use any font name that your computer supports.

looks sweet! But it’s very small, any chance to set the height?

xNidhogg said... looks sweet! But it's very small, any chance to set the height?
 Look at the javascript and you'll find a thing that says
var css =
followed by a bunch of stuff in single quotes concatenated together with plus signs.
'#graph-item-info .item {font-size:2em; line-height:1.2em;}'+
 '#graph-item-info .item img {height:1em; width:1em; vertical-align:bottom;}'+
and so forth
There are many height references, you'll probably have to go through and CTRL+F "height:" <-- this has a colon, also includes line-height
and play with the numbers there. I don't have this script installed so I can't give you an exhaustive list of every attribute required to achieve the effect you want. It's in em which is a screen-relative size, changes to these numbers will result in significant scaling when you add even a small amount to the number.

Also, I'm not sure how it will affect scaling with
var max_hours = 168,
graph_height_top = 16,
 graph_height_bottom = 16,
Since these values appear to be used for some mouse related functions.

I'm sure rfindley can give you a better answer, and maybe functionalize size scaling in the program

Edit: Also, before you mess with the javascript, try messing with the CSS in firebug or developer tools or etc. If you don't know what this is you're going to have a bad time.