Add hover states and fix color assignment

vacs-map-app/src/components/CardWrapper.vue

@@ -7,11 +7,17 @@
     <slot></slot>
 
     <div class="info" :class="{ bold: boldTitle, hasDescription: description }">
-      <div class="title" :class="{ bold: boldTitle }">
-        <span> {{ title }} </span>
+      <div class="title-row" :class="{ bold: boldTitle }">
+        <span class="title">
+          {{ title }}
+          <img v-if="referenceCrop" src="../assets/img/reference-crop.svg" alt="" />
+        </span>
         <span class="subtitle"> {{ subtitle }} </span>
         <img v-if="isDynamic && !isActive" src="../assets/img/arrow-right-pointy.svg" alt="" />
       </div>
+      <div v-if="referenceCrop" class="reference-crop-message">
+        <span> {{ cropGroup }} reference crop</span>
+      </div>
       <div v-if="indicator" class="indicator">
         <span class="indicator-category"> {{ indicator.key }} </span>
         <span
@@ -59,6 +65,16 @@ const props = defineProps({
     default: ''
   },
 
+  referenceCrop: {
+    type: Boolean,
+    default: false
+  },
+
+  cropGroup: {
+    type: String,
+    default: ''
+  },
+
   handleClick: {
     type: Function,
     default: () => {}
@@ -84,8 +100,18 @@ const props = defineProps({
     default: () => {}
   }
 })
-const { title, description, handleClick, indicator, isActive, isDynamic, showMoreInfo, boldTitle } =
-  toRefs(props)
+const {
+  title,
+  description,
+  handleClick,
+  indicator,
+  isActive,
+  isDynamic,
+  showMoreInfo,
+  boldTitle,
+  referenceCrop,
+  cropGroup
+} = toRefs(props)
 
 const colorStore = useColorStore()
 const { stopLight: stopLightScheme, colorblindFriendly } = storeToRefs(colorStore)
@@ -170,30 +196,41 @@ const useDarkIndicatorText = computed(() => {
   padding-top: 0;
 }
 
-.title {
+.title-row {
   font-family: var(--font-family-h2);
   height: var(--title-height);
   font-size: 1.125rem;
   display: flex;
   gap: 0.5rem;
-  align-items: center;
+  align-items: baseline;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.title img {
+.title-row img {
   margin-left: auto;
 }
 
+.title-row.bold {
+  font-family: var(--font-family-header);
+  font-size: 1.375rem;
+}
+
+.title {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .subtitle {
   font-size: 0.875rem;
   font-family: var(--font-family-h3);
 }
 
-.title.bold {
-  font-family: var(--font-family-header);
-  font-size: 1.375rem;
+.reference-crop-message {
+  color: var(--dark-gray);
 }
 
 .indicator {

vacs-map-app/src/components/ContentModal.vue

@@ -80,7 +80,7 @@ onClickOutside(contentInnerRef, () => emit('close'))
 .header {
   font-family: var(--font-family-h2);
   font-size: 1.875rem;
-  padding-bottom: 0.25rem;
+  padding-bottom: 0.75rem;
   line-height: 110%;
 }
 

vacs-map-app/src/components/CropCards.vue

@@ -7,6 +7,8 @@
         :title="crop.label"
         :bold-title="true"
         :description="crop.description"
+        :reference-crop="!!crop.benchmark"
+        :crop-group="crop.crop_group"
         :handle-click="() => navigate(crop.id)"
         :indicator="{
           key: cropSortBy,

vacs-map-app/src/components/CropGroupStackedBarChart.vue

@@ -4,6 +4,10 @@
       v-for="bar in bars"
       :key="bar.id"
       class="crop-bar"
+      :class="{
+        highlighted: hoveredCrop === bar.id,
+        unhighlighted: hoveredCrop && hoveredCrop !== bar.id
+      }"
       :style="{
         width: `${bar.gridShare}%`,
         background: bar.fill
@@ -29,9 +33,9 @@ const mapExploreStore = useMapExploreStore()
 
 const { selectedCrop, selectedModel } = storeToRefs(filtersStore)
 const { data: cropInformation } = storeToRefs(cropInformationStore)
-const { ordinal: ordinalScheme, noData: noDataFill } = storeToRefs(colorStore)
+const { ordinal: ordinalScheme, noData: noDataFill, getCropColor } = storeToRefs(colorStore)
 const { data: cropYieldsData } = storeToRefs(cropYieldsStore)
-const { showCropGroupMap, cropGroupMetric } = storeToRefs(mapExploreStore)
+const { showCropGroupMap, cropGroupMetric, hoveredCrop } = storeToRefs(mapExploreStore)
 
 const selectedCropInfo = computed(() => {
   return cropInformation?.value?.find((d) => d.id === selectedCrop.value)
@@ -65,7 +69,7 @@ const bars = computed(() => {
     return {
       id: crop.id,
       label: crop.label,
-      fill: ordinalScheme.value[i],
+      fill: colorStore.getCropColor(crop.id),
       gridShare
     }
   })
@@ -98,4 +102,8 @@ const bars = computed(() => {
 .crop-bar {
   height: 100%;
 }
+
+.unhighlighted {
+  opacity: 20%;
+}
 </style>

vacs-map-app/src/components/ExploreSidebar.vue

@@ -29,15 +29,7 @@
     </div>
 
     <div class="sidebar-section">
-      <span class="sidebar-header">
-        How will {{ selectedCropInfo?.label }} yields change?
-        <img
-          class="info"
-          src="@/assets/img/info.svg"
-          alt=""
-          @click="openChartModal('distribution')"
-        />
-      </span>
+      <span class="sidebar-header"> How will {{ selectedCropInfo?.label }} yields change? </span>
 
       <div class="map-mode-cards">
         <CardWrapper
@@ -73,6 +65,12 @@
     <div class="sidebar-section">
       <div class="scenario-switch">
         <span class="scenarios-title"> emissions scenario </span>
+        <img
+          class="info"
+          src="@/assets/img/info.svg"
+          alt=""
+          @click="openScenarioModal(selectedModel)"
+        />
         <RadioSwitch v-model="selectedModel" :options="scenarioOptions" name="selected-scenario" />
       </div>
     </div>

vacs-map-app/src/components/GridOverlay.vue

@@ -109,7 +109,7 @@ const {
 } = toRefs(props)
 
 const mapExploreStore = useMapExploreStore()
-const { hoveredId } = storeToRefs(mapExploreStore)
+const { hoveredId, hoveredCrop, showCropGroupMap } = storeToRefs(mapExploreStore)
 
 const colorStore = useColorStore()
 const {
@@ -147,7 +147,7 @@ const addHoverListeners = () => {
   map.value.on('mousemove', id.value, (event) => {
     if (!event?.features?.length) return
     const feature = event?.features[0]
-    if (feature.properties.id) {
+    if (feature.id) {
       hoveredId.value = feature.properties.id
     }
   })
@@ -170,6 +170,18 @@ const updateHoveredFeatureState = (elementId, hovered) => {
   )
 }
 
+const updateHoveredCrop = (cropId) => {
+  if (!id.value || !showCropGroupMap.value) return
+
+  let expression = ['case', ['boolean', ['feature-state', 'highlighted'], false], 0.5, 1]
+
+  if (cropId) {
+    expression = ['case', ['==', ['get', cropGroupColumn.value], cropId], 1, 0.2]
+  }
+
+  map.value.setPaintProperty(id.value, 'circle-opacity', expression)
+}
+
 const getCircleColorQuintiles = (quintiles) => {
   if (!quintiles) return 'gray'
 
@@ -312,7 +324,7 @@ const getCircleColorByCrop = () => {
     .concat(
       cropGroupCrops.value
         .map((crop, i) => {
-          return [['==', ['get', cropGroupColumn.value], crop], ordinalScheme.value[i]]
+          return [['==', ['get', cropGroupColumn.value], crop], colorStore.getCropColor(crop)]
         })
         .flat()
     )
@@ -382,6 +394,10 @@ watch(hoveredId, (current, prev) => {
   updateHoveredFeatureState(prev, false)
   updateHoveredFeatureState(current, true)
 })
+
+watch(hoveredCrop, (current) => {
+  updateHoveredCrop(current)
+})
 </script>
 
 <style scoped></style>