Make template gallery #499

mariaschuld · 2020-02-06T08:21:23Z

Context:

The templates.rst file was outdated and needed the latest templates to be added. In the process I turned tables into a gallery, which is much more appealing.

Description of the Change:

Add custom directives for gallery items and turn tables into gallery.

Results only affect this tab:

Here is a sneak peak:

Benefits: User gets an idea of what the templates are on first glance.

Possible Drawbacks: We should make the gallery thumbnails wider to have less white space?

Related GitHub Issues: -

doc/conf.py

codecov · 2020-02-06T08:25:26Z

Codecov Report

Merging #499 into master will increase coverage by 0.12%.
The diff coverage is 76.19%.

@@            Coverage Diff             @@
##           master     #499      +/-   ##
==========================================
+ Coverage   98.89%   99.01%   +0.12%     
==========================================
  Files          74       71       -3     
  Lines        4695     4561     -134     
==========================================
- Hits         4643     4516     -127     
+ Misses         52       45       -7

Impacted Files	Coverage Δ
pennylane/qnodes/passthru.py	`88.88% <0%> (+1.79%)`	⬆️
pennylane/qnodes/base.py	`100% <100%> (ø)`	⬆️
pennylane/beta/__init__.py	`100% <0%> (ø)`	⬆️
pennylane/beta/plugins/__init__.py	`100% <0%> (ø)`	⬆️
pennylane/beta/plugins/default_tensor.py	`95.9% <0%> (ø)`	⬆️
pennylane/beta/plugins/default_tensor_tf.py	`92.17% <0%> (ø)`	⬆️
pennylane/interfaces/tf.py	`89.13% <0%> (ø)`	⬆️
pennylane/qnodes/device_jacobian.py	`90.9% <0%> (ø)`	⬆️
pennylane/collections/sum.py	`100% <0%> (ø)`	⬆️
... and 9 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 712b05b...d41f18c. Read the comment docs.

… into make_template_gallery

josh146

This is really beautiful, I love it!

Note, when I build the docs, I get the following errors:

/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/amplitude.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/angle.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/basis.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/displacement.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/qaoa.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/squeezing.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/layers/cvqnn.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/layers/random.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/layers/strongly_entangling.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/state_preparations/basis.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/state_preparations/mottonen.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/subroutines/interferometer.png

An issue with the path? Note that if you instead do /_static, sphinx treats this as an absolute path starting from the doc folder (avoiding relative path headaches).

However, I notice now that I can't see these 'failed' images anywhere, everything seems to be working...

doc/conf.py

doc/directives.py

doc/introduction/templates.rst

doc/_static/xanadu_gallery.css

antalszava

From my side it looks really amazing @mariaschuld ! :) Once the other comments are also addressed, I have no further objections. This makes the template library really attractive for users browsing the site

… into make_template_gallery

mariaschuld · 2020-02-10T11:00:59Z

This is really beautiful, I love it!

Note, when I build the docs, I get the following errors:

/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/amplitude.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/angle.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/basis.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/displacement.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/qaoa.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/embeddings/squeezing.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/layers/cvqnn.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/layers/random.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/layers/strongly_entangling.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/state_preparations/basis.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/state_preparations/mottonen.png
/home/josh/Dropbox/Work/Xanadu/pennylane/doc/introduction/templates.rst:: WARNING: image file not readable: ../_static/templates/subroutines/interferometer.png

An issue with the path? Note that if you instead do /_static, sphinx treats this as an absolute path starting from the doc folder (avoiding relative path headaches).

However, I notice now that I can't see these 'failed' images anywhere, everything seems to be working...

I tried for hours and cannot figure out why sphinx is behaving this way. Other options for the path are also not working. Maybe related to this: sphinx-gallery/sphinx-gallery#120 ?

josh146 · 2020-02-10T11:02:53Z

I'll try and look into it today!

mariaschuld · 2020-02-10T11:23:38Z

Runs without errors now, I used some code that was commented out in the walrus - I think sphinx takes images and saves them again in a reshaped/thumb version, which is the one it wants to import.

mariaschuld · 2020-02-10T11:25:30Z

From my side the only item on my wishlist is to make the images in the gallery items larger. I managed to rescale the cards themselves to be wider, but I cannot enlarge the image.
This is what I tired:

use sphinx_gallery.gen_rst.scale_image -> nothing happens
use :width: in html template -> shifts and rescales in a very strange fashion
change css -> only affects container

I think it would be great if they fill the entire upper part, as in normal bootstrap cards:

mariaschuld · 2020-02-10T21:05:42Z

Switched to cards and updated some pictures...

Looking much better now!

josh146 · 2020-02-10T22:47:29Z

Awesome! Couple of quick questions:

How does it deal with responsiveness? I.e. as you make the browser width smaller and smaller, does it scale properly?
Some of the cards seem taller than others?

I also like the new AmplitudeEmbedding diagram

mariaschuld · 2020-02-11T14:50:36Z

Scaling works ok, the cards move into double and then single columns. The is a glitch though, it doesn't fill up the last row nicely:

Single column works well

As for the size, I can't see a difference between cards. Which one did you spot? Should be regulated by the picture size, which should be the same by design.

josh146 · 2020-02-13T01:53:57Z

The three layers seem very subtly different heights (e.g., the baseline of StrongEnt seems to be below that of RandomLayers). A height difference could also explain that missing hole when resizing the template cards

mariaschuld · 2020-02-14T06:53:47Z

You were right @josh146. With the height and width of the image fixed the resizing problem disappears.

And this is the normal view:

… into make_template_gallery

josh146 · 2020-02-14T19:25:37Z

doc/directives.py

        <a href={link}>
-            <img class="card-img-top" src={thumbnail} alt="image not found">
+            <img class="card-img-top" src={thumbnail} alt="image not found" style="width: 13rem; height: 6rem;">


mariaschuld added 5 commits January 30, 2020 18:02

add template file

08af336

Merge branch 'master' of github.com:XanaduAI/pennylane

f750ac4

Merge branch 'master' of github.com:XanaduAI/pennylane

e120d80

design gallery

3c470ce

use custom directive and add more pics

3862ff6

mariaschuld requested a review from josh146 February 6, 2020 08:21

mariaschuld commented Feb 6, 2020

View reviewed changes

doc/conf.py Show resolved Hide resolved

add overview links

c3b3bc8

remove unnecessary files

dbc2955

mariaschuld requested a review from antalszava February 6, 2020 08:27

mariaschuld self-assigned this Feb 6, 2020

mariaschuld added documentation 📘 Documentation changes and updates review-ready 👌 PRs which are ready for review by someone from the core team. labels Feb 6, 2020

mariaschuld and others added 6 commits February 6, 2020 11:01

delete a <div>

6ea7c0f

Merge branch 'master' into make_template_gallery

183f518

Merge branch 'master' of github.com:XanaduAI/pennylane

01c731f

add sphinx_gallery to requirements

b9e2026

Merge branch 'make_template_gallery' of github.com:XanaduAI/pennylane…

75a4f07

… into make_template_gallery

fix css clashes

8385dfc

josh146 requested changes Feb 6, 2020

View reviewed changes

doc/conf.py Show resolved Hide resolved

doc/conf.py Show resolved Hide resolved

doc/directives.py Outdated Show resolved Hide resolved

doc/directives.py Outdated Show resolved Hide resolved

doc/introduction/templates.rst Show resolved Hide resolved

josh146 and others added 2 commits February 6, 2020 11:59

remove sphinx gallery

66dc128

Merge branch 'master' into make_template_gallery

204fac7

johannesjmeyer reviewed Feb 7, 2020

View reviewed changes

doc/introduction/templates.rst Outdated Show resolved Hide resolved

antalszava reviewed Feb 7, 2020

View reviewed changes

doc/_static/xanadu_gallery.css Outdated Show resolved Hide resolved

Merge branch 'master' into make_template_gallery

0ba8536

antalszava approved these changes Feb 7, 2020

View reviewed changes

antalszava and others added 3 commits February 7, 2020 16:58

Merge branch 'master' into make_template_gallery

2255460

Merge branch 'master' into make_template_gallery

d9edb9e

Merge branch 'master' of github.com:XanaduAI/pennylane

fcd89d4

mariaschuld added 4 commits February 10, 2020 09:51

fix merge conflict

a4aebce

Merge branch 'make_template_gallery' of github.com:XanaduAI/pennylane…

10f6c1b

… into make_template_gallery

polish text

9e261cc

make gallery items bigger

c82fef4

fix path problem

2b0226c

mariaschuld and others added 3 commits February 10, 2020 13:29

revert some unecessary changes

465feb7

fix CSS and directives

671192c

use cards for gallery

43b6276

mariaschuld requested a review from josh146 February 10, 2020 21:05

mariaschuld added 2 commits February 10, 2020 23:06

make cards look nice

a1e939c

fix conflict

d6f13ac

Merge branch 'master' into make_template_gallery

e62ffa8

mariaschuld added 2 commits February 14, 2020 08:55

fix size problem

9ef87a8

Merge branch 'make_template_gallery' of github.com:XanaduAI/pennylane…

712b05b

… into make_template_gallery

josh146 reviewed Feb 14, 2020

View reviewed changes

josh146 approved these changes Feb 14, 2020

View reviewed changes

josh146 added merge-ready ✔️ All tests pass and the PR is ready to be merged. and removed review-ready 👌 PRs which are ready for review by someone from the core team. labels Feb 16, 2020

Merge branch 'master' into make_template_gallery

d41f18c

mariaschuld merged commit c266f1a into master Feb 16, 2020

mariaschuld deleted the make_template_gallery branch March 30, 2020 07:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make template gallery #499

Make template gallery #499

mariaschuld commented Feb 6, 2020 •

edited

codecov bot commented Feb 6, 2020 •

edited

josh146 left a comment

antalszava left a comment

mariaschuld commented Feb 10, 2020

josh146 commented Feb 10, 2020

mariaschuld commented Feb 10, 2020

mariaschuld commented Feb 10, 2020 •

edited

mariaschuld commented Feb 10, 2020

josh146 commented Feb 10, 2020 •

edited

mariaschuld commented Feb 11, 2020

josh146 commented Feb 13, 2020

mariaschuld commented Feb 14, 2020 •

edited

josh146 Feb 14, 2020

Navigation Menu

Make template gallery #499

Make template gallery #499

Conversation

mariaschuld commented Feb 6, 2020 • edited

codecov bot commented Feb 6, 2020 • edited

Codecov Report

josh146 left a comment

Choose a reason for hiding this comment

antalszava left a comment

Choose a reason for hiding this comment

mariaschuld commented Feb 10, 2020

josh146 commented Feb 10, 2020

mariaschuld commented Feb 10, 2020

mariaschuld commented Feb 10, 2020 • edited

mariaschuld commented Feb 10, 2020

josh146 commented Feb 10, 2020 • edited

mariaschuld commented Feb 11, 2020

josh146 commented Feb 13, 2020

mariaschuld commented Feb 14, 2020 • edited

josh146 Feb 14, 2020

Choose a reason for hiding this comment

mariaschuld commented Feb 6, 2020 •

edited

codecov bot commented Feb 6, 2020 •

edited

mariaschuld commented Feb 10, 2020 •

edited

josh146 commented Feb 10, 2020 •

edited

mariaschuld commented Feb 14, 2020 •

edited