--- a/client/src/components/importoverview/LogDetail.vue	Thu Sep 05 17:18:31 2019 +0200
+++ b/client/src/components/importoverview/LogDetail.vue	Fri Sep 06 11:15:49 2019 +0200
@@ -102,7 +102,7 @@
       return this.kind === "BN" || this.kind === "UBN";
     },
     isST() {
-      return this.kind === "ST";
+      return this.kind === "STSH";
     },
     isSEC() {
       return this.kind === "SEC";

--- a/client/src/components/importoverview/StretchDetails.vue	Thu Sep 05 17:18:31 2019 +0200
+++ b/client/src/components/importoverview/StretchDetails.vue	Fri Sep 06 11:15:49 2019 +0200
@@ -5,30 +5,32 @@
       split: showLogs
     }"
   >
-    <div v-if="!details.summary.stretch" class="d-flex">
-      <UISpinnerButton
-        @click="showDetails = !showDetails"
-        :state="showDetails"
-        :icons="['angle-right', 'angle-down']"
-        classes="text-info"
-      />
-      <a @click="zoomToStretch()" class="text-info pointer"
-        >{{ details.summary.objnam }} (
-        {{ details.summary.countries.join(", ") }} )</a
+    <div v-if="details.summary.length > 0" class="d-flex flex-column">
+      <div
+        class="d-flex"
+        v-for="(stretch, index) in details.summary"
+        :key="index"
       >
-    </div>
-    <div>
-      <div v-if="showDetails">
+        <UISpinnerButton
+          @click="showDetailsFor(index)"
+          :state="showDetails == index"
+          :icons="['angle-right', 'angle-down']"
+          classes="text-info"
+        /><a @click="zoomToStretch(stretch)" class="text-info pointer">{{
+          linkText(stretch)
+        }}</a>
+      </div>
+      <div v-if="showDetails !== $options.NODETAILS">
         <div
-          v-for="(entry, index) in Object.keys(details.summary)"
+          v-for="(entry, index) in Object.keys(selectedDetails)"
           :key="index"
-          class="comparison row no-gutters px-4 text-left"
+          class="d-flex comparison row no-gutters px-4 text-left"
         >
           <span class="col-4">{{ entry }}</span>
           <span v-if="entry === 'countries'" class="col-4">{{
-            details.summary[entry].join(", ")
+            listCountries(selectedDetails[entry])
           }}</span>
-          <span v-else class="col-4">{{ details.summary[entry] }}</span>
+          <span v-else class="col-4">{{ selectedDetails[entry] }}</span>
         </div>
       </div>
     </div>
@@ -71,10 +73,12 @@
 import { displayError } from "@/lib/errors";
 import { mapState, mapGetters } from "vuex";
 
+const NODETAILS = -99;
+
 export default {
   data() {
     return {
-      showDetails: true
+      showDetails: NODETAILS
     };
   },
   props: ["entry"],
@@ -83,11 +87,34 @@
   },
   computed: {
     ...mapState("imports", ["showAdditional", "showLogs", "details"]),
-    ...mapGetters("map", ["openLayersMap"])
+    ...mapGetters("map", ["openLayersMap"]),
+    selectedDetails() {
+      if (this.showDetails === NODETAILS) return [];
+      return this.details.summary[this.showDetails];
+    }
   },
   methods: {
-    zoomToStretch() {
-      const { name } = this.details.summary;
+    listCountries(countries) {
+      if (!countries) return "";
+      return countries.join(", ");
+    },
+    showDetailsFor(index) {
+      if (index === this.showDetails) {
+        this.showDetails = NODETAILS;
+        return;
+      }
+      this.showDetails = index;
+    },
+    linkText(stretch) {
+      const name = stretch.objnam;
+      const { countries } = stretch;
+      const countryNames = !countries
+        ? ""
+        : `(${this.listCountries(countries)})`;
+      return `${name} ${countryNames}`;
+    },
+    zoomToStretch(stretch) {
+      const { name } = stretch;
       this.openLayersMap()
         .getLayer("STRETCHES")
         .setVisible(true);
@@ -115,6 +142,7 @@
           });
         });
     }
-  }
+  },
+  NODETAILS: NODETAILS
 };
 </script>