Maximum of 20 tabs in annotator docs

[LinasKo]

Search before asking

• I have searched the Supervision issues and found no similar bug report.

Bug

I recently discovered that when you have more than 20 tabs in our docs, it doesn't render the content beyond the 20th. The tab icon is visible, yet the content is not.

At present this is only relevant in the annotators page where the code and preview image is displayed at the top.

The bug is currently visible on the latest docs page - the BackgroundColor tab shows no contents. I have thoroughly tested it while adding the ComparisonAnnotator (#001f85ad), and in that case, the last 2 annotator content blocks don't show up. Lastly, if I reorder the tabs, once again - the final two don't show up.

I skimmed our code and the code of https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#syntax-tab-1, but couldn't find an issue. At this point, I'm not sure where it could be.

Environment

pip freeze:

anyio==4.5.2
appnope==0.1.4
argon2-cffi==23.1.0
argon2-cffi-bindings==21.2.0
arrow==1.3.0
asttokens==3.0.0
async-lru==2.0.4
attrs==24.2.0
babel==2.16.0
backcall==0.2.0
beautifulsoup4==4.12.3
bleach==6.1.0
build==1.2.2.post1
cachetools==5.5.0
cairocffi==1.7.1
CairoSVG==2.7.1
certifi==2024.8.30
cffi==1.17.1
cfgv==3.4.0
chardet==5.2.0
charset-normalizer==3.4.0
click==8.1.7
colorama==0.4.6
comm==0.2.2
contourpy==1.3.1
cssselect2==0.7.0
cycler==0.12.1
debugpy==1.8.9
decorator==5.1.1
defusedxml==0.7.1
distlib==0.3.9
docutils==0.21.2
executing==2.1.0
fastjsonschema==2.21.1
filelock==3.16.1
filetype==1.2.0
fonttools==4.55.2
fqdn==1.5.1
ghp-import==2.1.0
gitdb==4.0.11
GitPython==3.1.43
griffe==1.4.0
h11==0.14.0
httpcore==1.0.7
httpx==0.28.1
identify==2.6.1
idna==3.10
importlib_metadata==8.5.0
importlib_resources==6.4.5
iniconfig==2.0.0
ipykernel==6.29.5
ipython==8.12.3
ipywidgets==8.1.5
isoduration==20.11.0
jaraco.classes==3.4.0
jaraco.context==6.0.1
jaraco.functools==4.1.0
jedi==0.19.2
Jinja2==3.1.4
json5==0.10.0
jsonpointer==3.0.0
jsonschema==4.23.0
jsonschema-specifications==2023.12.1
jupyter-events==0.10.0
jupyter-lsp==2.2.5
jupyter_client==8.6.3
jupyter_core==5.7.2
jupyter_server==2.14.2
jupyter_server_terminals==0.5.3
jupyterlab==4.3.2
jupyterlab_pygments==0.3.0
jupyterlab_server==2.27.3
jupyterlab_widgets==3.0.13
jupytext==1.16.4
keyring==25.5.0
kiwisolver==1.4.7
Markdown==3.7
markdown-it-py==3.0.0
MarkupSafe==2.1.5
matplotlib==3.9.3
matplotlib-inline==0.1.7
mdit-py-plugins==0.4.2
mdurl==0.1.2
mergedeep==1.3.4
mike==2.1.3
mistune==3.0.2
mkdocs==1.6.1
mkdocs-autorefs==1.2.0
mkdocs-get-deps==0.2.0
mkdocs-git-committers-plugin-2==2.4.1
mkdocs-git-revision-date-localized-plugin==1.3.0
mkdocs-jupyter==0.24.8
mkdocs-material==9.5.48
mkdocs-material-extensions==1.3.1
mkdocstrings==0.26.1
mkdocstrings-python==1.11.1
more-itertools==10.5.0
mypy==1.13.0
mypy-extensions==1.0.0
nbclient==0.10.1
nbconvert==7.16.4
nbformat==5.10.4
nest-asyncio==1.6.0
nh3==0.2.19
nodeenv==1.9.1
notebook==7.3.1
notebook_shim==0.2.4
numpy==2.2.0
opencv-python==4.10.0.84
opencv-python-headless==4.10.0.84
overrides==7.7.0
packaging==24.2
paginate==0.5.7
pandocfilters==1.5.1
parso==0.8.4
pathspec==0.12.1
pexpect==4.9.0
pickleshare==0.7.5
pillow==10.4.0
pkginfo==1.12.0
platformdirs==4.3.6
pluggy==1.5.0
pre-commit==3.5.0
prometheus_client==0.21.1
prompt_toolkit==3.0.48
psutil==6.1.0
ptyprocess==0.7.0
pure_eval==0.2.3
pycparser==2.22
Pygments==2.18.0
pymdown-extensions==10.12
pyparsing==3.1.4
pyproject-api==1.8.0
pyproject_hooks==1.2.0
pytest==8.3.4
python-dateutil==2.9.0.post0
python-dotenv==1.0.1
python-json-logger==2.0.7
pytz==2024.2
PyYAML==6.0.2
pyyaml_env_tag==0.1
pyzmq==26.2.0
readme_renderer==43.0
referencing==0.35.1
regex==2024.11.6
requests==2.32.3
requests-toolbelt==1.0.0
rfc3339-validator==0.1.4
rfc3986==2.0.0
rfc3986-validator==0.1.1
rich==13.9.4
roboflow==1.1.49
rpds-py==0.20.1
ruff==0.8.2
scipy==1.14.1
Send2Trash==1.8.3
setuptools==75.3.0
six==1.17.0
smmap==5.0.1
sniffio==1.3.1
soupsieve==2.6
stack-data==0.6.3
-e git+ssh://[email protected]/roboflow/supervision.git@001f85ad0f79a9ebd38094437adfc88d4fc1f7dc#egg=supervision
terminado==0.18.1
tinycss2==1.4.0
tornado==6.4.2
tox==4.23.2
tqdm==4.67.1
traitlets==5.14.3
twine==6.0.1
types-python-dateutil==2.9.0.20241206
typing_extensions==4.12.2
uri-template==1.3.0
urllib3==2.2.3
verspec==0.1.0
virtualenv==20.28.0
watchdog==4.0.2
wcwidth==0.2.13
webcolors==24.8.0
webencodings==0.5.1
websocket-client==1.8.0
wheel==0.45.1
widgetsnbextension==4.0.13
zipp==3.20.2

Minimal Reproducible Example

Additional

Docs can be run after installing the repo withpoetry install --with-dev and running mkdocs serve.

Are you willing to submit a PR?

• Yes I'd like to help by submitting a PR!

[onuralpszr]

@SkalskiP I also investigate this issue, in mkdocs-material and it is indeed 20 tab is hard limit

Related issue: squidfunk/mkdocs-material#6665
Answer from maintainer : squidfunk/mkdocs-material#6665 (comment)

He clearly indicate that 20 is limit and show codes too. And for passing this limit it require custom build and of course patch those numbers and build it.

For fixing this issue, we can split annotators tab ("Content Tab" is name of the tab in mkdocs-material) or we can think something else as well.

Reference Document: https://squidfunk.github.io/mkdocs-material/reference/content-tabs/#content-tabs

[SkalskiP]

@onuralpszr, it looks like we won't be able to do anything about it?

[onuralpszr]

@onuralpszr, it looks like we won't be able to do anything about it?

• We can split those tabs and make it 2 rows (10/11) to show them all
• We can remove tabs (they are technically duplicates because we already in the page but selection wise it is easier to notice)
• We can create a separate page dedicated to example usage of annotators (Because they are too many so)

I don't know else we can do, that's all come to my mind.

[miteshashar]

I was browsing through this issue and given that the constraints in squidfunk/mkdocs-material#6665 are external and beyond the degree of control of supervision maintainers, the solution has to be to operate & think within those constraints.

It could be a good idea to look at breaking this into categories and use nested tabs. It will require enabling the SuperFences extension, if not already enabled.

To illustrate what I mean, the current tabs could be categorized in the below fashion. There could be lesser top level categories too – I just went semantically more exhaustive.

Outlines	Shading	Markers	Labels	Transformative	Others
Box	Color	Dot	Label	Crop	PercentageBar
RoundBox	Halo	Triangle	RichLabel	Blur	Icon
BoxCorner	Mask			Pixelate	Trace
Circle					HeatMap
Ellipse					BackgroundColor
Polygon