Viewing PyGX Objects in HTML¶

pg.views provides a versatile, highly extensible view system that is universal across all PyGX objects. With the new pg.view API (together with pg.Content, pg.View concepts), users can generate the views of objects in various formats, such as HTML. Additionally, developers can easily add new views or extend existing ones by subclassing the pg.View class. The system also makes it simple to integrate user-defined types into each view for customized behavior.

In [ ]:

Copied!

!pip install pygx --pre
!pip install pygx --pre

In [24]:

Copied!

import pygx as pg
import pygx as pg

Viewing any object in HTML tree view¶

In [25]:

Copied!





class Foo:
  pass

class Bar(pg.Object):
  x: str
  y: int = 1

value = pg.Dict(
    x=1,
    y=[
        1,
        dict(a=[2, 3, 4]),
        'short string',
    ],
    z='This is a very long strong\n' * 10,
    w=[],
    a=1.2,
    b=2,
    c=None,
    d=True,
    e=Foo(),
    f=Bar('abc'),
    g=int,
)

# Try hovering the mouse over the title bar and keys of each item.
value
class Foo:
  pass

class Bar(pg.Object):
  x: str
  y: int = 1

value = pg.Dict(
    x=1,
    y=[
        1,
        dict(a=[2, 3, 4]),
        'short string',
    ],
    z='This is a very long strong\n' * 10,
    w=[],
    a=1.2,
    b=2,
    c=None,
    d=True,
    e=Foo(),
    f=Bar('abc'),
    g=int,
)

# Try hovering the mouse over the title bar and keys of each item.
value

Out[25]:

Dict(...)

x

int

1

y

List(...)

0

1

Dict(...)

a

List(...)

0y[1].a[0]	2
1y[1].a[1]	3
2y[1].a[2]	4

2

'short string'

z

str

This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong

w

List(...)

a

float

1.2

b

int

2

c

NoneType(...)

None

d

bool

True

e

Foo(...)

<__main__.Foo object at 0x32e992b95110>

f

Bar(...)

x

str

'abc'

y

int

1

g

type

Customizing the view¶

Use different key styles¶

In [26]:

Copied!

pg.view(value, key_style='label')
pg.view(value, key_style='label')

Out[26]:

Dict(...)

x

1

y

List(...)

0

1

Dict(...)

a

List(...)

0y[1].a[0]	2
1y[1].a[1]	3
2y[1].a[2]	4

2

'short string'

z

str

This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong

w

List(...)

a

1.2

b

2

c

None

d

True

e

Foo(...)

<__main__.Foo object at 0x32e992b95110>

f

Bar(...)

xf.x	'abc'
yf.y	1

g

type

Use `extra_flags` to specify component-specfic flags¶

In [27]:

Copied!

# Hide default values.
pg.view(Bar('abc', 1), extra_flags=dict(exclude_defaults=True))
# Hide default values.
pg.view(Bar('abc', 1), extra_flags=dict(exclude_defaults=True))

Out[27]:

Bar(...)

x

str

'abc'

Highlight/lowlight values¶

In [28]:

Copied!





pg.view(
  value,
  # Highlight all int and list or key is 'e'
  highlight=lambda k, v, p: isinstance(v, (int, list)) or k.key == 'e',
  # Lowlight keys named 'a', 'b' and 'c'.
  lowlight=lambda k, v, p: k.key in ['a', 'b', 'c']
)
pg.view(
  value,
  # Highlight all int and list or key is 'e'
  highlight=lambda k, v, p: isinstance(v, (int, list)) or k.key == 'e',
  # Lowlight keys named 'a', 'b' and 'c'.
  lowlight=lambda k, v, p: k.key in ['a', 'b', 'c']
)

Out[28]:

Dict(...)

xx
int
11

yy
List(...)
[
  1,
  {
    'a': [
      2,
      3,
      4
    ]
  },
  'short string'
]0y[0]1
1y[1]Dict(...)
{
  'a': [
    2,
    3,
    4
  ]
}ay[1].a
List(...)
[
  2,
  3,
  4
]0y[1].a[0]2
1y[1].a[1]3
2y[1].a[2]4
2y[2]'short string'

z

str

This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong

ww
List(...)
[]

a

float

1.2

bb
int
22

c

NoneType(...)

None

dd
bool
TrueTrue

ee
Foo(...)
<__main__.Foo object at 0x32e992b95110><__main__.Foo object at 0x32e992b95110>

f

Bar(...)

x

str

'abc'

yf.y
int
11

g

type

Collapsing nodes¶

In [29]:

Copied!

# Collapse at root.
pg.view(value, collapse_level=0)
# Collapse at root.
pg.view(value, collapse_level=0)

Out[29]:

Dict(...)

x

int

1

y

List(...)

0

1

Dict(...)

a

List(...)

0y[1].a[0]	2
1y[1].a[1]	3
2y[1].a[2]	4

2

'short string'

z

str

This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong

w

List(...)

a

float

1.2

b

int

2

c

NoneType(...)

None

d

bool

True

e

Foo(...)

<__main__.Foo object at 0x32e992b95110>

f

Bar(...)

x

str

'abc'

y

int

1

g

type

In [30]:

Copied!

# Uncollapse everything.
pg.view(value, collapse_level=None)
# Uncollapse everything.
pg.view(value, collapse_level=None)

Out[30]:

Dict(...)

x

int

1

y

List(...)

0

1

Dict(...)

a

List(...)

0y[1].a[0]	2
1y[1].a[1]	3
2y[1].a[2]	4

2

'short string'

z

str

This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong

w

List(...)

a

float

1.2

b

int

2

c

NoneType(...)

None

d

bool

True

e

Foo(...)

<__main__.Foo object at 0x32e992b95110>

f

Bar(...)

x

str

'abc'

y

int

1

g

type

In [31]:

Copied!





# Uncollapse the first level + selected nodes.
pg.view(
    value,
    collapse_level=1,
    uncollapse=['y[1].a']
)
# Uncollapse the first level + selected nodes.
pg.view(
    value,
    collapse_level=1,
    uncollapse=['y[1].a']
)

Out[31]:

Dict(...)

x

int

1

y

List(...)

0

1

Dict(...)

a

List(...)

0y[1].a[0]	2
1y[1].a[1]	3
2y[1].a[2]	4

2

'short string'

z

str

This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong

w

List(...)

a

float

1.2

b

int

2

c

NoneType(...)

None

d

bool

True

e

Foo(...)

<__main__.Foo object at 0x32e992b95110>

f

Bar(...)

x

str

'abc'

y

int

1

g

type

Show/hide tooltips¶

In [32]:

Copied!

pg.view(value, enable_summary_tooltip=False, enable_key_tooltip=True)
pg.view(value, enable_summary_tooltip=False, enable_key_tooltip=True)

Out[32]:

Dict(...)

x

int

1

y

List(...)

0

1

Dict(...)

a

List(...)

0y[1].a[0]	2
1y[1].a[1]	3
2y[1].a[2]	4

2

'short string'

z

str

This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong This is a very long strong

w

List(...)

a

float

1.2

b

int

2

c

NoneType(...)

None

d

bool

True

e

Foo(...)

<__main__.Foo object at 0x32e992b95110>

f

Bar(...)

x

str

'abc'

y

int

1

g

type

Use `pg.diff` to compare values.¶

In [33]:

Copied!

#pg.dev.reload(workspace='lf_html')
pg.diff(1, 1)
#pg.dev.reload(workspace='lf_html')
pg.diff(1, 1)

Out[33]:

Diff

In [34]:

Copied!





class Foo(pg.Object):
  x: int
  y: str = 'abc'

class Bar(Foo):
  pass

pg.diff(
    [0, Foo(x=1), Foo(x=2), 3],
    [0, Foo(x=1, y='def'), Bar(x=2)],
    mode='both'
)
class Foo(pg.Object):
  x: int
  y: str = 'abc'

class Bar(Foo):
  pass

pg.diff(
    [0, Foo(x=1), Foo(x=2), 3],
    [0, Foo(x=1, y='def'), Bar(x=2)],
    mode='both'
)

Out[34]:

List

0

1

Foo

x[1].x	1
y[1].y	'abc''def'

2

Foo(...)

x

int

2

y

str

'abc'

Bar(...)

x

int

2

y

str

'abc'

3

Customize HTML views for your objects¶

In [35]:

Copied!





# By implementing pg.views.HtmlTreeView.Extension, rendering methods are
# routed to the object's members. Check out
# https://github.com/google/pygx/blob/fcb53ebafd539e412ae0e6c730b8cf754e65108f/pygx/core/views/html/tree_view.py#L38-L191

class MyImage(pg.Object, pg.views.HtmlTreeView.Extension):
  url: str

  def _html_tree_view_content(self, *, view: pg.views.HtmlTreeView, **kwargs):
    kwargs.pop('parent', None)
    return pg.Html.element(
        'div',
        [
            pg.Html.element(
              'img',
              src=self.url
            ),
            view.complex_value(
              self.sym_init_args,
              parent=self,
              **kwargs
           )
        ]
    ).add_style(
        # Add or override CSS styles
        """
        .my-image .object_key{
          color: white;
          border: 1px solid white;
          background-color: red;
        }
        """
    )

pg.view(
  pg.Dict(
      x=1,
      y=MyImage(
          url='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRb8BMw3RWhIF-wAiHpwibf7h0SNZUZRa0qA0IQ-d5p3EuNL0zR'
      )
  ),
  collapse_level=None
)
# By implementing pg.views.HtmlTreeView.Extension, rendering methods are
# routed to the object's members. Check out
# https://github.com/google/pygx/blob/fcb53ebafd539e412ae0e6c730b8cf754e65108f/pygx/core/views/html/tree_view.py#L38-L191

class MyImage(pg.Object, pg.views.HtmlTreeView.Extension):
  url: str

  def _html_tree_view_content(self, *, view: pg.views.HtmlTreeView, **kwargs):
    kwargs.pop('parent', None)
    return pg.Html.element(
        'div',
        [
            pg.Html.element(
              'img',
              src=self.url
            ),
            view.complex_value(
              self.sym_init_args,
              parent=self,
              **kwargs
           )
        ]
    ).add_style(
        # Add or override CSS styles
        """
        .my-image .object_key{
          color: white;
          border: 1px solid white;
          background-color: red;
        }
        """
    )

pg.view(
  pg.Dict(
      x=1,
      y=MyImage(
          url='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRb8BMw3RWhIF-wAiHpwibf7h0SNZUZRa0qA0IQ-d5p3EuNL0zR'
      )
  ),
  collapse_level=None
)

Out[35]:

Dict(...)

x

int

1

y

MyImage(...)

No description has been provided for this image

url

str

https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRb8BMw3RWhIF-wAiHpwibf7h0SNZUZRa0qA0IQ-d5p3EuNL0zR

Viewing PyGX Objects in HTML¶

Viewing any object in HTML tree view¶

Customizing the view¶

Use different key styles¶

Use extra_flags to specify component-specfic flags¶

Highlight/lowlight values¶

Collapsing nodes¶

Show/hide tooltips¶

Use pg.diff to compare values.¶

Customize HTML views for your objects¶

Use `extra_flags` to specify component-specfic flags¶

Use `pg.diff` to compare values.¶