Add click to CircleDiagram to scroll to LearningSequence

client/src/components/circle/CircleDiagram.vue

@@ -52,6 +52,7 @@ const pieData = computed(() => {
       pie.endAngle = pie.endAngle + Math.PI
       pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
       pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
+      pie.translation_key = thisLearningSequence.translation_key
       pie.done = someFinished(thisLearningSequence)
     })
     angles = angles.reverse()
@@ -77,8 +78,7 @@ function render() {
 
 
   const svg = d3.select('.circle-visualization')
-    .attr('width', width)
+    .attr('viewBox', `0 0 ${width} ${height}`)
-    .attr('height', height)
 
   // Append markter as definition to the svg
   svg.append("svg:defs").append("svg:marker")
@@ -134,6 +134,10 @@ function render() {
           return d.done ? sky500 : gray300
         })
     })
+    .on('click', function (d, elm) {
+      console.log('clicked on ', d, elm)
+      document.getElementById(elm.translation_key)?.scrollIntoView({behavior: 'smooth'})
+    })
 
   learningSequences
     .transition()
@@ -212,11 +216,6 @@ function render() {
   return svg
 }
 
-function viewBox() {
-  return `0 0 ${props.width} ${props.height}`
-}
-
-
 </script>
 
 
@@ -224,7 +223,7 @@ function viewBox() {
   <div class="svg-container h-full content-center">
     <pre hidden>{{ pieData }}</pre>
     <pre hidden>{{render()}}</pre>
-    <svg class="circle-visualization h-full" :viewBox="viewBox()">
+    <svg class="circle-visualization h-full">
     </svg>
   </div>
 </template>

client/src/components/circle/LearningSequence.vue

@@ -25,7 +25,7 @@ const someFinished = computed(() => {
 </script>
 
 <template>
-  <div class="mb-8 learning-sequence">
+  <div class="mb-8 learning-sequence" :id="learningSequence.translation_key">
     <div class="flex items-center gap-4 mb-2">
       <component :is="learningSequence.icon" />
       <h3 class="text-xl">