Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Invisible lines 🐛 #149

Closed
jsappl opened this issue Jan 19, 2024 · 5 comments · Fixed by #150
Closed

Invisible lines 🐛 #149

jsappl opened this issue Jan 19, 2024 · 5 comments · Fixed by #150
Assignees
@mattseddon

Comments

@jsappl
Copy link

jsappl commented Jan 19, 2024

Which operating system and Python version are you using?

  • Operating System: Arch Linux
  • Kernel: Linux 6.6.10-arch1-1
  • Architecture: x86-64
  • Python: 3.9.18

Which version of this project are you using?

dvc-render 1.0.0

What did you do?

"""Minimal working example to reproduce bug."""

from dvc_render import VegaRenderer, render_html

if __name__ == "__main__":
    data = [
        {"x": "-1", "y": "-1", "rev": "a"},
        {"x": "1", "y": "1", "rev": "a"},
        {"x": "-1", "y": "1", "rev": "b"},
        {"x": "1", "y": "-1", "rev": "b"},
    ]

    properties = {
        "x": "x",
        "y": "y",
        "title": "mwe",
        "template": "simple",
    }

    render_html([VegaRenderer(data, "foo", **properties)], "report.html")

What did you expect to see?

Two lines colored according to revs a and b.

lines_visible

What did you see instead?

Nothing, lines were invisible.

lines_invisible

HTML that was produced using render_html.

<!doctype html>
<html>
  <head>
    <title>DVC Plot</title>

    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>

    <style>
      table {
        border-spacing: 15px;
      }
    </style>
  </head>
  <body>
    <div id="foo">
      <script type="text/javascript">
        var spec = {
          $schema: "https://vega.github.io/schema/vega-lite/v5.json",
          data: {
            values: [
              { x: "-1", y: "-1", rev: "a" },
              { x: "1", y: "1", rev: "a" },
              { x: "-1", y: "1", rev: "b" },
              { x: "1", y: "-1", rev: "b" },
            ],
          },
          title: "mwe",
          params: [{ name: "grid", select: "interval", bind: "scales" }],
          width: 300,
          height: 300,
          mark: { type: "line", tooltip: { content: "data" } },
          encoding: {
            x: { field: "x", type: "quantitative", title: "x" },
            y: {
              field: "y",
              type: "quantitative",
              title: "y",
              scale: { zero: false },
            },
            color: { field: "rev", scale: { domain: [], range: [] } },
            strokeDash: {},
            tooltip: [{ field: "rev" }, { field: "x" }, { field: "y" }],
          },
        };
        vegaEmbed("#foo", spec);
      </script>
    </div>
  </body>
</html>

Problem Source

I managed to boil it down to this.

color: { field: "rev", scale: { domain: [], range: [] } }

After removing the empty scale field the HTML plot was working as intended.
@jsappl
Copy link
Author

jsappl commented Jan 19, 2024

Adding

"revs_with_datapoints": ["a", "b"]

to properties also fixes the issue.

@shcheklein
Copy link
Member

@mattseddon could you please take a look when you have time, seems to be related to the new anchors that we have.

@mattseddon mattseddon self-assigned this Jan 20, 2024
@mattseddon
Copy link
Member

The behaviour is expected. To be completely honest I didn't think that anyone was using this package directly (i.e. outside of DVC). I can add a patch for the behaviour when revs_with_datapoints is not provided.

@mattseddon mattseddon mentioned this issue Jan 22, 2024
Merged
@dberenbaum
Copy link
Contributor

@jsappl Can you explain how you are using it and why you want to do so without revs_with_datapoints?

@jsappl
Copy link
Author

jsappl commented Jan 22, 2024

First of all, thank you for addressing the issue so promptly. I am using dvc-render not as a standalone package but as a regular dependency of dvclive. My package versions:

  • dvc 3.40.0
  • dvclive 3.5.1
  • dvc-render 1.0.0

I came across this issue while training a model and generating the HTML report using Live. Here's an MWE. Hover info works though.

"""Minimal working example with Live."""

from dvclive import Live

with Live(report="html") as live:
    for y in range(2):
        live.log_metric("y", y)
        live.next_step()

report

Generated HTML report.

<!doctype html>
<html>
  <head>
    <meta http-equiv="refresh" content="5" />
    <title>DVC Plot</title>

    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>

    <style>
      table {
        border-spacing: 15px;
      }
    </style>
  </head>
  <body>
    <div id="metrics_json" style="text-align: center; padding: 10x">
      <p>metrics_json</p>
      <div style="display: flex; justify-content: center">
        <table>
          <thead>
            <tr>
              <th style="text-align: right">y</th>
              <th style="text-align: right">step</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="text-align: right">1</td>
              <td style="text-align: right">1</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div id="static_y">
      <script type="text/javascript">
        var spec = {
          $schema: "https://vega.github.io/schema/vega-lite/v5.json",
          data: {
            values: [
              { step: "0", y: "0", rev: "workspace" },
              { step: "1", y: "1", rev: "workspace" },
            ],
          },
          title: "y",
          width: 300,
          height: 300,
          params: [
            {
              name: "smooth",
              value: 0.001,
              bind: { input: "range", min: 0.001, max: 1, step: 0.001 },
            },
          ],
          encoding: {
            x: { field: "step", type: "quantitative", title: "step" },
            color: { field: "rev", scale: { domain: [], range: [] } },
            strokeDash: {},
          },
          layer: [
            {
              layer: [
                {
                  params: [
                    { name: "grid", select: "interval", bind: "scales" },
                  ],
                  mark: "line",
                },
                {
                  transform: [{ filter: { param: "hover", empty: false } }],
                  mark: "point",
                },
              ],
              encoding: {
                y: {
                  field: "y",
                  type: "quantitative",
                  title: "y",
                  scale: { zero: false },
                },
                color: { field: "rev", type: "nominal" },
              },
              transform: [
                {
                  loess: "y",
                  on: "step",
                  groupby: ["rev"],
                  bandwidth: { signal: "smooth" },
                },
              ],
            },
            {
              mark: { type: "line", opacity: 0.2 },
              encoding: {
                x: { field: "step", type: "quantitative", title: "step" },
                y: {
                  field: "y",
                  type: "quantitative",
                  title: "y",
                  scale: { zero: false },
                },
                color: { field: "rev", type: "nominal" },
              },
            },
            {
              mark: { type: "circle", size: 10 },
              encoding: {
                x: {
                  aggregate: "max",
                  field: "step",
                  type: "quantitative",
                  title: "step",
                },
                y: {
                  aggregate: { argmax: "step" },
                  field: "y",
                  type: "quantitative",
                  title: "y",
                  scale: { zero: false },
                },
                color: { field: "rev", type: "nominal" },
              },
            },
            {
              transform: [
                { calculate: "datum.rev", as: "pivot_field" },
                { pivot: "pivot_field", value: "y", groupby: ["step"] },
              ],
              mark: {
                type: "rule",
                tooltip: { content: "data" },
                stroke: "grey",
              },
              encoding: {
                opacity: {
                  condition: { value: 0.3, param: "hover", empty: false },
                  value: 0,
                },
              },
              params: [
                {
                  name: "hover",
                  select: {
                    type: "point",
                    fields: ["step"],
                    nearest: true,
                    on: "mouseover",
                    clear: "mouseout",
                  },
                },
              ],
            },
          ],
        };
        vegaEmbed("#static_y", spec);
      </script>
    </div>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mattseddon mattseddon

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

patch revs_with_datapoints not being provided iterative/dvc-render
4 participants
@dberenbaum @shcheklein @jsappl @mattseddon