[Bug]: Trace input/output viewer rendering issues for large inputs and outputs

[gustavhartz]

What component(s) are affected?

• Python SDK
• Opik UI
• Opik Server
• Documentation

Opik version

• Opik version: 1.7.10 #docker
• Opik version: 1.7.3 #cli

Describe the problem

Large inputs breaks formatting +2K lines. Scrolling also gets weird for 30K+ lines

Reproduction steps and code snippets

Make a massive input object

@track
def test(x):
    pass
test([{"foo":"bar" for x in range(10000)}])

Error logs or stack trace

None

Healthcheck results

*** HEALTHCHECK STARTED ***
Python version: 3.11.9
Opik version: 1.7.2 # ONLY FOR CLI not same

*** CONFIGURATION FILE ***
Config file path: /Users/gustavhartz/.opik.config
Config file exists: yes

*** CURRENT CONFIGURATION ***
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ Setting ┃ Value ┃
┡━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━━━━━━━━━━━━━━┩
│ api_key │ None │
│ background_workers │ 4 │
│ check_tls_certificate │ True │
│ console_logging_level │ INFO │
│ default_flush_timeout │ None │
│ enable_litellm_models_monitoring │ True │
│ file_logging_level │ None │
│ logging_file │ opik.log │
│ project_name │ Default Project │
│ pytest_experiment_enabled │ True │
│ sentry_enable │ True │
│ track_disable │ False │
│ url_override │ http://localhost:5173/api/ │
│ workspace │ default │
└──────────────────────────────────┴────────────────────────────┘

*** CONFIGURATION SCAN ***
Configuration issues: not found

*** BACKEND WORKSPACE AVAILABILITY ***
--> Checking backend workspace availability at: http://localhost:5173/api/
Backend workspace available: yes

*** HEALTHCHECK COMPLETED ***

[andriidudar]

Hey @gustavhartz, thank you for reporting the issue. Unfortunately, I cannot reproduce it with the code snippet you shared.

`
from opik import track
@track
def test(x):
pass

test([{"foo":"bar" for x in range(10000)}])
`

I have also tried to reproduce it with next code:
`
from opik import track

@track
def test(x):
pass

test([{x: x**2 for x in range(10000)}])
`
And it works as expected:

Can you please share the working code to reproduce it?

[andriidudar]

@gustavhartz, we were able to reproduce the issue with the next script:

`
from opik import track
@track
def test(x):
pass

test([{"foo":"bar"} for x in range(30000)])
`

We will take a look at it. Thanks again for reporting it.