Skip to content

Commit 336e714

Browse files
lnhsinghlnhsingh
authored
Fix large LS table (#634)
## Overview - Reorg table - Fix CSS ## Type of change **Type:** Fix bug ## Checklist <!-- Put an 'x' in all boxes that apply --> - [x] I have read the [contributing guidelines](README.md) - [x] I have tested my changes locally using `docs dev` - [x] All code examples have been tested and work correctly - [x] I have used **root relative** paths for internal links - [x] I have updated navigation in `src/docs.json` if needed - I have gotten approval from the relevant reviewers - (Internal team members only / optional) I have created a preview deployment using the [Create Preview Branch workflow](https://github.com/langchain-ai/docs/actions/workflows/create-preview-branch.yml) ## Additional notes <!-- Any other information that would be helpful for reviewers -->
1 parent fb85381 commit 336e714

File tree

2 files changed

+71
-31
lines changed

2 files changed

+71
-31
lines changed

‎src/langsmith/self-host-scale.mdx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,22 @@ For example configurations, refer to [Example LangSmith configurations for scale
99

1010
## Summary
1111

12-
The table below provides an overview comparing different LangSmith configurations for various load patterns.
13-
14-
| Load Pattern (Reads/Writes) | Concurrent Frontend Users | Traces Submitted per Second | Frontend Replicas | Platform Backend Replicas | Queue Replicas | Backend Replicas | Redis Resources | ClickHouse Resources | ClickHouse Setup | Postgres Resources | Blob Storage |
15-
| ------------------------------------------------ | ------------------------- | --------------------------- | ----------------- | ------------------------- | -------------- | ---------------- | --------------- | ------------------------- | ----------------------------- | ------------------------------------------- | ------------ |
16-
| **[Low/Low](#low-reads-low-writes)** | 5 | 10 | 1 (default) | 3 (default) | 3 (default) | 2 (default) | 8 Gi (default) | 4 CPU, 16 Gi (default) | Single instance | 2 CPU, 8 GB memory, 10GB storage (external) | Disabled |
17-
| **[Low/High](#low-reads-high-writes)** | 5 | 1000 | 4 | 20 | 160 | 5 | 200 Gi external | 10 CPU, 32Gi memory | Single instance | 2 CPU, 8 GB memory, 10GB storage (external) | Enabled |
18-
| **[High/Low](#high-reads-low-writes)** | 50 | 10 | 2 | 3 (default) | 6 | 40 | 8 Gi (default) | 8 CPU, 16 Gi per replica | **3-node replicated cluster** | 2 CPU, 8 GB memory, 10GB storage (external) | Enabled |
19-
| **[Medium/Medium](#medium-reads-medium-writes)** | 20 | 100 | 2 | 3 (default) | 10 | 16 | 13Gi external | 16 CPU, 24Gi memory | Single instance | 2 CPU, 8 GB memory, 10GB storage (external) | Enabled |
20-
| **[High/High](#high-reads-high-writes)** | 50 | 1000 | 4 | 20 | 160 | 50 | 200 Gi external | 14 CPU, 24 Gi per replica | **3-node replicated cluster** | 2 CPU, 8 GB memory, 10GB storage (external) | Enabled |
21-
22-
**Notes:**
23-
24-
- **Concurrent Frontend Users**: Number of users actively viewing traces on the frontend
25-
- **Traces Submitted per Second**: Number of traces being ingested via SDKs or API endpoints
26-
- **Replicated ClickHouse**: Recommended for high read loads to prevent degraded performance. Another option would be [managed clickhouse](/langsmith/self-host-external-clickhouse#langsmith-managed-clickhouse).
27-
- **PostgreSQL**: We recommend using an external instance and enabling autoexpansion for the disk to handle growing data requirements.
12+
The table below provides an overview comparing different LangSmith configurations for various load patterns (reads / writes):
13+
14+
| | **[Low / low](#low-reads-low-writes)** | **[Low / high](#low-reads-high-writes)** | **[High / low](#high-reads-low-writes)** | [Medium / medium](#medium-reads-medium-writes) | [High / high](#high-reads-high-writes) |
15+
| :--- | :--- | :--- | :--- | :--- | :--- |
16+
| <Tooltip tip="Number of users actively viewing traces on the frontend">Concurrent frontend users</Tooltip> | 5 | 5 | 50 | 20 | 50 |
17+
| <Tooltip tip="Number of traces being ingested via SDKs or API endpoints">Traces submitted per second</Tooltip> | 10 | 1000 | 10 | 100 | 1000 |
18+
| **Frontend replicas** | 1 (default) | 4 | 2 | 2 | 4 |
19+
| **Platform backend replicas** | 3 (default) | 20 | 3 (default) | 3 (default) | 20 |
20+
| **Queue replicas** | 3 (default) | 160 | 6 | 10 | 160 |
21+
| **Backend replicas** | 2 (default) | 5 | 40 | 16 | 50 |
22+
| **Redis resources** | 8 Gi (default) | 200 Gi external | 8 Gi (default) | 13Gi external | 200 Gi external |
23+
| **ClickHouse resources** | 4 CPU<br />16 Gi (default) | 10 CPU<br />32Gi memory | 8 CPU<br />16 Gi per replica | 16 CPU<br />24Gi memory | 14 CPU<br />24 Gi per replica |
24+
| **ClickHouse setup** | Single instance | Single instance | 3-node <Tooltip tip="Recommended for high read loads to prevent degraded performance. Another option would be [managed clickhouse](/langsmith/self-host-external-clickhouse#langsmith-managed-clickhouse).">replicated cluster</Tooltip> | Single instance | 3-node <Tooltip tip="Recommended for high read loads to prevent degraded performance. Another option would be [managed clickhouse](/langsmith/self-host-external-clickhouse#langsmith-managed-clickhouse).">replicated cluster</Tooltip> |
25+
| <Tooltip tip="We recommend using an external instance and enabling autoexpansion for the disk to handle growing data requirements.">Postgres resources</Tooltip> | 2 CPU<br />8 GB memory<br />10GB storage (external) | 2 CPU<br />8 GB memory<br />10GB storage (external) | 2 CPU<br />8 GB memory<br />10GB storage (external) | 2 CPU<br />8 GB memory<br />10GB storage (external) | 2 CPU<br />8 GB memory<br />10GB storage (external) |
26+
| **Blob storage** | Disabled | Enabled | Enabled | Enabled | Enabled |
27+
2828

2929
Below we go into more details about the read and write paths as well as provide a `values.yaml` snippet for you to start with for your self-hosted LangSmith instance.
3030

‎src/style.css‎

Lines changed: 55 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,45 @@ code,
7272
width: auto !important;
7373
}
7474

75-
/* Ensure the main container accommodates the wider content */
76-
.container,
77-
.max-w-7xl,
78-
.mx-auto {
79-
max-width: 100rem !important; /* ~1600px */
80-
padding-left: 2rem !important;
81-
padding-right: 2rem !important;
75+
/* Container constraints */
76+
.container, .max-w-7xl, .mx-auto {
77+
max-width: 100rem !important;
78+
padding: 0 2rem !important;
79+
overflow-x: hidden !important;
80+
}
81+
82+
/* Responsive tables with horizontal scrolling */
83+
.prose table, article table, .markdown table, .content table, [class*="prose"] table {
84+
width: 100% !important;
85+
max-width: 100% !important;
86+
border-collapse: collapse !important;
87+
table-layout: auto !important;
88+
overflow-x: auto !important;
89+
}
90+
91+
/* Table wrapper for horizontal scrolling */
92+
.prose, article, .markdown, .content, [class*="prose"] {
93+
overflow-x: auto !important;
94+
-webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
95+
}
96+
97+
/* Table cells responsive behavior */
98+
.prose table td, .prose table th,
99+
article table td, article table th,
100+
.markdown table td, .markdown table th,
101+
.content table td, .content table th,
102+
[class*="prose"] table td, [class*="prose"] table th {
103+
word-wrap: break-word !important;
104+
overflow-wrap: break-word !important;
105+
hyphens: auto !important;
106+
min-width: 0 !important; /* Allow cells to shrink */
107+
}
108+
109+
/* Mobile responsiveness */
110+
@media (max-width: 1024px) {
111+
.prose, .prose-sm, .prose-lg, article, .markdown, .content, main > div, [class*="prose"] {
112+
max-width: calc(100vw - 4rem) !important;
113+
}
82114
}
83115

84116
/* Style "breadcrumbs" link element */
@@ -351,19 +383,27 @@ h6 span img {
351383
justify-content: center;
352384
}
353385

354-
/* Responsive tables with horizontal scrolling */
355-
table {
356-
/* Table layout preserved for proper caption/column sizing */
357-
}
358-
359-
/* Responsive tables with horizontal scrolling */
386+
/* Additional table responsiveness for specific cases */
360387
.table-scroll {
361388
overflow-x: auto;
362389
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
363390
width: 100%;
364391
}
365392

366-
/* Prevent table cells from breaking layout */
367-
table th {
393+
/* Prevent table headers from wrapping when space allows */
394+
.prose table th, article table th, .markdown table th, .content table th, [class*="prose"] table th {
368395
white-space: nowrap;
369396
}
397+
398+
/* Mobile-specific table adjustments */
399+
@media (max-width: 768px) {
400+
.prose table, article table, .markdown table, .content table, [class*="prose"] table {
401+
font-size: 0.875rem !important; /* Slightly smaller text on mobile */
402+
}
403+
404+
.prose table th, article table th, .markdown table th, .content table th, [class*="prose"] table th {
405+
white-space: normal !important; /* Allow headers to wrap on very small screens */
406+
word-break: break-word !important;
407+
}
408+
}
409+

0 commit comments

Comments
 (0)