Merge branch 'main' into emoji_chooser_try

CHANGELOG.md

@@ -1,5 +1,13 @@
 # easyNWK Version History
 
+## version 2.4.0, released 28 Aug 2024
+
+* (feature) opening and importing .nwk files created with easyNWK 1.5
+* (feature) revised simple statistics for practicioneers (incl. Nähe, stdev, counts by gender and horizon)
+* (feature) revised statistics export (one line per versions and column of the statistics panel)
+* (usability) better feedback on opening unsuitable files
+* (security) various updates of libraries
+
 ## version 2.3.0, released 8 Jul 2024
 
 * (feature) font-size of alteri labels can be changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easynwk",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": true,
   "author": "Alexander Rind (https://github.com/alex-rind/)",
   "repository": "https://github.com/fhstp/easynwk-web/",

src/assets/main.scss

@@ -44,6 +44,13 @@ $panel-shadow: none;
   border-right: 1px solid #dbdbdb;
 }
 
+// equal height with or without large icon
+.panel-heading {
+  padding-top: 0.6em;
+  padding-bottom: 0.2em;
+  min-height: 2.5em;
+}
+
 .clickAble {
   cursor: pointer;
 }

src/components/ComparisonOptionsPanel.vue

@@ -70,13 +70,6 @@
                   <span>{{ t("duplicateversion") }}</span>
                 </button>
 
-                <button class="button" @click.stop="toggleChange">
-                  <span class="icon">
-                    <font-awesome-icon icon="exchange-alt" />
-                  </span>
-                  <span>{{ t("changeversion") }}</span>
-                </button>
-
                 <!-- TODO hide comparison button in the production code in main branch
                 <button class="button" @click.stop="toggleComparison" disabled>
                   <span class="icon">
@@ -245,10 +238,6 @@ export default defineComponent({
     };
 
     return {
-      nwkcomparison: computed(() => store.state.session.nwkcomparison),
-      nwkchange: computed(() => store.state.session.nwkchange),
-      toggleComparison: () => store.commit("session/toggle", "nwkcomparison"),
-      toggleChange: () => store.commit("session/toggle", "nwkchange"),
       editText: editText,
       isOpen: isOpen,
       newVersion: newVersion,

src/components/ComparisonSlider.vue

@@ -12,27 +12,15 @@
       @click="() => handleCircleClick(mark.d.id)"
     >
       <circle
-        v-if="changeNWK"
         :cx="mark.x"
         cy="-113"
-        r="2"
+        r="1.5"
         :class="{
           comparisonCircle: !mark.selected,
           'comparisonCircle-selected': mark.selected,
         }"
       />
-      <!-- TODO check if different template elements necessary-->
-      <circle
-        v-if="showComparison"
-        :cx="mark.x"
-        cy="-113"
-        r="2"
-        :class="{
-          comparisonCircle: !mark.selected,
-          'comparisonCircle-selected': mark.selected,
-        }"
-        @click="() => handleComparisonClick(mark.d.id)"
-      />
+      <!-- TODO optionally a different shape/style if in juxtaposed version mode -->
       <text :x="mark.x" y="-108" text-anchor="middle" class="versionText">
         {{ mark.label }}
       </text>
@@ -99,9 +87,9 @@ export default defineComponent({
           versionId !== store.state.record.currentVersion
       );
       if (clickedVersion) {
-        console.log(`Clicked version: ${clickedVersion.title}`);
+        // console.log(`Clicked version: ${clickedVersion.title}`);
         store.commit("switchNWK", versionId);
-        console.log("Changed Version");
+        // console.log("Changed Version");
       }
     }
 
@@ -121,8 +109,6 @@ export default defineComponent({
       versionMarks,
       handleCircleClick,
       handleComparisonClick,
-      showComparison: computed(() => store.state.session.nwkcomparison),
-      changeNWK: computed(() => store.state.session.nwkchange),
     };
   },
 });
@@ -141,10 +127,12 @@ line {
 }
 
 .comparisonCircle {
-  fill: #d6dae9;
+  stroke: #d6dae9;
+  fill: white;
 }
 
 .comparisonCircle-selected {
+  stroke: $color-primary-1;
   fill: $color-primary-1;
 }
 </style>

src/components/NetworkMap.vue

@@ -2,7 +2,7 @@
   <svg
     id="nwkmap"
     :viewBox="
-      showComparisonSlider && !isEditMode
+      showVersionSlider && !isEditMode
         ? '-110 -117 220 220'
         : '-106 -106 212 212'
     "
@@ -192,7 +192,7 @@
     <text :x="0" y="-102" text-anchor="middle" class="ego">
       {{ egoLabel }}
     </text>
-    <ComparisonSlider v-if="showComparisonSlider && !isEditMode" />
+    <ComparisonSlider v-if="showVersionSlider && !isEditMode" />
   </svg>
   <div id="zoomBtns">
     <button
@@ -801,9 +801,7 @@ export default defineComponent({
             /Apple Computer/.test(navigator.vendor)
           )
       ),
-      showComparisonSlider: computed(
-        () => store.state.session.nwkchange || store.state.session.nwkcomparison
-      ),
+      showVersionSlider: computed(() => store.state.record.versions.length > 1),
     };
   },
 });

src/components/SideMenu.vue

@@ -104,15 +104,6 @@
           </span>
           <span>{{ t("createPDF") }}</span>
         </a>
-
-        <p><br /></p>
-
-        <button class="button" @click="showStatistics">
-          <span class="icon">
-            <font-awesome-icon icon="chart-bar" />
-          </span>
-          <span>{{ t("keyfigures") }}</span>
-        </button>
       </div>
 
       <div class="links">
@@ -282,22 +273,16 @@ export default defineComponent({
         );
       },
       exportCSV: () => {
+        const today = new Date();
         downloadText(
           store.state.nwk.ego.name +
             " " +
-            visibleNWKVersion.value?.title +
-            " " +
-            visibleNWKVersion.value?.date?.substring(8, 10) +
-            "." +
-            visibleNWKVersion.value?.date?.substring(5, 7) +
-            "." +
-            visibleNWKVersion.value?.date?.substring(0, 4) +
+            today.toLocaleDateString("en-CA") +
             ".csv",
-          statisticsCSV(store.state.nwk, store.getters["displayName"])
+          statisticsCSV(store.state.record.versions)
         );
       },
 
-      showStatistics: () => store.commit("session/enable", "statistics"),
       pseudonyms: computed(() => store.state.pseudonym.active),
       togglePseudonyms: () => store.commit("pseudonym/toggle"),
       horizons: computed(() => store.state.view.horizons),

src/components/StatisticsPanel.vue

@@ -1,16 +1,17 @@
 <template>
   <nav class="panel">
-    <p class="panel-heading" style="display: flex">
+    <p class="panel-heading" style="display: flex" @click.stop="isOpen = !isOpen">
       <span class="icon is-medium">
         <font-awesome-icon icon="chart-bar" size="lg" />
       </span>
       <span>{{ t("keyfigures") }}</span>
       <span style="flex: 1">&nbsp;</span>
-      <span class="icon is-medium clickAble" @click="hideStatistics">
-        <font-awesome-icon icon="times" size="1x" />
+      <span class="icon is-medium clickAble">
+        <font-awesome-icon v-if="isOpen" icon="chevron-up" />
+        <font-awesome-icon v-else icon="chevron-down" size="1x" />
       </span>
     </p>
-    <p class="panel-tabs">
+    <p class="panel-tabs" v-if="isOpen">
       <a
         v-for="cat in categories"
         :key="cat"
@@ -20,11 +21,12 @@
         {{ translateCategoryKey(categoryLabel(cat)) }}</a
       >
     </p>
-    <StatisticsTable v-if="tab === ''"></StatisticsTable>
+    <StatisticsTable v-if="isOpen && tab === ''"></StatisticsTable>
     <StatisticsTableCategories
-      v-else
+      v-else-if="isOpen"
       :categories="tab"
     ></StatisticsTableCategories>
+    <div class="panel-block" v-else />
   </nav>
 </template>
 
@@ -62,6 +64,9 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
+    // whether panel is collapsed is managed locally
+    const isOpen = ref(false);
+
     const tab = ref("");
 
     const go = (newTab: string) => {
@@ -77,11 +82,9 @@ export default defineComponent({
       categoryLabel: computed(
         () => (cat: string) => getAlterCategorization(cat).label
       ),
+      isOpen,
       tab,
       go,
-      hideStatistics: () => {
-        store.commit("session/disable", "statistics");
-      },
     };
   },
 });