--- a/client/src/components/importoverview/StretchDetails.vue	Tue Mar 12 16:16:43 2019 +0100
+++ b/client/src/components/importoverview/StretchDetails.vue	Tue Mar 12 17:08:49 2019 +0100
@@ -1,5 +1,10 @@
 <template>
-  <div>Stretches Detail</div>
+  <div>
+    <span class="empty">&nbsp;</span>
+    <a @click="zoomToStretch()" class="text-info pointer">{{
+      entry.summary.stretch
+    }}</a>
+  </div>
 </template>
 
 <script>
@@ -16,8 +21,40 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
+import { displayError } from "@/lib/errors.js";
+import { LAYERS } from "@/store/map.js";
+
 export default {
-  name: "stretchdetails"
+  name: "stretchdetails",
+  props: ["entry"],
+  methods: {
+    moveToExtent(feature) {
+      this.$store.commit("map/moveToExtent", {
+        feature: feature,
+        zoom: 17,
+        preventZoomOut: true
+      });
+    },
+    zoomToStretch() {
+      const name = this.entry.summary.stretch;
+      this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
+      this.$store
+        .dispatch("imports/loadStretch", name)
+        .then(response => {
+          if (response.data.features.length < 1)
+            throw new Error("no feaures found for: " + name);
+          this.moveToExtent(response.data.features[0]);
+        })
+        .catch(error => {
+          console.log(error);
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    }
+  }
 };
 </script>