VBV-224: Only show selected circles on cockpit page

client/src/components/learningPath/LearningPathDiagram.vue

@@ -9,7 +9,7 @@ import colors from "@/colors.json";
 import type { Circle } from "@/services/circle";
 import type { LearningPath } from "@/services/learningPath";
 import type { LearningSequence, Topic } from "@/types";
-import { computed, onMounted, reactive } from "vue";
+import { computed, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 
 export type DiagramType = "horizontal" | "vertical" | "horizontalSmall";
@@ -19,15 +19,23 @@ export interface Props {
   postfix?: string;
   profileUserId?: string;
   learningPath: LearningPath;
+  // set to undefined (default) to show all circles
+  showCircleIds?: number[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   diagramType: "horizontal",
   postfix: "",
   profileUserId: "",
+  showCircleIds: undefined,
 });
 
-log.debug("LearningPathDiagram created", props.postfix, props.profileUserId);
+log.debug(
+  "LearningPathDiagram created",
+  props.postfix,
+  props.profileUserId,
+  props.showCircleIds
+);
 
 const state = reactive({ width: 1640, height: 384 });
 
@@ -46,6 +54,15 @@ onMounted(async () => {
   render();
 });
 
+watch(
+  () => props.showCircleIds,
+  (newCircleIds, oldCircleIds) => {
+    log.debug("LearningPathDiagram showCircleIds changed", newCircleIds, oldCircleIds);
+    render();
+  },
+  { deep: true }
+);
+
 function someFinished(circle: Circle, learningSequence: LearningSequence) {
   if (circle) {
     return circle.someFinishedInLearningSequence(learningSequence.translation_key);
@@ -82,6 +99,14 @@ interface InternalCircle {
   pieData: CirclePie[];
 }
 
+function isCircleVisible(circleId: number) {
+  if (props.showCircleIds) {
+    return props.showCircleIds.includes(circleId);
+  }
+
+  return true;
+}
+
 const circles = computed(() => {
   if (props.learningPath) {
     const internalCircles: InternalCircle[] = [];
@@ -102,13 +127,15 @@ const circles = computed(() => {
         pie.allFinished = allFinished(circle, thisLearningSequence);
       });
 
-      internalCircles.push({
-        pieData: pieData.reverse() as CirclePie[],
-        title: circle.title,
-        frontend_url: circle.frontend_url,
-        id: circle.id,
-        slug: _.kebabCase(circle.title),
-      });
+      if (isCircleVisible(circle.id)) {
+        internalCircles.push({
+          pieData: pieData.reverse() as CirclePie[],
+          title: circle.title,
+          frontend_url: circle.frontend_url,
+          id: circle.id,
+          slug: _.kebabCase(circle.title),
+        });
+      }
     });
     return internalCircles;
   }
@@ -116,6 +143,7 @@ const circles = computed(() => {
 });
 
 function render() {
+  log.debug("LearningPathDiagram render");
   // clean old svg
   d3.select("#" + svgId.value)
     .selectAll("*")
@@ -166,7 +194,13 @@ function render() {
     .data(circles.value)
     .enter()
     .append("g")
-    .attr("class", "circle")
+    .attr("class", (internalCircle) => {
+      let result = "circle";
+      if (!isCircleVisible(internalCircle.id)) {
+        result += " hidden";
+      }
+      return result;
+    })
     .attr("data-cy", (d) => {
       if (props.diagramType === "vertical") {
         return `circle-${d.slug}-vertical`;

client/src/pages/cockpit/CockpitIndexPage.vue

@@ -127,6 +127,7 @@ function setActiveClasses(id: number) {
                         "
                         :postfix="`cockpit-${csu.user_id}`"
                         :profile-user-id="`${csu.user_id}`"
+                        :show-circle-ids="cockpitStore.selectedCircles"
                         diagram-type="horizontalSmall"
                       ></LearningPathDiagram>
                     </div>