render markdown for long descriptions
3 changed files+102−2
paper/paper.mdmodified+1−1View file
@@ -38,7 +38,7 @@ $$
3838
3939 bits per sample. This means that the optimal compression ratio for such a dataset is 8, assuming the samples are stored as 8-bit integers. On the other hand, if $p\neq 0.5$, the entropy becomes lower and we can achieve compression at a rate of less than 1 bit per sample (e.g., for $p=0.1$, the entropy is around 0.47 bits per sample, so the compression ratio would be around 17).
4040
41-In practice, achieving this theoretical compression ratio requires sophisticated encoding techniques. Arithmetic encoding [ref] is one such method, but it is challenging to implement and can be computationally inefficient. A more modern and efficient alternative is Asymmetric Numeric Systems (ANS) [ref], which closely approaches the theoretical limit and is incorporated into state-of-the-art compressors such as ZStandard [ref]. However, these algorithms are primarily optimized for structured data types, such as text, rather than for numeric scientific data.
41+In practice, achieving this theoretical compression ratio requires sophisticated encoding techniques. Arithmetic encoding [ref] is one such method, but it is challenging to implement and can be computationally inefficient. A more modern and efficient alternative is asymmetric numeral systems (ANS) [ref], which closely approaches the theoretical limit and is incorporated into state-of-the-art compressors such as ZStandard [ref]. However, these algorithms are primarily optimized for structured data types, such as text, rather than for numeric scientific data.
4242
4343 In our benchmarks, we evaluate a simple implementation of ANS using a Python package called `simple_ans`. As anticipated, ANS demonstrates superior performance when compressing i.i.d. samples from a discrete distribution. However, its efficiency diminishes when handling more structured data, such as continuous signals (e.g., voltage traces in electrophysiology).
4444
web-ui/src/components/shared/BaseContent.tsxmodified+11−1View file
@@ -1,5 +1,8 @@
11 import { useNavigate } from "react-router-dom";
22 import { useState } from "react";
3+import ReactMarkdown from "react-markdown";
4+import remarkMath from "remark-math";
5+import rehypeKatex from "rehype-katex";
36 import { BenchmarkData } from "../../types";
47 import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
58 import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
@@ -56,7 +59,14 @@ export const BaseContent = ({
5659 {isExpanded ? "View less" : "Read more"}
5760 </button>
5861 {isExpanded && (
59- <div className="long-description">{item.long_description}</div>
62+ <div className="long-description">
63+ <ReactMarkdown
64+ remarkPlugins={[remarkMath]}
65+ rehypePlugins={[rehypeKatex]}
66+ >
67+ {item.long_description}
68+ </ReactMarkdown>
69+ </div>
6070 )}
6171 </>
6272 )}
web-ui/src/components/shared/ContentStyles.cssmodified+90−0View file
@@ -33,6 +33,96 @@
3333 border-radius: 4px;
3434 }
3535
36+/* Markdown styles */
37+.long-description h1,
38+.long-description h2,
39+.long-description h3,
40+.long-description h4,
41+.long-description h5,
42+.long-description h6 {
43+ margin-top: 1.5em;
44+ margin-bottom: 0.5em;
45+ font-weight: 600;
46+}
47+
48+.long-description h1 { font-size: 1.5em; }
49+.long-description h2 { font-size: 1.3em; }
50+.long-description h3 { font-size: 1.1em; }
51+
52+.long-description p {
53+ margin-bottom: 1em;
54+}
55+
56+.long-description ul,
57+.long-description ol {
58+ margin: 1em 0;
59+ padding-left: 2em;
60+}
61+
62+.long-description li {
63+ margin: 0.5em 0;
64+}
65+
66+.long-description code {
67+ background-color: #eee;
68+ padding: 0.2em 0.4em;
69+ border-radius: 3px;
70+ font-family: monospace;
71+ font-size: 0.9em;
72+}
73+
74+.long-description pre {
75+ background-color: #eee;
76+ padding: 1em;
77+ border-radius: 4px;
78+ overflow-x: auto;
79+ margin: 1em 0;
80+}
81+
82+.long-description pre code {
83+ background-color: transparent;
84+ padding: 0;
85+}
86+
87+.long-description blockquote {
88+ border-left: 4px solid #ddd;
89+ margin: 1em 0;
90+ padding-left: 1em;
91+ color: #666;
92+}
93+
94+.long-description a {
95+ color: #0066cc;
96+ text-decoration: none;
97+}
98+
99+.long-description a:hover {
100+ text-decoration: underline;
101+}
102+
103+.long-description img {
104+ max-width: 100%;
105+ height: auto;
106+ margin: 1em 0;
107+}
108+
109+.long-description table {
110+ border-collapse: collapse;
111+ width: 100%;
112+ margin: 1em 0;
113+}
114+
115+.long-description th,
116+.long-description td {
117+ border: 1px solid #ddd;
118+ padding: 0.5em;
119+ text-align: left;
120+}
121+
122+.long-description th {
123+ background-color: #f0f0f0;
124+}
125+
36126 .metadata-section {
37127 margin-bottom: 1.5rem;
38128 display: flex;