move Logger to tab content (#7)

src/components/Logger.vue

@@ -34,17 +34,24 @@ const props = defineProps<{
   width?: number;
   height?: number;
   cssClasses?: string;
+  target?: string;
 }>();
+
 const store = useStore();
 const { time } = toRefs(store);
-store.registerOutput("protein-mCherry");
+const { target } = toRefs(props);
+
+console.log("TARGET:" + target.value);
+
+store.registerOutput(target.value);
 onUnmounted(() => {
-  store.UnregisterOutput("protein-mCherry");
+  store.UnregisterOutput(target.value);
 });
 
 watch(time, () => {
   chartData.value.datasets[0].data[time.value] =
-    store.runnerOutputs["protein-mCherry"];
+    store.runnerOutputs[target.value];
+  console.log(store.runnerOutputs[target.value]);
 });
 
 const chartData = ref({

src/components/Property.vue

@@ -13,7 +13,6 @@
       <tab-protein v-if="activeTab === 'Protein'" />
       <tab-questions v-if="activeTab === 'Questions'" />
       <tab-load v-if="activeTab === 'Load'" />
-      <logger />
     </div>
   </div>
 </template>
@@ -26,7 +25,6 @@ import TabMessengerRNA from "@/components/TabMessengerRNA.vue";
 import TabProtein from "@/components/TabProtein.vue";
 import TabQuestions from "@/components/TabQuestions.vue";
 import TabLoad from "@/components/TabLoad.vue";
-import Logger from "./Logger.vue";
 
 const store = useStore();
 const { run, stop } = store;

src/components/TabMessengerRNA.vue

@@ -7,6 +7,7 @@
     />
     <div class="mRNA-settings" v-if="activeMessengerRNA">
       <h3>{{ activeMessengerRNAName }}</h3>
+      <Logger :target="activeMessengerRNAName" />
       Promoter(s):
       <list-box :list="promoterNames" v-model="activePromoterName" />
       <section v-if="activePromoter">
@@ -21,6 +22,7 @@
 import { computed, watch, ref } from "vue";
 import { useStore } from "@/store";
 import ListBox from "@/components/ListBox.vue";
+import Logger from "./Logger.vue";
 
 const store = useStore();
 const mRNANames = computed(() =>

src/components/TabProtein.vue

@@ -8,6 +8,7 @@
     <div class="protein-settings" v-if="activeProtein">
       <h3>{{ activeProteinName }}</h3>
       {{ activeProtein.description }}<br />
+      <Logger :target="activeProteinName" />
       mRNA(s):<br />
       <list-box :list="activeProteinMessengerRNAs" />
     </div>
@@ -19,6 +20,7 @@ import { computed, watch, ref } from "vue";
 import { useStore } from "@/store";
 import ListBox from "@/components/ListBox.vue";
 import LineChart from "@/components/Logger.vue";
+import Logger from "./Logger.vue";
 
 const store = useStore();