ENH: Rearrange navigation for new leactures, add filtering

DrDrij commented 8 months ago

In progress.

Adjust primary navigation order, add lectures
Add 6 new lectures to lecture page
Change layout to grid
Add filtering
Add new metadata field for topics

DrDrij commented 8 months ago

@mmcky Just having a fiddle to try to build the branch on my fork. Is there an easy way to build this to demo to the team? Thanks :)

mmcky commented 8 months ago

@DrDrij I will setup netlify previews today if that would help.

DrDrij commented 8 months ago

Thanks Matt. Ace. I’ll finish the tasks and address any feedback for your tomorrow.

On Mon, 4 Mar 2024 at 11:24 pm, Matt McKay @.***> wrote:

@DrDrij https://github.com/DrDrij I will setup netlify previews today if that would help.

— Reply to this email directly, view it on GitHub https://github.com/QuantEcon/website/pull/121#issuecomment-1977573057, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABM5AXOY2Z5TWQS3PEEPFKTYWTYBXAVCNFSM6AAAAABEFW6WQSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZXGU3TGMBVG4 . You are receiving this because you were mentioned.Message ID: @.***>

mmcky commented 8 months ago

@DrDrij just to confirm the netlify preview mechanism is activated -- but it is part of the checks (as this project is built with jekyll -- and netlify does the building rather than github actions)

Here is the latest link: https://deploy-preview-121--sleepy-aryabhata-461b8b.netlify.app/

and the lecture page

mmcky commented 8 months ago

@DrDrij I have some ideas for the lecture page that I will mockup now.

mmcky commented 8 months ago

@DrDrij what do you think about this idea

Have two filters that include Difficulty Level and Language

that have sections for Economics and Datascience

I need to think through the "optimal" dimensions to slice through.

mmcky commented 8 months ago

@jstac when you're up to it would appreciate your thoughts on what dimensions to best filter to find the lectures of interest.

I think topic is the dimension with the most variance.

While programming language is a natural choice -- it is really one 1 x julia vs 8 x python so not the best dimension.

Maybe we could do

Introductory (lecture-python-programming, lecture-intro)
Economics (lecture-intro, lecture-jax, lecture-dynamics, lecture-dle, lecture-eqm ...)
Statistics (lecture-stats) # only one for now so maybe not so useful and roll into tools and techniques
Tools & Techniques (lecture-python-programming, lecture-stats

jstac commented 8 months ago

That looks like a pretty good split @mmcky

How about this similar split?

Introductory (lecture-python-programming, lecture-intro)
Programming (lecture-python-programming, jax, julia)
Topics (various topics lectures)
Statistics (lecture-stats + data science)

DrDrij commented 8 months ago

Thanks @jstac and @mmcky. I'll rearrange the metadata fields to match the new topics and we can adjust from there.

Kate had a suggestion of a little "New" badge or dog-ear on the lectures series recently released. I'll pop in an example and we can hide it if it's not really useful for the audience.

netlify[bot] commented 8 months ago

Deploy Preview for grand-swan-ca5201 ready!

Name	Link
Latest commit	e93e260b4f71999dbe4c4ed7f2cafb087857efd9
Latest deploy log	https://app.netlify.com/sites/grand-swan-ca5201/deploys/6630dfb20aeccc000832aaa6
Deploy Preview	https://deploy-preview-121--grand-swan-ca5201.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

DrDrij commented 8 months ago

Yeah so here is the new mockup — pushed changes to the PR branch.

https://deploy-preview-121--grand-swan-ca5201.netlify.app/lectures/

I had a little fun with it and added the topic filtering you two suggested as well as a "ski slope difficulty indicator icon" and the "new" badges.

Question: how would you like the page to be ordered? eg. Alphabetically or..?

Looking forward to feedback.

lectures-difficulty-topic-filtering1

mmcky commented 8 months ago

thanks @DrDrij now I want to go skiing :-)

@DrDrij I was wondering if when All is selected what would it look like to we could have subheadings and them sorted into the categories

Introductory
-------------
<boxes in this category>

Topics
------

and then when a filter is selected the subheadings would just disappear and show the lectures in that filter?

My thinking here is when people land on the page -- it is immediately clear what the introductory lecture series are. Having them in pre-sorted groups might help with that search cost.

I would then say sorting (within the filter groups) would be done by popularity or expected popularity. What do you think @jstac

mmcky commented 8 months ago

@DrDrij I like the new -- are they programmed to disappear after say 6 months of the publish date?

I am now wondering if we could link an updated tag based on recent live publish runs.

jstac commented 8 months ago

Nice :-)

Similar to @mmcky 's comment, but maybe a bit easier, perhaps we could order the lectures by difficulty, and then by alphabetical.

So the "All" display shows the green ones first, alphabetically ordered, the blue ones next, alphabetically ordered, and the black ones last, alphabetically ordered.

Then we wouldn't really need the subheadings because all the green ones would be at the top, etc.

mmcky commented 8 months ago

Nice :-)

Similar to @mmcky 's comment, but maybe a bit easier, perhaps we could order the lectures by difficulty, and then by alphabetical.

So the "All" display shows the green ones first, alphabetically ordered, the blue ones next, alphabetically ordered, and the black ones last, alphabetically ordered.

Then we wouldn't really need the subheadings because all the green ones would be at the top, etc.

Nice Idea @jstac

DrDrij commented 8 months ago

How's this @mmcky @jstac ? Did interpret your comments correctly?

Ahh just noticed not alphabetical in their groupings. Push coming.

FireShot Capture 061 - Lectures – QuantEcon - 127 0 0 1

DrDrij commented 8 months ago

Is the idea right? I get can't around the alpha and difficulty sorting at this hour and will wrap up tomorrow.

That looks like what it should.

mmcky commented 8 months ago

thanks @DrDrij

What @jstac and I proposed is to have groups of lectures in the following categories (note: where some lecture series belong to one or more groups). Here the categories are aligned with overall motivation of the series

Group 1: Introductory (lecture-python-programming, lecture-intro) - group colour green (or friendly colour) Group 2: Programming (lecture-python-programming, jax, Julia) Group 3: Topics (various topics lectures) Group 4: Statistics (lecture-stats + data science)

@jstac what do you think about Topics being called Economics? (but then not sure where lecture-tools-techniques would fit in) 🤔

jstac commented 8 months ago

Thanks @DrDrij @mmcky

My idea of "Topics" is that it covers the specialized topics courses that you do in grad studies after you do the core coursework.

We could change it to "Advanced Topics"?

mmcky commented 8 months ago

Thanks @DrDrij @mmcky

My idea of "Topics" is that it covers the specialized topics courses that you do in grad studies after you do the core coursework.

We could change it to "Advanced Topics"?

thanks @jstac I agree -- that makes a lot of sense. I think either works. Perhaps let's keep it as Topics and we could add a difficulty level indicator if needed. We may have other topics in the future that aren't Advanced

DrDrij commented 8 months ago

Ok folks, I think I get it.

Everything is grouped into difficulty levels and then listed alphabetically. The full set will have green, then blue, and then black icons.

The row of filters up top are for topics, seperate from either grouping above. Selecting a filter will show a subset of lectures that have had that topic assigned to them. Each lecture will have a minimum of 1 topic, but can have multiple.

The possible topics for each lecture will be:

Group 1: Introductory
Group 2: Programming
Group 3: Topics
Group 4: Statistics

If that is all too confusing, how about I drop the difficulty icons and replace them with badges?

Example:

mmcky commented 7 months ago

thanks @DrDrij let me know if you need any more specific definitions of the groups. Looking forward to seeing this updated.

DrDrij commented 7 months ago

@mmcky I think this is ready to go. @jstac Does that look like what you have in mind?

https://deploy-preview-121--grand-swan-ca5201.netlify.app/lectures/#filter=1 (Please clear cache)

mmcky commented 7 months ago

thanks @DrDrij nice work!

Just a few quick questions:

[x] The structure is looking good - can I help with by populating the lecture descriptions so we can preview it with Tom?
[ ] can the new: key use new: {{ true / false }}? I would find that more intuitive then 1

Future Idea:

[ ] would it be possible to add a published: {{ date }} field embedded somewhere on the sites themselves and show an updated tag for lectures that have been updated within the last month (or so).

mmcky commented 7 months ago

thanks @DrDrij I was able to update the metadata for each lecture to remove the lorem ipsom

mmcky commented 7 months ago

@jstac @DrDrij

latest preview is available here

https://deploy-preview-121--sleepy-aryabhata-461b8b.netlify.app/lectures/#filter=*

mmcky commented 7 months ago

@jstac @DrDrij

latest preview is available here

https://deploy-preview-121--sleepy-aryabhata-461b8b.netlify.app/lectures/#filter=*

@jstac I feel the This website text is redundant in this context -- perhaps they can all be "A set of lectures on ..."

jstac commented 7 months ago

+1 regarding the change to "This webite..." Good catch.

I think we will have to do a manual ordering of the lectures in each section. For example, in

the order should be reversed -- python programming first, intro lectures next, intermediate one last.

That's the order they should be read in...

mmcky commented 7 months ago

+1 regarding the change to "This webite..." Good catch.

I think we will have to do a manual ordering of the lectures in each section. For example, in

the order should be reversed -- python programming first, intro lectures next, intermediate one last.

That's the order they should be read in...

+1 on the manual ordering -- I think that is a good idea.

@DrDrij -- should that be set within groups or by the order: setting in the md files?

In the topics section @jstac do you think we can set an order (for reading) or just an order of interest?

DrDrij commented 7 months ago

Ahh yeah sorry for łka i've been looking at it for so long I forgot it was just all lorem ipsum. Thanks @mmcky

Ok so I will add another metadata name/key pair for ordering.

We can then prioritise that and see how we feel about it.

Sorting by topic, order...

I think that means order by name and difficulty becomes obsolete?

DrDrij commented 7 months ago

Yes to everything you’ve mentioned.

On Fri, 15 Mar 2024 at 12:43 am, Matt McKay @.***> wrote:

thanks @DrDrij https://github.com/DrDrij nice work!

Just a few quick questions:

The structure is looking good - can I help with by populating the lecture descriptions so we can preview it with Tom?

can the new: key use new: {{ true / false }}? I would find that more intuitive then 1

Future Idea:

would it be possible to add a published: {{ date }} field embedded somewhere on the sites themselves and show an updated tag for lectures that have been updated within the last month (or so).

— Reply to this email directly, view it on GitHub https://github.com/QuantEcon/website/pull/121#issuecomment-1998654604, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABM5AXOA6VK2V5NLXYDNMT3YYIYYVAVCNFSM6AAAAABEFW6WQSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJYGY2TINRQGQ . You are receiving this because you were mentioned.Message ID: @.***>

mmcky commented 7 months ago

@DrDrij I have updated the lecture series names.

If you have time early this week can we meet up to finalise this so we can merge. Thanks.

mmcky commented 7 months ago

@DrDrij with the All category I think it would be most intuitive to sort by Group and then by Group Order so that the order in All is the same as the Groups -- it's just that they are all visible. What do you think?

mmcky commented 7 months ago

from @jstac

With all the additions there's now a few too many colors --- perhaps we should drop the "new" labels?

Rather than opening on "All", which is probably a bit bewildering, perhaps it should open on "Introductory" by default and "All" should be the last option.

Once we switch to this default, perhaps having a single column of boxes is going to be simpler and cleaner.

In "Introductory", the order should be "Python Programming...", "A First...", --- and I suppose the intermediate one will be gone?

With "Programming", it should be "Python Programming...", the JAX lectures, and then the Julia lectures (which are perhaps falling a bit behind -- I haven't seen many updates).

With "Topics" and "Statistics" I think you can choose. With "All" it should be the easy ones first.

DrDrij commented 7 months ago

@DrDrij I have updated the lecture series names.

If you have time early this week can we meet up to finalise this so we can merge. Thanks.

Defiantly- I will be home by my machine in roughly 24 hours - and push through all the feedback on Tuesday to our branch. How about we arrange a time to chat after that @mmcky

DrDrij commented 7 months ago

Getting there. Initial layout shows all instead of just Introduction (perhaps feature not bug?). However, GitHub giving warning of code vulnerabilities. Will look into that tomorrow.

DrDrij commented 7 months ago

Order is now preserved from my testing, had to make certain the value was treated as an integer for items over 9...

mmcky commented 7 months ago

thanks @DrDrij I will loop through and edit the metadata to remove some duplicates and misclassified lectures

mmcky commented 7 months ago

@DrDrij update the metadata is not super easy. Maybe we can investigate a central yml file at some point, but let's not worry to much for now.

mmcky commented 7 months ago

@DrDrij doesn't look like All is in the same order as the groups (listed one after the other)

DrDrij commented 7 months ago

[x] All is in the same order as the groups
[x] Group ordering
[ ] Central YML file?
[x] Dropped ski-related icons for difficulty, replaced with number
[x] Adjust primary navigation order, add lectures
[x] Add 6 new lectures to lecture page
[x] Change layout to grid
[x] Add filtering
[x] Add new metadata field for topics

mmcky commented 7 months ago

thanks @DrDrij for your work here. We are getting close.

I prefer the colour coding (for level of difficulty) over the number (as I get confused re: is it an order etc.) I think it is great to drop the new but a little bit of colour might be nice.

DrDrij commented 7 months ago

@DrDrij doesn't look like All is in the same order as the groups (listed one after the other)

Is this one fixed for you @mmcky ?

Ahh yes it's all coming back to me now. So I attempted to make the topic and order into 2D arrays. The data was lining up as expected but the combination of the isotope filtering plugin and liquid writing out the content was not producing a result I could work with.

Will update you again shortly..

DrDrij commented 7 months ago

Okie. @mmcky Switched back to the colour coding difficulty system. I think it's much nicer than having the digit there as you say. I think this is just about ready to go — however, I will need to figure out a clean way to order via topics. order: 1, 2 Doesn't respect the the topic the order belongs to. We could have:

order: 4, 6
topic: Introductory, Topics

topic: Introductory 4, Topics 6

That is potentially the simplest. Otherwise we need to go into array such as:

topics:
- Introductory
  4
- Topics
  6

Any preference?

mmcky commented 7 months ago

@DrDrij This one

order: 4, 6
topic: Introductory, Topics

is the one I've done so far. It wasn't easy to edit.

This

topic: Introductory 4, Topics 6

would also be fine and we can grep the order and categories in one search which is kind of nice.

It would be easier if we could define the order in single file (_sorting.yml) but no worries if that is not possible.

mmcky commented 7 months ago

@DrDrij let me know when you've settled on a convention and the sorting is working -- then I think we can merge this and iterate from there.

DrDrij commented 7 months ago

Are we potentially overthinking this? It appears to me it's just an edge case or two lectures series that we could push to the front, and in 'all' group them by the filter order? Just a thought.

Anyway, disregarding that I am assuming the _sorted.yml will look something like this @mmcky:

Introductory
- A First Course in Quantitative Economics
- An introduction to quantitative economics using Python.
- An introductory set of lectures on economic dynamics.
- A series of lectures on programming, data science, and economics.
- A set of lectures on Python programming for economics and finance.

Programming
- Python Programming for Economics and Finance
- A set of lectures on Python programming for economics and finance.
- A set of lectures on quantitative economic modeling using GPUs and Google JAX.
- A set of lectures on quantitative economic modeling.

Topic

~~~~~~~~~~

In this case, mapby we should use something a bit less user–input-prone for the title of each lecture series? An increasing digit? Series of chars?

mmcky commented 7 months ago

Are we potentially overthinking this? It appears to me it's just an edge case or two lectures series that we could push to the front, and in 'all' group them by the filter order? Just a thought.

Anyway, disregarding that I am assuming the _sorted.yml will look something like this @mmcky:
Introductory
- A First Course in Quantitative Economics
- An introduction to quantitative economics using Python.
- An introductory set of lectures on economic dynamics.
- A series of lectures on programming, data science, and economics.
- A set of lectures on Python programming for economics and finance.

Programming
- Python Programming for Economics and Finance
- A set of lectures on Python programming for economics and finance.
- A set of lectures on quantitative economic modeling using GPUs and Google JAX.
- A set of lectures on quantitative economic modeling.

Topic

~~~~~~~~~~
In this case, mapby we should use something a bit less user–input-prone for the title of each lecture series? An increasing digit? Series of chars?

@DrDrij yeah I definitely don't think we should sort by the titles. (we would want to specify the docname probably).

I am happy to work with what we have if we can get the sorting to work with the two levels. (Sorted by Group then Order in the all window)

DrDrij commented 7 months ago

Ok @mmcky I need just jump off this for a short while. I think the display is tidy enough to go out as a beta.

I will come back to this after another piece of work I am doing. I am 100% certain that I can get the ordering to match that which is present in the metadata of each lecture-series document rather than alphabetical ordering in the topic groups.

Please give me your honest opinion and I'd be personally satisfied to get it running the way we want. Also please let me know if the full functionality is urgent and required for a demonstration.

Cheers.

mmcky commented 7 months ago

thanks @DrDrij can I go ahead with the plan re: metadata

order: <number>
topic: <name> <number>, <name> <number>

QuantEcon / website