Add title to calculator and table, similar to plots

packages/components/src/components/Calculator/calculatorUI.tsx

@@ -66,13 +66,21 @@ export const CalculatorUI: FC<UIProps> = ({
     chartHeight: 200,
   };
 
+  const hasTitleOrDescription = !!calculator.title || !!calculator.description;
   return (
     <div className="border border-slate-200 rounded-sm max-w-4xl mx-auto">
-      {calculator.description && (
-        <div className="py-3 px-5 border-b border-slate-200 bg-slate-100">
-          <ReactMarkdown className={"prose text-sm text-slate-800 max-w-4xl"}>
-            {calculator.description}
-          </ReactMarkdown>
+      {hasTitleOrDescription && (
+        <div className="py-3 px-5 border-b border-slate-200 bg-slate-100 max-w-4xl">
+          {calculator.title && (
+            <div className={"text-lg text-slate-900 font-semibold mb-1"}>
+              {calculator.title}
+            </div>
+          )}
+          {calculator.description && (
+            <ReactMarkdown className={"prose text-sm text-slate-700"}>
+              {calculator.description}
+            </ReactMarkdown>
+          )}
         </div>
       )}
 

packages/components/src/components/TableChart/index.tsx

@@ -59,47 +59,54 @@ export const TableChart: FC<Props> = ({
   };
 
   return (
-    <div className="relative rounded-sm overflow-hidden border border-slate-200">
-      <table
-        className="table-fixed w-full"
-        style={{ minWidth: columnLength * 100 }}
-      >
-        {hasColumnNames && (
-          <thead className="text-xs text-gray-700 bg-gray-50 border-b border-slate-200">
-            <tr>
-              {Array.from({ length: columnLength }, (_, i) => (
-                <th
-                  key={i}
-                  scope="col"
-                  className={clsx(
-                    "px-2 py-2",
-                    i !== 0 && "border-slate-200 border-l"
-                  )}
-                >
-                  {columnNames[i] || ""}
-                </th>
-              ))}
-            </tr>
-          </thead>
-        )}
-        <tbody>
-          {rowsAndColumns.map((row, i) => (
-            <tr key={i} className="border-b border-slate-100">
-              {row.map((item, k) => (
-                <td
-                  key={k}
-                  className={clsx(
-                    "px-1 overflow-hidden",
-                    k !== 0 && "border-slate-100 border-l"
-                  )}
-                >
-                  {showItem(item, adjustedSettings)}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
+    <div>
+      {!!value.title && (
+        <div className="text-md text-slate-900 font-semibold mb-1">
+          {value.title}
+        </div>
+      )}
+      <div className="relative rounded-sm overflow-hidden border border-slate-200">
+        <table
+          className="table-fixed w-full"
+          style={{ minWidth: columnLength * 100 }}
+        >
+          {hasColumnNames && (
+            <thead className="text-xs text-gray-700 bg-gray-50 border-b border-slate-200">
+              <tr>
+                {Array.from({ length: columnLength }, (_, i) => (
+                  <th
+                    key={i}
+                    scope="col"
+                    className={clsx(
+                      "px-2 py-2",
+                      i !== 0 && "border-slate-200 border-l"
+                    )}
+                  >
+                    {columnNames[i] || ""}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          <tbody>
+            {rowsAndColumns.map((row, i) => (
+              <tr key={i} className="border-b border-slate-100">
+                {row.map((item, k) => (
+                  <td
+                    key={k}
+                    className={clsx(
+                      "px-1 overflow-hidden",
+                      k !== 0 && "border-slate-100 border-l"
+                    )}
+                  >
+                    {showItem(item, adjustedSettings)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>{" "}
     </div>
   );
 };

packages/components/src/stories/SquiggleChart/Calculator.stories.tsx

@@ -13,11 +13,12 @@ export const Basic: Story = {
     code: `
     f(a, b, c) = [a + b, a, c]
 
-    a = "\n## My favorite calculator\nA longer description of the calculator goes here...\n"
+    a = "A longer description of the calculator goes here...\n"
 
     Calculator.make(
       {
         fn: f,
+        title: "My Calculator",
         description: a,
         fields: [
           {

packages/components/src/stories/SquiggleChart/Table.stories.tsx

@@ -13,6 +13,7 @@ export const Basic: Story = {
     code: `
     Table.make(
       {
+        title: "Basic Table",
         data: [1, 4, 5],
         columns: [
           { fn: {|e|e}, name: "Number" },

packages/squiggle-lang/src/fr/calculator.ts

@@ -24,6 +24,7 @@ export const library = [
         [
           frDict(
             ["fn", frLambda],
+            ["title", frOptional(frString)],
             ["description", frOptional(frString)],
             [
               "fields",
@@ -37,9 +38,10 @@ export const library = [
             ]
           ),
         ],
-        ([{ fn, description, fields }]) => {
+        ([{ fn, title, description, fields }]) => {
           const calc = vCalculator({
             fn,
+            title: title || undefined,
             description: description || undefined,
             fields: fields.map((vars) => ({
               name: vars.name,

packages/squiggle-lang/src/fr/table.ts

@@ -25,15 +25,17 @@ export const library = [
         [
           frDict(
             ["data", frArray(frAny)],
+            ["title", frOptional(frString)],
             [
               "columns",
               frArray(frDict(["fn", frLambda], ["name", frOptional(frString)])),
             ]
           ),
         ],
-        ([{ data, columns }]) => {
+        ([{ data, title, columns }]) => {
           return vTableChart({
             data,
+            title: title || undefined,
             columns: columns.map(({ fn, name }) => ({
               fn,
               name: name ?? undefined,

packages/squiggle-lang/src/public/SqValue/SqCalculator.ts

@@ -30,6 +30,10 @@ export class SqCalculator {
     }
   }
 
+  get title(): string | undefined {
+    return this._value.title;
+  }
+
   get description(): string | undefined {
     return this._value.description;
   }

packages/squiggle-lang/src/public/SqValue/SqTableChart.ts

@@ -78,4 +78,8 @@ export class SqTableChart {
   get columnNames(): (string | undefined)[] {
     return this._value.columns.map(({ name }) => name);
   }
+
+  get title(): string | undefined {
+    return this._value.title;
+  }
 }

packages/squiggle-lang/src/value/index.ts

@@ -417,6 +417,7 @@ export type Plot = CommonPlotArgs &
 
 export type TableChart = {
   data: Value[];
+  title?: string;
   columns: { fn: Lambda; name: string | undefined }[];
 };
 class VTableChart extends BaseValue {
@@ -437,6 +438,7 @@ export type Calculator = {
   fn: Lambda;
   fields: { name: string; default: string; description?: string }[];
   description?: string;
+  title?: string;
 };
 
 class VCalculator extends BaseValue {

packages/website/src/pages/docs/Api/Calculator.mdx

@@ -15,7 +15,8 @@ Calculators can be useful for debugging functions or to present functions to end
 ```
 Calculator.make: ({
   fn: ...arguments => any,
-  description: string,
+  title?: string,
+  description?: string,
   fields: list<{
     name: string,
     default?: string,
@@ -32,7 +33,8 @@ Examples:
   defaultCode={`Calculator.make(
   {
     fn: {|a, b|a + b},
-    description: "### Sum()  \nThis takes in two arguments, and outputs the sum of those two arguments.",
+    title: "Sum()"
+    description: "This takes in two arguments, and outputs the sum of those two arguments.",
     fields: [
       {
         name: "First Param",

packages/website/src/pages/docs/Api/Table.mdx

@@ -13,6 +13,7 @@ The Table module allows you to make tables of data.
 ```
 Table.make: ({
   data: list<'a>,
+  title?: string,
   columns: list<{
     name?:string,
     fn: 'a => any