Insert a Menu and Anchor Tags in a Long Jupyter Notebook Output Cell

Download a previously stored dataframe

In [1]:
from pathlib import Path
import urllib.request
from urllib import parse
import pickle
from string import digits
from functools import partial

from IPython.display import HTML, Image, Markdown
In [2]:
(df,) = (
    pickle.loads(Path(fp).read_bytes())
    for fp, _ in (
        urllib.request.urlretrieve(
            (Path.home() / ".texpander" / "iowa_sports_pk_url").read_text()
        ),
    )
)

Display data frame

In [3]:
display(df)
xpath url sport sport_id sex
0 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/BBSB/TeamStand... Baseball B25923B5-D303-41CA-B9B3-DF2527D84CDD boys
1 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Basketball/Tea... Basketball 57C38F60-B323-4087-A557-9ED925DC546D boys
2 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Basketball/Tea... Basketball B657ECDF-ECD0-4429-810A-9F9274EC4AAA girls
3 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Bowling/TeamSt... Bowling DA3506E8-E4CA-4175-BF69-BEBBDC2FD878 boys
4 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Bowling/TeamSt... Bowling 0C6DFBCF-98C4-4B01-9F56-17B02E9E47E1 girls
5 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Golf/TeamStand... Fall Golf 92A34DE4-ACB3-4282-BF29-571A97DE1946 boys
6 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Football/TeamS... Football 91A308DE-5763-4DAA-8C03-9AF66611E0BC boys
7 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Golf/TeamStand... Golf 6DC124A1-D8C4-4F88-84EF-5C6B4FD4A688 girls
8 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Soccer/TeamSta... Soccer 9D4214D2-EBE6-429E-9005-C11D2A29C89B boys
9 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Soccer/TeamSta... Soccer 65E5DA09-90C6-45F5-847A-F9A84FD9C5B0 girls
10 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/BBSB/TeamStand... Softball D97DD7D0-0BEF-404A-B041-7E51ACFDBD16 girls
11 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Golf/TeamStand... Spring Golf FC614ADE-B5DA-4012-A95E-0FD2A594FE9D boys
12 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Swimming/Indiv... Swimming 139DCB57-4343-4FB8-BAF9-970E5D64597F boys
13 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Swimming/Indiv... Swimming 71F7113B-576F-4372-9E9B-4C746F251946 girls
14 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Tennis/TeamSta... Tennis 19786FF3-ADA3-4C7A-A94F-FAC0811118F5 boys
15 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Tennis/TeamSta... Tennis 6086C2DF-4661-4701-BFF1-3BB32C081B88 girls
16 /html/body/form/div/div[3]/table/tr[2]/td[1]/t... http://quikstatsiowa.com/Public/Track/Individu... Track & Field EB178641-26F1-464D-97F1-A1D101AE35D6 boys
17 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Track/Individu... Track & Field 93AAC882-9E72-4621-B16F-95F389BA7F15 girls
18 /html/body/form/div/div[3]/table/tr[2]/td[2]/t... http://quikstatsiowa.com/Public/Volleyball/Tea... Volleyball 83298383-D7D7-4670-9C6B-24DDB8B2E773 girls
In [4]:
from chamelboots import ChameleonTemplate as CT
from chamelboots import TalStatement as TS
from chamelboots.constants import FAKE, JoinWith
from chamelboots.html.utils import prettify_html

Define TAL statements

In [15]:
TSCS, TSR, TSA = (
    TS(*args)
    for args in (
        ("content", f"structure content"),
        ("repeat", "content items"),
        ("attributes", "attributes"),
    )
)
In [14]:
LINK = CT("a", (TSCS, TSA)).render
SPAN = partial(
    CT("span", (TSCS, TSA)).render, attributes=dict(style="font-size: 2.5rem;")
)
SPAN(content="foo")
Out[14]:
'<span style="font-size: 2.5rem;">foo</span>'

Create anchor tags

An html id cannot start with digits so strip them.

In [7]:
menu_items, anchors = zip(
    *(
        (
            LINK(
                content=f"{item.sex}' {item.sport}",
                attributes={
                    "href": f"#{(id_ := item.sport_id.strip(digits))}",
                    "id": (menu_id := f"menu-{id_}"),
                },
            ),
            LINK(
                content=SPAN(content="back to menu"),
                attributes={"id": id_, "href": f"#{menu_id}"},
            ),
        )
        for item in df.itertuples()
    )
)
In [8]:
list_items = prettify_html(
    CT("ul", (TSCS,)).render(content=CT("li", (TSR, TSCS)).render(items=menu_items))
)

Display truncated portion of HTML

In [9]:
print(JoinWith.LINES(list_items.splitlines()[:10]))
<ul>
 <li>
  <a href="#B25923B5-D303-41CA-B9B3-DF2527D84CDD" id="menu-B25923B5-D303-41CA-B9B3-DF2527D84CDD">
   boys' Baseball
  </a>
 </li>
 <li>
  <a href="#C38F60-B323-4087-A557-9ED925DC546D" id="menu-C38F60-B323-4087-A557-9ED925DC546D">
   boys' Basketball
  </a>

Anchors

In [10]:
anchors[:5]
Out[10]:
('<a id="B25923B5-D303-41CA-B9B3-DF2527D84CDD" href="#menu-B25923B5-D303-41CA-B9B3-DF2527D84CDD"><span style="font-size: 2.5rem;">back to menu</span></a>',
 '<a id="C38F60-B323-4087-A557-9ED925DC546D" href="#menu-C38F60-B323-4087-A557-9ED925DC546D"><span style="font-size: 2.5rem;">back to menu</span></a>',
 '<a id="B657ECDF-ECD0-4429-810A-9F9274EC4AAA" href="#menu-B657ECDF-ECD0-4429-810A-9F9274EC4AAA"><span style="font-size: 2.5rem;">back to menu</span></a>',
 '<a id="DA3506E8-E4CA-4175-BF69-BEBBDC2FD" href="#menu-DA3506E8-E4CA-4175-BF69-BEBBDC2FD"><span style="font-size: 2.5rem;">back to menu</span></a>',
 '<a id="C6DFBCF-98C4-4B01-9F56-17B02E9E47E" href="#menu-C6DFBCF-98C4-4B01-9F56-17B02E9E47E"><span style="font-size: 2.5rem;">back to menu</span></a>')

Display list of links.

Display scaled and cropped screenshots of each website page

In [12]:
from chamelboots.imageutils import get_scaled_screenshot
In [13]:
for anchor, item in zip(anchors, df.itertuples()):
    for item in (HTML(anchor), Image(filename=get_scaled_screenshot(item.url))):
        display(item)