Panel

Notes on LaTeX formatting for mathematics and scientific notations

The text panel uses the markdown block and that in turn uses remark-math and rehype-katex to render LaTeX formulas. Ensure that $ and $$ are the only delimiters used for LaTeX formulas. Do not use other delimiters such as \[ and \] as they will not be rendered correctly. Also ensure it's not wrapped in triple backticks (```) or code blocks.

You can try the following prompt template to ensure the LaTeX formulas are formatted correctly:

LaTeX Formatting Requirements:
- Delimiters: Use $ ... $ for inline math and $$ ... $$ for display/block math.
- No Brackets: Do not use \( ... \) or \[ ... \].
- Strict Markdown: DO NOT wrap any LaTeX in triple backticks (```) or code blocks. Write it as raw text so the markdown renderer can process the dollar signs directly.
- Example of WRONG output: ```latex $E=mc^2$ ```
- Example of WRONG output: ```latex \[E=mc^2\] ```
- Example of CORRECT output: The energy is $E=mc^2$.
- Example of WRONG output: [ \max P = 30x + 10y ] 
- Example of CORRECT output: The maximum profit is $\max P = 30x + 10y$.
- Example of WRONG output: From the time constraint, dividing by 3: [ 2x + y \le \frac{40}{3} \quad \Rightarrow \quad y = \frac{40}{3} - 2x. ]
- Example of CORRECT output: From the time constraint, dividing by 3: $$2x + y \le \frac{40}{3} \quad \Rightarrow \quad y = \frac{40}{3} - 2x.$$

Renders a panel from the panel library. Supports chart (Plotly, Altair/Vega-Lite, HTML/Folium), dataset, video, text, and JSON panel types.

Installation

npx shadcn@latest add @dr-ui/panel

Registry dependencies

@dr-ui/utils

@dr-ui/i18n

@dr-ui/button

@dr-ui/code-block

@dr-ui/grid

@dr-ui/heading

@dr-ui/markdown

@dr-ui/scroll-area

@dr-ui/theme

Dependencies

colorjs.io@^0.6.1

next@^16.2.1

lucide-react@^1.7.0

plotly.js@^3.4.0

react-plotly.js@^2.6.0

react-use-measure@^2.1.7

react-vega@^8.0.0

@tanstack/react-table@^8.21.3

Chart panel

Category Sales Performance Over Time

Dataset panel

Sample Dataset Panel

Json panel

Sample JSON with 4 top-level entries, each containing nested data

name:"Acme Analytics"

null:null

}

Text panel

Example text panel

Decision variables

$T$ = number of tables per week
$C$ = number of chairs per week

Objective (maximise weekly profit)

Maximise $Z = 30T + 10C$

Subject to

Time (hours):
$6T + 3C \le 40$
Demand (chairs at least three times tables):
$C \ge 3T$
Storage (tables use 4× chair space, capacity equivalent to 16 chairs):
$4T + C \le 16$
Non-negativity:
$T \ge 0,\; C \ge 0$

Graphical solution (intersections of constraints):

Demand: $C = 3T$
Time: $6T + 3C = 40 \Rightarrow 2T + C = \frac{40}{3}$
Storage: $4T + C = 16$

Feasible corner points:

Intersection of demand & storage:
$C = 3T$ , $4T + C = 16 \Rightarrow 4T + 3T = 7T = 16$
$\Rightarrow T = \frac{16}{7},\; C = \frac{48}{7}$
$Z = 30\cdot\frac{16}{7} + 10\cdot\frac{48}{7} = \frac{960}{7} \approx 137.14$
Intersection of demand & time:
$C = 3T$ , $2T + C = \frac{40}{3} \Rightarrow 2T + 3T = \frac{40}{3}$
$\Rightarrow 5T = \frac{40}{3} \Rightarrow T = \frac{8}{3},\; C = 8$
$Z = 30\cdot\frac{8}{3} + 10\cdot 8 = 160$
Check axes as needed (e.g. $T=0$ or $C=0$ ) – they give lower profit than point 2.

Since the intersection in (2) satisfies all constraints (including storage: $4\cdot\frac{8}{3} + 8 = \frac{56}{3} < 16$ is false, so storage is actually tighter and (2) is infeasible). Thus storage is the binding constraint with demand.

Therefore, the optimal LP solution is at (1):

$T^* = \dfrac{16}{7} \approx 2.29$ tables
$C^* = \dfrac{48}{7} \approx 6.86$ chairs
Maximum profit $Z^* = \dfrac{960}{7} \approx £137.14$ per week

Video panel

Cell Tower Inspection

Annotations

00 Visible rust and corrosion on structural components.
00 Loose or misaligned antenna bracket.
00 Frayed or damaged cables.
00 Loose or untidy cable connections.
00 Exposed and frayed cables.
00 Paint chipping and minor rust on the access platform.
00 Slightly misaligned or loose antenna bracket.