From 96ec4ab1cd8ccaf85b80f2f61c23cefc8f101179 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 20 Jan 2025 13:46:04 +0100
Subject: [PATCH 01/16] feat(tailwind-components): add form legend component

---
 apps/metadata-utils/src/types.ts              |  7 +++
 apps/tailwind-components/assets/css/main.css  |  3 ++
 .../components/form/Legend.vue                | 54 +++++++++++++++++++
 .../pages/Legend.story.vue                    | 51 ++++++++++++++++++
 apps/tailwind-components/tailwind.config.js   |  6 +++
 apps/yarn.lock                                | 31 ++---------
 6 files changed, 124 insertions(+), 28 deletions(-)
 create mode 100644 apps/tailwind-components/components/form/Legend.vue
 create mode 100644 apps/tailwind-components/pages/Legend.story.vue

diff --git a/apps/metadata-utils/src/types.ts b/apps/metadata-utils/src/types.ts
index c31dd39a4f..111f907ccc 100644
--- a/apps/metadata-utils/src/types.ts
+++ b/apps/metadata-utils/src/types.ts
@@ -91,6 +91,13 @@ export interface IFieldError {
   message: string;
 }
 
+export interface IFormLegendSection {
+  label: string;
+  domId: string;
+  isActive?: boolean;
+  errorCount?: number;
+}
+
 export type columnId = string;
 export type columnValue = string | number | boolean | columnValueObject;
 
diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index 9479aff2c5..2f8f52a7e5 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -38,6 +38,7 @@
     --color-orange-500: #E1B53E;
     --color-red-200: #FCECEF;
     --color-red-500: #E14F62;
+    --color-red-700: #AE2A3F;
     --color-gradient1: #0062C6;
     --color-gradient2: #0072E4;
 
@@ -79,6 +80,7 @@
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-yellow-500);
     --background-color-table: var(--color-white);
+    --background-color-notification: var(--color-red-700);
 
 
     --text-color-button-primary: var(--color-white);
@@ -129,6 +131,7 @@
     --text-color-table-column-header: var(--color-gray-600);
     --text-color-form-header: var(--color-blue-800);
     --text-color-input-description: var(--color-blue-800);
+    --text-color-legend-error-count: var(--color-white);
     
     --text-color-invalid: var(--color-red-500);
     --text-color-valid: var(--color-green-800);
diff --git a/apps/tailwind-components/components/form/Legend.vue b/apps/tailwind-components/components/form/Legend.vue
new file mode 100644
index 0000000000..48713458c9
--- /dev/null
+++ b/apps/tailwind-components/components/form/Legend.vue
@@ -0,0 +1,54 @@
+<template>
+  <nav class="py-4">
+    <h2 class="text-disabled mt-8 mb-4 p-4 ml-2">Jump to</h2>
+    <ul class="list-none space-y-3">
+      <li
+        v-for="section in sections"
+        class="group felx flex items-center"
+        @click="emit('gotoSection', section)"
+      >
+        <div
+          class="h-[24px] w-2 min-w-2 group-hover:bg-button-primary"
+          :class="{ 'bg-button-primary': section.isActive }"
+        />
+        <a
+          class="pl-4 text-title"
+          :class="{ 'font-bold': section.isActive }"
+          :href="`#${section.domId}`"
+          >{{ section.label }}</a
+        >
+        <span v-if="(section.errorCount ?? 0) > 0" class="ml-2">
+          <a :href="`#${section.domId}`">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-[20px] w-[20] inline-block"
+              viewBox="0 0 20 20"
+            >
+              <circle cx="10" cy="10" r="10" class="fill-notification" />
+              <text
+                x="10"
+                y="10"
+                font-size="smaller"
+                text-anchor="middle"
+                alignment-baseline="central"
+                class="stroke-notification-text fill-notification-text"
+              >
+                {{ section.errorCount }}
+              </text>
+            </svg>
+          </a>
+        </span>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import type { IFormLegendSection } from "../../../metadata-utils/src/types";
+
+defineProps<{
+  sections: IFormLegendSection[];
+}>();
+
+const emit = defineEmits(["gotoSection"]);
+</script>
diff --git a/apps/tailwind-components/pages/Legend.story.vue b/apps/tailwind-components/pages/Legend.story.vue
new file mode 100644
index 0000000000..6ebcc5e644
--- /dev/null
+++ b/apps/tailwind-components/pages/Legend.story.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-row">
+    <div class="basis-1/2 bg-sidebar-gradient">
+      <FormLegend :sections="sections" @goto-section="handleGotoRequest" />
+    </div>
+    <div class="basis-1/2 text-title p-4">
+      <h3>Active section: {{ sections.find((s) => s.isActive) }}</h3>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IFormLegendSection } from "../../metadata-utils/src/types";
+
+function handleGotoRequest(section: IFormLegendSection) {
+  console.log("Goto request for section", section);
+  sections.value.forEach((s) => {
+    if (s.domId === section.domId) {
+      s.isActive = true;
+    } else {
+      s.isActive = false;
+    }
+  });
+}
+
+const sections = ref<IFormLegendSection[]>([
+  {
+    label: "Overview",
+    domId: "overview",
+    isActive: true,
+    errorCount: 1,
+  },
+  {
+    label: "Population",
+    domId: "population",
+    errorCount: 2,
+  },
+  {
+    label: "Contents",
+    domId: "contents",
+  },
+  {
+    label: "Access",
+    domId: "access",
+  },
+  {
+    label: "Information",
+    domId: "information",
+  },
+]);
+</script>
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index 53519f3e7e..d0c18cb5b0 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -80,6 +80,7 @@ module.exports = {
       },
       red: {
         500: "#E14F62",
+        700: "#AE2A3F",
       },
     },
     extend: {
@@ -154,6 +155,7 @@ module.exports = {
         "invalid": "var(--background-color-invalid)",
         "input": "var(--background-color-input)",
         "table": "var(--background-color-table)",
+        "notification": "var(--background-color-notification)",
       }),
       textColor: ({ theme }) => ({
         "button-primary": "var(--text-color-button-primary)",
@@ -206,6 +208,7 @@ module.exports = {
         "valid": "var(--text-color-valid)",
         "disabled": "var(--text-color-disabled)",
         "required": "var(--text-color-required)",
+        "legend-error-count": "var(--text-color-legend-error-count)",
       }),
       borderColor: ({ theme }) => ({
         "button-primary": "var(--border-color-button-primary)",
@@ -232,10 +235,13 @@ module.exports = {
       }),
       stroke: ({ theme }) => ({
         "input": "var(--border-color-input)",
+        "notification-text": "var(--text-color-legend-error-count)",
       }),
       fill: ({ theme }) => ({
         "input": "var(--background-color-input)",
         "input-checked": "var(--background-color-input-checked)",
+        "notification": "var(--background-color-notification)",
+        "notification-text": "var(--text-color-legend-error-count)",
       }),
       borderRadius: {
         "3px": "var(--border-radius-3px)",
diff --git a/apps/yarn.lock b/apps/yarn.lock
index 68f2ca94a9..a38c41b9fc 100644
--- a/apps/yarn.lock
+++ b/apps/yarn.lock
@@ -12404,7 +12404,7 @@ string-env-interpolation@1.0.1:
   resolved "https://registry.yarnpkg.com/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz#ad4397ae4ac53fe6c91d1402ad6f6a52862c7152"
   integrity sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12421,15 +12421,6 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -12453,7 +12444,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12474,13 +12465,6 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -14263,7 +14247,7 @@ wordwrap@^1.0.0, wordwrap@~1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14280,15 +14264,6 @@ wrap-ansi@^3.0.1:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 04056509c29db9ca34e8de4963110c3235c28c5a Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 20 Jan 2025 15:32:38 +0100
Subject: [PATCH 02/16] add legend to form story

---
 .../components/form/Legend.vue                |  8 +-
 apps/tailwind-components/pages/Form.story.vue | 76 ++++++++++++++++---
 .../tests/components/form/renderForm.spec.ts  | 24 +++++-
 3 files changed, 89 insertions(+), 19 deletions(-)

diff --git a/apps/tailwind-components/components/form/Legend.vue b/apps/tailwind-components/components/form/Legend.vue
index 48713458c9..6ecc6d03cf 100644
--- a/apps/tailwind-components/components/form/Legend.vue
+++ b/apps/tailwind-components/components/form/Legend.vue
@@ -1,6 +1,6 @@
 <template>
-  <nav class="py-4">
-    <h2 class="text-disabled mt-8 mb-4 p-4 ml-2">Jump to</h2>
+  <nav class="pt-4 pb-8">
+    <h2 class="text-disabled p-4 ml-1">Jump to</h2>
     <ul class="list-none space-y-3">
       <li
         v-for="section in sections"
@@ -8,11 +8,11 @@
         @click="emit('gotoSection', section)"
       >
         <div
-          class="h-[24px] w-2 min-w-2 group-hover:bg-button-primary"
+          class="h-[24px] w-1 group-hover:bg-button-primary"
           :class="{ 'bg-button-primary': section.isActive }"
         />
         <a
-          class="pl-4 text-title"
+          class="pl-4 text-title capitalize"
           :class="{ 'font-bold': section.isActive }"
           :href="`#${section.domId}`"
           >{{ section.label }}</a
diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index 38410566c5..7abeafc13b 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -2,7 +2,9 @@
 import type { FormFields } from "#build/components";
 import type {
   columnValue,
+  IColumn,
   IFieldError,
+  IFormLegendSection,
   ISchemaMetaData,
   ITableMetaData,
 } from "../../metadata-utils/src/types";
@@ -50,25 +52,75 @@ const errors = ref<Record<string, IFieldError[]>>({});
 function onErrors(newErrors: Record<string, IFieldError[]>) {
   errors.value = newErrors;
 }
+
+const sections = computed(() => {
+  return tableMeta.value.columns
+    .filter((column: IColumn) => column.columnType == "HEADING")
+    .map((column: IColumn) => {
+      return {
+        label: column.label,
+        domId: column.id,
+        isActive: false,
+        errorCount: chapterErrorCount(column.id),
+      };
+    });
+});
+
+function handleGotoRequest(section: IFormLegendSection) {
+  console.log("Goto request for section", section);
+}
+
+function chapterFieldIds(chapterId: string) {
+  const chapterFieldIds = [];
+  let inChapter = false;
+  for (const column of tableMeta.value.columns) {
+    if (column.columnType === "HEADING" && column.id === chapterId) {
+      inChapter = true;
+    } else if (column.columnType === "HEADING" && column.id !== chapterId) {
+      inChapter = false;
+    } else if (inChapter) {
+      chapterFieldIds.push(column.id);
+    }
+  }
+  return chapterFieldIds;
+}
+
+function chapterErrorCount(chapterId: string) {
+  return chapterFieldIds(chapterId).reduce((acc, fieldId) => {
+    return acc + (errors.value[fieldId]?.length ?? 0);
+  }, 0);
+}
 </script>
 
 <template>
   <div class="flex flex-row">
-    <FormFields
-      v-if="tableMeta && status == 'success'"
-      ref="formFields"
-      class="basis-1/2 p-8"
-      :metadata="tableMeta"
-      :data="data"
-      @update:model-value="onModelUpdate"
-      @error="onErrors($event)"
-    ></FormFields>
-
-    <div class="basis-1/2">
-      <div>Demo controls, settings and status:</div>
+    <div id="mock-form-contaner" class="basis-2/3 flex flex-row border">
+      <div class="basis-1/3">
+        <FormLegend
+          class="bg-sidebar-gradient mx-4"
+          :sections="sections"
+          @goto-section="handleGotoRequest"
+        />
+      </div>
+
+      <FormFields
+        v-if="tableMeta && status == 'success'"
+        class="basis-2/3 p-8 border-l"
+        ref="formFields"
+        :metadata="tableMeta"
+        :data="data"
+        @update:model-value="onModelUpdate"
+        @error="onErrors($event)"
+      />
+    </div>
+
+    <div class="basis-1/3 ml-2">
+      <h2>Demo controls, settings and status</h2>
 
       <div class="p-4 border-2 mb-2">
+        <label for="table-select">Demo data</label>
         <select
+          id="table-select"
           @change="refetch()"
           v-model="sampleType"
           class="border-1 border-black"
diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index afea50f44e..8c9167d447 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -5,8 +5,12 @@ const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""
   : "/apps/tailwind-components/#/";
 
-test("it should render the form", async ({ page }) => {
+test.beforeEach(async ({ page }) => {
   await page.goto(`${route}Form.story`);
+  await page.getByLabel("name").click({ delay: 500 }); // wait for hydration to complete
+});
+
+test("it should render the form", async ({ page }) => {
   await page.goto(
     "https://emx2.dev.molgenis.org/apps/tailwind-components/#/Form.story"
   );
@@ -22,10 +26,24 @@ test("it should render the form", async ({ page }) => {
 });
 
 test("it should handle input", async ({ page }) => {
-  await page.goto(`${route}Form.story`);
-  await page.getByLabel("name").click({ delay: 500 }); // wait for hydration to complete
   await page.getByLabel("name").pressSequentially("test");
   await expect(page.getByLabel("name")).toHaveValue("test");
   await page.getByRole("heading", { name: "Values" }).click();
   await expect(page.getByRole("definition")).toContainText("test");
 });
+
+test("it should show the chapters in the legend", async ({ page }) => {
+  await expect(page.getByRole("link", { name: "details" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "Heading2" })).toBeVisible();
+});
+
+test("the legend should show number of errors per chapter (if any)", async ({
+  page,
+}) => {
+  await page.getByLabel("Demo data").selectOption("complex", { force: true });
+  // touch the form
+  await page.getByLabel("name", { exact: true }).click();
+  // skipe a required field
+  await page.getByLabel("name", { exact: true }).press("Tab");
+  await expect(page.locator("a").filter({ hasText: /^1$/ })).toBeVisible();
+});

From 3fca9b7f606891ac0f154f45e48f91ddba6b5a13 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 20 Jan 2025 16:25:31 +0100
Subject: [PATCH 03/16] put form field in scroll container in demo page

---
 apps/tailwind-components/pages/Form.story.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index 7abeafc13b..bab62f67a2 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -105,7 +105,7 @@ function chapterErrorCount(chapterId: string) {
 
       <FormFields
         v-if="tableMeta && status == 'success'"
-        class="basis-2/3 p-8 border-l"
+        class="basis-2/3 p-8 border-l overflow-y-auto h-screen"
         ref="formFields"
         :metadata="tableMeta"
         :data="data"

From f88554c876c4592a7a7c20197822fc7a226e0ca7 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 22 Jan 2025 08:55:36 +0100
Subject: [PATCH 04/16] feat: scroll to chapter

---
 .../components/form/Fields.vue                   |  2 ++
 .../components/form/Legend.vue                   | 16 ++++++++++++----
 .../tests/components/form/renderForm.spec.ts     |  7 +++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/tailwind-components/components/form/Fields.vue b/apps/tailwind-components/components/form/Fields.vue
index 55fcedc568..b73150b1ad 100644
--- a/apps/tailwind-components/components/form/Fields.vue
+++ b/apps/tailwind-components/components/form/Fields.vue
@@ -102,12 +102,14 @@ defineExpose({ validate });
     <div class="first:pt-0 pt-10" v-for="chapter in chapters">
       <h2
         class="font-display md:text-heading-5xl text-heading-5xl text-form-header pb-8"
+        :id="`${chapter.title}-chapter-title`"
         v-if="chapter.title !== '_NO_CHAPTERS'"
       >
         {{ chapter.title }}
       </h2>
       <div class="pb-8" v-for="column in chapter.columns">
         <FormField
+          :id="`${column.id}-form-field`"
           :column="column"
           :data="dataMap[column.id]"
           :errors="errorMap[column.id]"
diff --git a/apps/tailwind-components/components/form/Legend.vue b/apps/tailwind-components/components/form/Legend.vue
index 6ecc6d03cf..e91a8215b0 100644
--- a/apps/tailwind-components/components/form/Legend.vue
+++ b/apps/tailwind-components/components/form/Legend.vue
@@ -5,17 +5,16 @@
       <li
         v-for="section in sections"
         class="group felx flex items-center"
-        @click="emit('gotoSection', section)"
+        @click="handleGotoRequest(section)"
       >
         <div
           class="h-[24px] w-1 group-hover:bg-button-primary"
           :class="{ 'bg-button-primary': section.isActive }"
         />
-        <a
+        <span
           class="pl-4 text-title capitalize"
           :class="{ 'font-bold': section.isActive }"
-          :href="`#${section.domId}`"
-          >{{ section.label }}</a
+          >{{ section.label }}</span
         >
         <span v-if="(section.errorCount ?? 0) > 0" class="ml-2">
           <a :href="`#${section.domId}`">
@@ -51,4 +50,13 @@ defineProps<{
 }>();
 
 const emit = defineEmits(["gotoSection"]);
+
+function handleGotoRequest(section: IFormLegendSection) {
+  document.getElementById(`${section.domId}-chapter-title`)?.scrollIntoView({
+    behavior: "smooth",
+    block: "center",
+  });
+
+  emit("gotoSection", section);
+}
 </script>
diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index 8c9167d447..9795168016 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -47,3 +47,10 @@ test("the legend should show number of errors per chapter (if any)", async ({
   await page.getByLabel("name", { exact: true }).press("Tab");
   await expect(page.locator("a").filter({ hasText: /^1$/ })).toBeVisible();
 });
+
+test("clicking on the chapter should scroll to the chapter", async ({
+  page,
+}) => {
+  await page.getByText("Heading2", { exact: true }).click();
+  await expect(page.getByRole("heading", { name: "heading2" })).toBeVisible();
+});

From c4278b25910654bd2a47ab6111037c8ecc01d13e Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 22 Jan 2025 12:45:53 +0100
Subject: [PATCH 05/16] add temp code to highlight active chapter

---
 apps/tailwind-components/pages/Form.story.vue | 71 ++++++++++++++-----
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index bab62f67a2..66dba2909b 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -43,7 +43,6 @@ const formFields = ref<InstanceType<typeof FormFields>>();
 const formValues = ref<Record<string, columnValue>>({});
 
 function onModelUpdate(value: Record<string, columnValue>) {
-  console.log("story update", value);
   formValues.value = value;
 }
 
@@ -53,23 +52,6 @@ function onErrors(newErrors: Record<string, IFieldError[]>) {
   errors.value = newErrors;
 }
 
-const sections = computed(() => {
-  return tableMeta.value.columns
-    .filter((column: IColumn) => column.columnType == "HEADING")
-    .map((column: IColumn) => {
-      return {
-        label: column.label,
-        domId: column.id,
-        isActive: false,
-        errorCount: chapterErrorCount(column.id),
-      };
-    });
-});
-
-function handleGotoRequest(section: IFormLegendSection) {
-  console.log("Goto request for section", section);
-}
-
 function chapterFieldIds(chapterId: string) {
   const chapterFieldIds = [];
   let inChapter = false;
@@ -90,6 +72,57 @@ function chapterErrorCount(chapterId: string) {
     return acc + (errors.value[fieldId]?.length ?? 0);
   }, 0);
 }
+
+const currentSectionDomId = ref("");
+
+const sections = computed(() => {
+  return tableMeta.value?.columns
+    .filter((column: IColumn) => column.columnType == "HEADING")
+    .map((column: IColumn) => {
+      return {
+        label: column.label,
+        domId: column.id,
+        isActive: currentSectionDomId.value.startsWith(column.id),
+        errorCount: chapterErrorCount(column.id),
+      };
+    });
+});
+
+function setUpChapterIsInViewObserver() {
+  console.log("setting up observer for chapters in table " + tableId.value);
+  if (import.meta.client) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const id = entry.target.getAttribute("id");
+          console.log("entry", id, entry.intersectionRatio);
+          if (id && entry.intersectionRatio > 0) {
+            currentSectionDomId.value = id;
+          }
+        });
+      },
+      {
+        root: formFields.value?.$el,
+        rootMargin: "0px",
+        threshold: 0.5,
+      }
+    );
+
+    document.querySelectorAll("[id$=chapter-title]").forEach((section) => {
+      observer.observe(section);
+    });
+  }
+}
+
+setUpChapterIsInViewObserver();
+
+watch(
+  () => tableMeta.value,
+  async () => {
+    await nextTick();
+    setUpChapterIsInViewObserver();
+  }
+);
 </script>
 
 <template>
@@ -97,9 +130,9 @@ function chapterErrorCount(chapterId: string) {
     <div id="mock-form-contaner" class="basis-2/3 flex flex-row border">
       <div class="basis-1/3">
         <FormLegend
+          v-if="sections"
           class="bg-sidebar-gradient mx-4"
           :sections="sections"
-          @goto-section="handleGotoRequest"
         />
       </div>
 

From 929e76d7b7450f74b9d80f7ddf3ad0c8e0503adf Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 22 Jan 2025 13:20:05 +0100
Subject: [PATCH 06/16] fix: use scroll padding to make sure the header is in
 view on scrollto

---
 apps/tailwind-components/components/form/Fields.vue | 2 +-
 apps/tailwind-components/components/form/Legend.vue | 4 ++--
 apps/tailwind-components/pages/Form.story.vue       | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/tailwind-components/components/form/Fields.vue b/apps/tailwind-components/components/form/Fields.vue
index b73150b1ad..cf3c75cb70 100644
--- a/apps/tailwind-components/components/form/Fields.vue
+++ b/apps/tailwind-components/components/form/Fields.vue
@@ -101,7 +101,7 @@ defineExpose({ validate });
   <div>
     <div class="first:pt-0 pt-10" v-for="chapter in chapters">
       <h2
-        class="font-display md:text-heading-5xl text-heading-5xl text-form-header pb-8"
+        class="font-display md:text-heading-5xl text-heading-5xl text-form-header pb-8 scroll-mt-20"
         :id="`${chapter.title}-chapter-title`"
         v-if="chapter.title !== '_NO_CHAPTERS'"
       >
diff --git a/apps/tailwind-components/components/form/Legend.vue b/apps/tailwind-components/components/form/Legend.vue
index e91a8215b0..8a67e5b9f5 100644
--- a/apps/tailwind-components/components/form/Legend.vue
+++ b/apps/tailwind-components/components/form/Legend.vue
@@ -4,7 +4,7 @@
     <ul class="list-none space-y-3">
       <li
         v-for="section in sections"
-        class="group felx flex items-center"
+        class="group felx flex items-center cursor-pointer"
         @click="handleGotoRequest(section)"
       >
         <div
@@ -54,7 +54,7 @@ const emit = defineEmits(["gotoSection"]);
 function handleGotoRequest(section: IFormLegendSection) {
   document.getElementById(`${section.domId}-chapter-title`)?.scrollIntoView({
     behavior: "smooth",
-    block: "center",
+    block: "start",
   });
 
   emit("gotoSection", section);
diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index 66dba2909b..6e29f32161 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -89,7 +89,6 @@ const sections = computed(() => {
 });
 
 function setUpChapterIsInViewObserver() {
-  console.log("setting up observer for chapters in table " + tableId.value);
   if (import.meta.client) {
     const observer = new IntersectionObserver(
       (entries) => {

From 4277aab964fedddc731607736fbebdcc9bb61df4 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 22 Jan 2025 13:27:04 +0100
Subject: [PATCH 07/16] update test for html changes

---
 .../tests/components/form/renderForm.spec.ts                | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index 9795168016..f5ea81457b 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -33,8 +33,10 @@ test("it should handle input", async ({ page }) => {
 });
 
 test("it should show the chapters in the legend", async ({ page }) => {
-  await expect(page.getByRole("link", { name: "details" })).toBeVisible();
-  await expect(page.getByRole("link", { name: "Heading2" })).toBeVisible();
+  await expect(
+    page.locator("span").filter({ hasText: "details" })
+  ).toBeVisible();
+  await expect(page.getByText("Heading2", { exact: true })).toBeVisible();
 });
 
 test("the legend should show number of errors per chapter (if any)", async ({

From 77e13467b166a300d8c8d9a574e6ed2fdcaf3c63 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 22 Jan 2025 13:42:48 +0100
Subject: [PATCH 08/16] update test for dom changes

---
 .../tests/components/form/renderForm.spec.ts                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index f5ea81457b..271dcfcb5f 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -47,7 +47,7 @@ test("the legend should show number of errors per chapter (if any)", async ({
   await page.getByLabel("name", { exact: true }).click();
   // skipe a required field
   await page.getByLabel("name", { exact: true }).press("Tab");
-  await expect(page.locator("a").filter({ hasText: /^1$/ })).toBeVisible();
+  await expect(page.locator("span").filter({ hasText: /^2$/ })).toBeVisible();
 });
 
 test("clicking on the chapter should scroll to the chapter", async ({

From ac6abeed2129f641e2b318bb1805167fad38c8e5 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 22 Jan 2025 14:02:00 +0100
Subject: [PATCH 09/16] remove console logs

---
 apps/tailwind-components/pages/Form.story.vue   | 1 -
 apps/tailwind-components/pages/Legend.story.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index 6e29f32161..d50d6383bf 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -94,7 +94,6 @@ function setUpChapterIsInViewObserver() {
       (entries) => {
         entries.forEach((entry) => {
           const id = entry.target.getAttribute("id");
-          console.log("entry", id, entry.intersectionRatio);
           if (id && entry.intersectionRatio > 0) {
             currentSectionDomId.value = id;
           }
diff --git a/apps/tailwind-components/pages/Legend.story.vue b/apps/tailwind-components/pages/Legend.story.vue
index 6ebcc5e644..9d285b7b65 100644
--- a/apps/tailwind-components/pages/Legend.story.vue
+++ b/apps/tailwind-components/pages/Legend.story.vue
@@ -13,7 +13,6 @@
 import type { IFormLegendSection } from "../../metadata-utils/src/types";
 
 function handleGotoRequest(section: IFormLegendSection) {
-  console.log("Goto request for section", section);
   sections.value.forEach((s) => {
     if (s.domId === section.domId) {
       s.isActive = true;

From 8ace8301ac3dcc099b403b33ccc3f5d81d805b6f Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 11:04:43 +0100
Subject: [PATCH 10/16] capitalize

---
 apps/tailwind-components/components/form/Legend.vue | 4 ++--
 apps/tailwind-components/pages/Legend.story.vue     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/tailwind-components/components/form/Legend.vue b/apps/tailwind-components/components/form/Legend.vue
index 8a67e5b9f5..6db93bfd32 100644
--- a/apps/tailwind-components/components/form/Legend.vue
+++ b/apps/tailwind-components/components/form/Legend.vue
@@ -49,7 +49,7 @@ defineProps<{
   sections: IFormLegendSection[];
 }>();
 
-const emit = defineEmits(["gotoSection"]);
+const emit = defineEmits(["goToSection"]);
 
 function handleGotoRequest(section: IFormLegendSection) {
   document.getElementById(`${section.domId}-chapter-title`)?.scrollIntoView({
@@ -57,6 +57,6 @@ function handleGotoRequest(section: IFormLegendSection) {
     block: "start",
   });
 
-  emit("gotoSection", section);
+  emit("goToSection", section);
 }
 </script>
diff --git a/apps/tailwind-components/pages/Legend.story.vue b/apps/tailwind-components/pages/Legend.story.vue
index 9d285b7b65..6caa4fbb20 100644
--- a/apps/tailwind-components/pages/Legend.story.vue
+++ b/apps/tailwind-components/pages/Legend.story.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-row">
     <div class="basis-1/2 bg-sidebar-gradient">
-      <FormLegend :sections="sections" @goto-section="handleGotoRequest" />
+      <FormLegend :sections="sections" @go-to-section="handleGotoRequest" />
     </div>
     <div class="basis-1/2 text-title p-4">
       <h3>Active section: {{ sections.find((s) => s.isActive) }}</h3>

From f2886c5b391f9b5e780378129194936616e06f16 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 11:07:35 +0100
Subject: [PATCH 11/16] capitalize

---
 apps/tailwind-components/pages/Legend.story.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/pages/Legend.story.vue b/apps/tailwind-components/pages/Legend.story.vue
index 6caa4fbb20..e67afb9cde 100644
--- a/apps/tailwind-components/pages/Legend.story.vue
+++ b/apps/tailwind-components/pages/Legend.story.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-row">
     <div class="basis-1/2 bg-sidebar-gradient">
-      <FormLegend :sections="sections" @go-to-section="handleGotoRequest" />
+      <FormLegend :sections="sections" @go-to-section="handleGoToRequest" />
     </div>
     <div class="basis-1/2 text-title p-4">
       <h3>Active section: {{ sections.find((s) => s.isActive) }}</h3>
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import type { IFormLegendSection } from "../../metadata-utils/src/types";
 
-function handleGotoRequest(section: IFormLegendSection) {
+function handleGoToRequest(section: IFormLegendSection) {
   sections.value.forEach((s) => {
     if (s.domId === section.domId) {
       s.isActive = true;

From b7f9d5fd9b07b7c817ab641e48b8702082920eec Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 11:09:00 +0100
Subject: [PATCH 12/16] fix typo

---
 .../tests/components/form/renderForm.spec.ts                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index 271dcfcb5f..b24f41bfc7 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -45,7 +45,7 @@ test("the legend should show number of errors per chapter (if any)", async ({
   await page.getByLabel("Demo data").selectOption("complex", { force: true });
   // touch the form
   await page.getByLabel("name", { exact: true }).click();
-  // skipe a required field
+  // skip a required field
   await page.getByLabel("name", { exact: true }).press("Tab");
   await expect(page.locator("span").filter({ hasText: /^2$/ })).toBeVisible();
 });

From 93dac1509d7efb858d3ec27774f05a41213281c2 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 11:39:33 +0100
Subject: [PATCH 13/16] fix legend error count for firefox

---
 .../components/form/Legend.vue                | 24 ++++---------------
 1 file changed, 5 insertions(+), 19 deletions(-)

diff --git a/apps/tailwind-components/components/form/Legend.vue b/apps/tailwind-components/components/form/Legend.vue
index 6db93bfd32..2b0959353d 100644
--- a/apps/tailwind-components/components/form/Legend.vue
+++ b/apps/tailwind-components/components/form/Legend.vue
@@ -17,25 +17,11 @@
           >{{ section.label }}</span
         >
         <span v-if="(section.errorCount ?? 0) > 0" class="ml-2">
-          <a :href="`#${section.domId}`">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-[20px] w-[20] inline-block"
-              viewBox="0 0 20 20"
-            >
-              <circle cx="10" cy="10" r="10" class="fill-notification" />
-              <text
-                x="10"
-                y="10"
-                font-size="smaller"
-                text-anchor="middle"
-                alignment-baseline="central"
-                class="stroke-notification-text fill-notification-text"
-              >
-                {{ section.errorCount }}
-              </text>
-            </svg>
-          </a>
+          <div
+            class="flex h-5 w-5 shrink-0 grow-0 items-center justify-center rounded-full bg-notification text-legend-error-count"
+          >
+            {{ section.errorCount }}
+          </div>
         </span>
       </li>
     </ul>

From f572549a1512dd77e207b55bfe8033b9b423ea80 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 11:48:04 +0100
Subject: [PATCH 14/16] fix equals

---
 apps/tailwind-components/pages/Form.story.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index d50d6383bf..cdf8d01b24 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -4,7 +4,6 @@ import type {
   columnValue,
   IColumn,
   IFieldError,
-  IFormLegendSection,
   ISchemaMetaData,
   ITableMetaData,
 } from "../../metadata-utils/src/types";
@@ -135,7 +134,7 @@ watch(
       </div>
 
       <FormFields
-        v-if="tableMeta && status == 'success'"
+        v-if="tableMeta && status === 'success'"
         class="basis-2/3 p-8 border-l overflow-y-auto h-screen"
         ref="formFields"
         :metadata="tableMeta"

From 661d4a9280be05c3791a426dd449344ad99a843c Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 13:57:15 +0100
Subject: [PATCH 15/16] fix: wait for mount before calling observer setup

---
 apps/tailwind-components/pages/Form.story.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index cdf8d01b24..7c3df99dfa 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -111,7 +111,7 @@ function setUpChapterIsInViewObserver() {
   }
 }
 
-setUpChapterIsInViewObserver();
+onMounted(() => setUpChapterIsInViewObserver());
 
 watch(
   () => tableMeta.value,

From a384071a2ce3b661cf1833e0ec87bfd3979e67d3 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 15:50:17 +0100
Subject: [PATCH 16/16] fix test

---
 .../tests/components/form/renderForm.spec.ts             | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index b24f41bfc7..965799f567 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -11,13 +11,8 @@ test.beforeEach(async ({ page }) => {
 });
 
 test("it should render the form", async ({ page }) => {
-  await page.goto(
-    "https://emx2.dev.molgenis.org/apps/tailwind-components/#/Form.story"
-  );
-  await expect(page.getByRole("main")).toContainText("bool");
-  await expect(page.getByRole("main")).toContainText(
-    "place holder for field type BOOL"
-  );
+  await expect(page.getByRole("main")).toContainText("name");
+  await expect(page.getByRole("main")).toContainText("the name");
   await expect(page.getByRole("main")).toContainText("date");
   await expect(page.getByRole("main")).toContainText("name");
   await expect(page.getByRole("main")).toContainText("Required");