From 04fdc5456eeed1326c08188fbd0bf212304044e8 Mon Sep 17 00:00:00 2001
From: Eric Brelsford <ebrelsford@gmail.com>
Date: Fri, 17 Nov 2023 16:43:28 -0500
Subject: [PATCH 1/6] Update layout toward new designs

---
 vacs-map-app/package-lock.json                |  9 +++++
 vacs-map-app/package.json                     |  1 +
 vacs-map-app/src/App.vue                      |  8 +++++
 vacs-map-app/src/LandingPage.vue              | 22 +++++-------
 vacs-map-app/src/components/CropCards.vue     | 36 +++++++++++++++++++
 vacs-map-app/src/components/CropFilters.vue   | 11 ++++++
 vacs-map-app/src/components/OverviewTop.vue   |  5 +--
 .../src/components/pages/CropDetail.vue       | 18 ++++++++++
 .../src/components/pages/CropTypeOverview.vue |  5 ++-
 vacs-map-app/src/constants/topics.js          |  2 +-
 vacs-map-app/src/main.js                      |  4 ++-
 11 files changed, 101 insertions(+), 20 deletions(-)
 create mode 100644 vacs-map-app/src/components/CropCards.vue
 create mode 100644 vacs-map-app/src/components/CropFilters.vue
 create mode 100644 vacs-map-app/src/components/pages/CropDetail.vue

diff --git a/vacs-map-app/package-lock.json b/vacs-map-app/package-lock.json
index e0b89ed..914f1d4 100644
--- a/vacs-map-app/package-lock.json
+++ b/vacs-map-app/package-lock.json
@@ -15,6 +15,7 @@
         "mapbox-gl": "^3.0.0-rc.2",
         "pinia": "^2.1.7",
         "qs": "^6.11.2",
+        "slugify": "^1.6.6",
         "vue": "^3.3.4",
         "vue-router": "^4.2.5"
       },
@@ -2975,6 +2976,14 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
diff --git a/vacs-map-app/package.json b/vacs-map-app/package.json
index 1ed9026..feb0eca 100644
--- a/vacs-map-app/package.json
+++ b/vacs-map-app/package.json
@@ -18,6 +18,7 @@
     "mapbox-gl": "^3.0.0-rc.2",
     "pinia": "^2.1.7",
     "qs": "^6.11.2",
+    "slugify": "^1.6.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
index 2fb6d1c..12dce52 100644
--- a/vacs-map-app/src/App.vue
+++ b/vacs-map-app/src/App.vue
@@ -5,7 +5,15 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue';
 import { RouterView } from 'vue-router';
+import { useCropYieldsStore } from '@/stores/cropYields';
+
+const cropYieldsStore = useCropYieldsStore();
+
+onMounted(() => {
+  cropYieldsStore.load();
+});
 </script>
 
 <style scoped>
diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
index 3992e2b..e8b868b 100644
--- a/vacs-map-app/src/LandingPage.vue
+++ b/vacs-map-app/src/LandingPage.vue
@@ -2,16 +2,11 @@
   <LayoutOpen>
     <div class="map-wrapper-row">
       <div class="callout">
+        <div class="callout-header">
+          What crops have the most potential in climate change?
+        </div>
         <div class="callout-content">
-          How does
-          <select v-model="topic" class="topic-picker">
-            <option
-              v-for="t in topicUrlOptions"
-              :key="t.value"
-              :value="t.value"
-            >{{ t.label }}</option>
-          </select>
-          impact decisions about food security?
+The Vision for Adapted Crops and Soils (VACS) aims to foster more resilient food systems, with an initial focus on the African continent. VACS seeks to boost agricultural productivity and nutrition by developing diverse, climate-resilient crop varieties and building healthy soils. Keep reading
         </div>
         <button class="go-to-topic" @click="navigate">
           Find out
@@ -29,11 +24,9 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import LayoutOpen from '@/components/layouts/LayoutOpen.vue';
 import MapContainerColor from '@/components/MapContainerColor.vue';
-import { topicUrlOptions } from '@/constants/topics';
 
 const router = useRouter();
-const topic = ref(topicUrlOptions[0].value);
-const navigate = () => router.push(topic.value);
+const navigate = () => router.push('/crops');
 </script>
 
 <style scoped>
@@ -56,10 +49,13 @@ const navigate = () => router.push(topic.value);
   align-items: flex-start;
   justify-content: center;
   padding: 0 5rem;
-  font-size: 3em;
   flex-basis: 0;
   flex-grow: 1;
   gap: 2rem;
+}
+
+.callout-header {
+  font-size: 3em;
   line-height: 1.25em;
 }
 
diff --git a/vacs-map-app/src/components/CropCards.vue b/vacs-map-app/src/components/CropCards.vue
new file mode 100644
index 0000000..ae5ea85
--- /dev/null
+++ b/vacs-map-app/src/components/CropCards.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="crop-cards">
+    <div class="crop-card" v-for="crop in filteredCrops" :key="crop">
+      <router-link :to="`/crops/${slugify(crop)}`">
+        {{ crop }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import slugify from 'slugify';
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useFiltersStore } from '@/stores/filters';
+
+const filtersStore = useFiltersStore();
+const { availableCrops } = storeToRefs(filtersStore);
+
+// TODO actually filter
+const filteredCrops = computed(() => availableCrops.value);
+</script>
+
+<style scoped>
+.crop-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+.crop-card {
+  background: white;
+  border-radius: 10px;
+  height: 10rem;
+}
+</style>
diff --git a/vacs-map-app/src/components/CropFilters.vue b/vacs-map-app/src/components/CropFilters.vue
new file mode 100644
index 0000000..e7135fc
--- /dev/null
+++ b/vacs-map-app/src/components/CropFilters.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="crop-filters">
+    crop filters
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>
diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue
index 18d40da..dae5586 100644
--- a/vacs-map-app/src/components/OverviewTop.vue
+++ b/vacs-map-app/src/components/OverviewTop.vue
@@ -2,11 +2,8 @@
   <div class="overview-top">
     <div class="row">
       <div>
-        How does <TopicPicker :value="topic" /> impact decisions about food security?
+        What crops have the most potential in climate change?
       </div>
-      <NavigationButton to="/map-explore">Explore the map</NavigationButton>
-    </div>
-    <div class="row">
       <NavigationButton to="/">Go Back</NavigationButton>
     </div>
   </div>
diff --git a/vacs-map-app/src/components/pages/CropDetail.vue b/vacs-map-app/src/components/pages/CropDetail.vue
new file mode 100644
index 0000000..931426f
--- /dev/null
+++ b/vacs-map-app/src/components/pages/CropDetail.vue
@@ -0,0 +1,18 @@
+<template>
+  <LayoutOverview>
+    {{ slug }}
+  </LayoutOverview>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+
+const route = useRoute();
+
+// TODO handle fact that this is a slug (in case of multi-word crop names)
+const { slug } = route.params;
+</script>
+
+<style scoped>
+</style>
diff --git a/vacs-map-app/src/components/pages/CropTypeOverview.vue b/vacs-map-app/src/components/pages/CropTypeOverview.vue
index 229bb73..be673ea 100644
--- a/vacs-map-app/src/components/pages/CropTypeOverview.vue
+++ b/vacs-map-app/src/components/pages/CropTypeOverview.vue
@@ -1,11 +1,14 @@
 <template>
   <LayoutOverview topic-label="crop type">
-    crop type
+    <CropFilters />
+    <CropCards />
   </LayoutOverview>
 </template>
 
 <script setup>
 import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+import CropCards from '@/components/CropCards.vue';
+import CropFilters from '@/components/CropFilters.vue';
 </script>
 
 <style scoped>
diff --git a/vacs-map-app/src/constants/topics.js b/vacs-map-app/src/constants/topics.js
index 5466c28..19c5eb8 100644
--- a/vacs-map-app/src/constants/topics.js
+++ b/vacs-map-app/src/constants/topics.js
@@ -1,7 +1,7 @@
 export const topicUrlOptions = [
   {
     label: 'crop type',
-    value: '/crop-type',
+    value: '/crops',
   },
   {
     label: 'climate change',
diff --git a/vacs-map-app/src/main.js b/vacs-map-app/src/main.js
index 77e935c..e246650 100644
--- a/vacs-map-app/src/main.js
+++ b/vacs-map-app/src/main.js
@@ -7,6 +7,7 @@ import App from './App.vue';
 import LandingPage from './LandingPage.vue';
 import MapExplorer from './MapExplorer.vue';
 import ClimateChangeOverview from '@/components/pages/ClimateChangeOverview.vue';
+import CropDetail from '@/components/pages/CropDetail.vue';
 import CropTypeOverview from '@/components/pages/CropTypeOverview.vue';
 import GeographyOverview from '@/components/pages/GeographyOverview.vue';
 import QueryPlugin from '@/store-plugins/query';
@@ -16,7 +17,8 @@ const app = createApp(App)
 
 const routes = [
   { path: '/', component: LandingPage },
-  { path: '/crop-type', component: CropTypeOverview },
+  { path: '/crops', component: CropTypeOverview },
+  { path: '/crops/:slug', component: CropDetail },
   { path: '/climate-change', component: ClimateChangeOverview },
   { path: '/geography', component: GeographyOverview },
   { path: '/map-explore', component: MapExplorer },

From 5119c5515bc34fec32c827d70cff0f78a00256fe Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Sat, 18 Nov 2023 15:29:04 -0800
Subject: [PATCH 2/6] Use yieldratio by default

---
 vacs-map-app/src/stores/filters.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vacs-map-app/src/stores/filters.js b/vacs-map-app/src/stores/filters.js
index bbc3ee5..e0384a6 100644
--- a/vacs-map-app/src/stores/filters.js
+++ b/vacs-map-app/src/stores/filters.js
@@ -24,7 +24,7 @@ export const useFiltersStore = defineStore('filters', () => {
         .map(k => k.split('_')[0])
     )).sort();
     if (!selectedMetric.value) {
-      selectedMetric.value = availableMetrics.value[0];
+      selectedMetric.value = 'yieldratio';
     }
 
     availableCrops.value = Array.from(new Set(

From d87cf75a199980de82aa4739603dbab1df67e096 Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Sat, 18 Nov 2023 15:29:25 -0800
Subject: [PATCH 3/6] Update question language

---
 vacs-map-app/src/LandingPage.vue            |  2 +-
 vacs-map-app/src/components/OverviewTop.vue | 17 ++++++-----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
index e8b868b..15aa486 100644
--- a/vacs-map-app/src/LandingPage.vue
+++ b/vacs-map-app/src/LandingPage.vue
@@ -3,7 +3,7 @@
     <div class="map-wrapper-row">
       <div class="callout">
         <div class="callout-header">
-          What crops have the most potential in climate change?
+          What crops have the most potential in a changing climate?
         </div>
         <div class="callout-content">
 The Vision for Adapted Crops and Soils (VACS) aims to foster more resilient food systems, with an initial focus on the African continent. VACS seeks to boost agricultural productivity and nutrition by developing diverse, climate-resilient crop varieties and building healthy soils. Keep reading
diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue
index dae5586..c6ff012 100644
--- a/vacs-map-app/src/components/OverviewTop.vue
+++ b/vacs-map-app/src/components/OverviewTop.vue
@@ -2,25 +2,20 @@
   <div class="overview-top">
     <div class="row">
       <div>
-        What crops have the most potential in climate change?
+        What crops have the most potential in a changing climate?
       </div>
-      <NavigationButton to="/">Go Back</NavigationButton>
+      <NavigationButton :to="backRoute">Go Back</NavigationButton>
     </div>
   </div>
 </template>
 
 <script setup>
-import { toRefs } from 'vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import NavigationButton from '@/components/NavigationButton.vue';
-import TopicPicker from '@/components/TopicPicker.vue';
 
-const props = defineProps({
-  topic: {
-    type: String,
-    default: '',
-  },
-});
-const { topic } = toRefs(props);
+const route = useRoute();
+const backRoute = computed(() => route.path === '/map-explore' ? '/crops' : '/');
 </script>
 
 <style scoped>

From 7fe3a75c8b5508b28063ec6b5c07750a9ce26e45 Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Sat, 18 Nov 2023 15:30:03 -0800
Subject: [PATCH 4/6] Crop cards navigate to explorer

---
 vacs-map-app/src/components/CropCards.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/vacs-map-app/src/components/CropCards.vue b/vacs-map-app/src/components/CropCards.vue
index ae5ea85..e2100d7 100644
--- a/vacs-map-app/src/components/CropCards.vue
+++ b/vacs-map-app/src/components/CropCards.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="crop-cards">
     <div class="crop-card" v-for="crop in filteredCrops" :key="crop">
-      <router-link :to="`/crops/${slugify(crop)}`">
+      <router-link :to="`/map-explore`" @click="selectedCrop = crop">
         {{ crop }}
       </router-link>
     </div>
@@ -11,14 +11,17 @@
 <script setup>
 import slugify from 'slugify';
 import { computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useFiltersStore } from '@/stores/filters';
 
+const router = useRouter();
 const filtersStore = useFiltersStore();
-const { availableCrops } = storeToRefs(filtersStore);
+const { availableCrops, selectedCrop } = storeToRefs(filtersStore);
 
 // TODO actually filter
 const filteredCrops = computed(() => availableCrops.value);
+
 </script>
 
 <style scoped>

From 2cecf9a10d7c3c3f657636ffab792199274a8908 Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Sat, 18 Nov 2023 15:30:13 -0800
Subject: [PATCH 5/6] Update explorer design

---
 vacs-map-app/src/MapExplorer.vue              | 43 +++++----
 .../src/components/ExploreSidebar.vue         | 89 +++++++++++++++++++
 .../src/components/layouts/LayoutOverview.vue |  2 +-
 3 files changed, 117 insertions(+), 17 deletions(-)
 create mode 100644 vacs-map-app/src/components/ExploreSidebar.vue

diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 56ff204..478ba85 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -1,13 +1,17 @@
 <template>
-  <main>
-    <div class="top-bar">
-      <select v-model="selectedMap">
-        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
-      </select>
-      <Filters />
+  <LayoutOverview>
+    <div class="map-wrapper-row">
+      <ExploreSidebar />
+      <div class="map-wrapper">
+        <component :is="selectedMapComponent" />
+        <div class="map-overlay">
+          <select v-model="selectedMap">
+            <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
+          </select>
+        </div>
+      </div>
     </div>
-    <component :is="selectedMapComponent" />
-  </main>
+  </LayoutOverview>
 </template>
 
 <script setup>
@@ -20,8 +24,10 @@ import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTw
 import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
 import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue';
 import MapContainerColorSand from '@/components/MapContainerColorSand.vue';
-import Filters from '@/components/Filters.vue';
+import { useFiltersStore } from '@/stores/filters';
 import { useMapExploreStore } from '@/stores/mapExplore';
+import LayoutOverview from './components/layouts/LayoutOverview.vue';
+import ExploreSidebar from './components/ExploreSidebar.vue';
 
 const availableMaps = [
   {
@@ -74,18 +80,23 @@ const selectedMapComponent = computed(() => {
 </script>
 
 <style scoped>
-.top-bar {
-  padding: 0.5rem 2rem;
+.map-wrapper-row {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
+  height: 100%;
 }
 
-.overlay {
+.map-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.map-overlay {
   position: absolute;
-  left: 1rem;
-  top: 3rem;
+  top: 5rem;
+  right: 1rem;
 }
 </style>
 
diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue
new file mode 100644
index 0000000..50d5861
--- /dev/null
+++ b/vacs-map-app/src/components/ExploreSidebar.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="sidebar">
+    <div class="crop-selection">
+      <select v-model="selectedCrop" class="crop-picker">
+        <option
+          v-for="crop in availableCrops"
+          :key="crop"
+          :value="crop"
+        > {{crop}} </option>
+      </select>
+
+      <span> a description of {{ selectedCrop }}</span>
+    </div>
+
+    <div class="crop-fingerprint">
+      crop fingerprint
+    </div>
+
+    <div class="scenarios">
+      <div v-for="scenario in futureScenarios" :key="scenario" class="scenario" :class="{selected: selectedModel === scenario}" @click="selectedModel = scenario">
+        <span>
+          {{ scenario }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useFiltersStore } from '@/stores/filters';
+
+const filtersStore = useFiltersStore();
+const {
+  availableCrops,
+  selectedCrop,
+  availableModels,
+  selectedModel,
+} = storeToRefs(filtersStore);
+
+const futureScenarios = computed(() => availableModels.value.filter(d => d.startsWith('future')));
+</script>
+
+<style scoped>
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-left: var(--page-horizontal-margin);
+  padding-right: 2rem;
+  width: 400px;
+}
+
+.crop-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.crop-fingerprint {
+  width: 100%;
+  height: 40%;
+  border: 1px solid white;
+  border-radius: 0.5rem;
+}
+
+.scenarios { 
+  width: 100%;
+  height: 40%;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.scenario {
+  width: 100%;
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.scenario.selected {
+  cursor: pointer;
+  border-color: white;
+}
+
+</style>
\ No newline at end of file
diff --git a/vacs-map-app/src/components/layouts/LayoutOverview.vue b/vacs-map-app/src/components/layouts/LayoutOverview.vue
index 2b1df94..5c853d1 100644
--- a/vacs-map-app/src/components/layouts/LayoutOverview.vue
+++ b/vacs-map-app/src/components/layouts/LayoutOverview.vue
@@ -35,6 +35,6 @@ const topic = computed(() => topicUrlOptions
 }
 
 .layout-overview-content {
-  margin: 0 var(--page-horizontal-margin);
+  height: 100%;
 }
 </style>

From 7c4f3d9da8ff475067151105473c4714db895371 Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Sat, 18 Nov 2023 15:35:44 -0800
Subject: [PATCH 6/6] Add margin to back to crops page

---
 .../src/components/pages/CropTypeOverview.vue         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/vacs-map-app/src/components/pages/CropTypeOverview.vue b/vacs-map-app/src/components/pages/CropTypeOverview.vue
index be673ea..e41225a 100644
--- a/vacs-map-app/src/components/pages/CropTypeOverview.vue
+++ b/vacs-map-app/src/components/pages/CropTypeOverview.vue
@@ -1,7 +1,9 @@
 <template>
-  <LayoutOverview topic-label="crop type">
-    <CropFilters />
-    <CropCards />
+  <LayoutOverview>
+    <div class="wrapper">
+      <CropFilters />
+      <CropCards />
+    </div>
   </LayoutOverview>
 </template>
 
@@ -12,4 +14,7 @@ import CropFilters from '@/components/CropFilters.vue';
 </script>
 
 <style scoped>
+.wrapper {
+  margin: 0 var(--page-horizontal-margin);
+}
 </style>