Fix Plotly and Altair plots in 5.0-dev branch

[abidlabs]

No description provided.

[whitphx]

hmm it's a general bug on gr.Plot, not a Lite specific?

import gradio as gr
import numpy as np
import plotly.express as px
import pandas as pd

countries = ["USA", "Canada", "Mexico", "UK"]

def fn():
    df = pd.DataFrame({
        "day": np.arange(0, 100)
    })

    fig = px.line(df)

    return fig


demo = gr.Interface(
    fn=fn,
    inputs=None,
    outputs=gr.Plot()
)

demo.launch()

I'm investigating this problem in #9422

[whitphx]

• This error is not Lite specific.
  • I wonder why the normal E2E tests are passing.
• It was introduced in Ssr part 2 #9339 as described below.

Reproduce the error

These are tested on the normal Gradio, not Lite.

import gradio as gr
import numpy as np
import pandas as pd
import plotly.express as px
from matplotlib import pyplot as plt


df = pd.DataFrame({
    "data": np.random.rand(100)
})

# Matplotlib plot works.
# fig = plt.figure()
# plt.plot(df["data"])

# Plotly plot causes error.
fig = px.line(df)

demo = gr.Interface(
    fn=lambda: None,
    inputs=gr.Plot(value=fig),
    outputs=None,
)

demo.launch()

---

8e52b6a (4c8c6f2^): It was working.

---

4c8c6f2: It started to fail.

This rev had another SSR error below, which is now fixed, btw.

ReferenceError: self is not defined
    at file:///Users/whitphx/ghq/github.com/gradio-app/gradio/gradio/templates/node/build/server/chunks/PlotlyPlot-BCAN8zg5.js:19:39
    at requirePlotly_min (file:///Users/whitphx/ghq/github.com/gradio-app/gradio/gradio/templates/node/build/server/chunks/PlotlyPlot-BCAN8zg5.js:20:4)
    at file:///Users/whitphx/ghq/github.com/gradio-app/gradio/gradio/templates/node/build/server/chunks/PlotlyPlot-BCAN8zg5.js:24:1
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

---

Current HEAD of 5.0-dev, 74f3b9d: It's still failing.

---

The released PyPI package (gradio==5.0.0b3): It also fails. This was wrong. It's working.

Reason

Found that $_layout in Blocks.svelte contains weird values in $_layout.children[]...children[].props as below. As there is $_layout.children[]...children[].props.target == {}, which is passed down to <Render> as this, it overrides the proper target prop there with an invalid value {}, then it's passed to each component and caused the problem, e.g. calling target.appendChild() that doesn't exist in PlotlyPlot.svelte.
(So #9422 can be the workaround but it doesn't solve the actual problem of setting the weird values.)

This screenshot was taken by adding $: console.log({ $_layout });.

I couldn't find where such weird value is set to $_layout but changes on Blocks.svelte in ##9339 is related? Any idea @pngwn ?