Make _repr_html_ look like _repr_json_ output (#1142)

* Make html repr look like json repr

* Make index start at 0

* Make sure little triangle shows up in jupyter notebook

* Fix indentation

* Add tests for more objects

* Update some notebooks

* Do not transform hrefs

* Update changelog

* Simplify html a bit

* Remove a few spaces

CHANGELOG.md

@@ -32,6 +32,7 @@
 - EO extension updated to v1.1.0 ([#1131](https://github.com/stac-utils/pystac/pull/1131))
 - Use `id` in STACTypeError instead of entire dict ([#1126](https://github.com/stac-utils/pystac/pull/1126))
 - Make sure that `get_items` is backwards compatible ([#1139](https://github.com/stac-utils/pystac/pull/1139))
+- Make `_repr_html_` look like `_repr_json_` output ([#1142](https://github.com/stac-utils/pystac/pull/1142))
 
 ### Deprecated
 

pystac/asset.py

@@ -181,8 +181,8 @@ def __repr__(self) -> str:
     def _repr_html_(self) -> str:
         jinja_env = get_jinja_env()
         if jinja_env:
-            template = jinja_env.get_template("Asset.jinja2")
-            return str(template.render(asset=self))
+            template = jinja_env.get_template("JSON.jinja2")
+            return str(template.render(dict=self.to_dict()))
         else:
             return escape(repr(self))
 

pystac/catalog.py

@@ -3,7 +3,6 @@
 import os
 import warnings
 from copy import deepcopy
-from html import escape
 from itertools import chain
 from typing import (
     TYPE_CHECKING,
@@ -24,7 +23,6 @@
 import pystac
 from pystac.cache import ResolvedObjectCache
 from pystac.errors import STACTypeError
-from pystac.html.jinja_env import get_jinja_env
 from pystac.layout import (
     BestPracticesLayoutStrategy,
     HrefLayoutStrategy,
@@ -207,14 +205,6 @@ def __init__(
     def __repr__(self) -> str:
         return "<Catalog id={}>".format(self.id)
 
-    def _repr_html_(self) -> str:
-        jinja_env = get_jinja_env()
-        if jinja_env:
-            template = jinja_env.get_template("Catalog.jinja2")
-            return str(template.render(catalog=self))
-        else:
-            return escape(repr(self))
-
     def set_root(self, root: Optional["Catalog"]) -> None:
         STACObject.set_root(self, root)
         if root is not None:

pystac/collection.py

@@ -3,7 +3,6 @@
 import warnings
 from copy import deepcopy
 from datetime import datetime
-from html import escape
 from typing import (
     TYPE_CHECKING,
     Any,
@@ -25,7 +24,6 @@
 from pystac.asset import Asset
 from pystac.catalog import Catalog
 from pystac.errors import DeprecatedWarning, ExtensionNotImplemented, STACTypeError
-from pystac.html.jinja_env import get_jinja_env
 from pystac.layout import HrefLayoutStrategy
 from pystac.link import Link
 from pystac.provider import Provider
@@ -540,14 +538,6 @@ def __init__(
     def __repr__(self) -> str:
         return "<Collection id={}>".format(self.id)
 
-    def _repr_html_(self) -> str:
-        jinja_env = get_jinja_env()
-        if jinja_env:
-            template = jinja_env.get_template("Collection.jinja2")
-            return str(template.render(catalog=self))
-        else:
-            return escape(repr(self))
-
     def add_item(
         self,
         item: Item,

pystac/html/JSON.jinja2

@@ -0,0 +1,29 @@
+{% import 'Macros.jinja2' as macros %}
+
+<style>
+.pystac-summary {
+    cursor: pointer;
+    display:list-item;
+}
+.pystac-key {
+    color: rgb(0, 128, 0);
+    font-weight: 700;
+}
+.pystac-key-value {
+    display: inline-block;
+    margin: 0px 0.5em 0px 0px;
+}
+</style>
+<div class="jp-RenderedJSON jp-mod-trusted jp-OutputArea-output">
+    <div class="container" style="line-height: normal;">
+        <ul style="padding: 0px; margin: 0px; list-style: none; display: block;">
+            {% for key, value in dict.items() %}
+                {% if value is iterable and (value is not string and value is not mapping) %}
+                    {{ macros.list(key, value) }}
+                {% else %}
+                    {{ macros.scalar(key, value) }}
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </div>
+</div>