Improve search not found text

package.json

@@ -14,8 +14,10 @@
     "explore": "gridsome explore",
     "eslint-ci": "yarn eslint-base --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif",
     "eslint-base": "yarn eslint --ext .ts,.vue ./src",
-    "lint": "yarn eslint-base && npx prettier . --check",
-    "lint-fix": "yarn eslint-base --fix && npx prettier . --write"
+    "prettier-base": "npx prettier ./**/*{.ts,.vue}",
+    "prettier-fix": "yarn prettier-base --write",
+    "lint": "yarn eslint-base && yarn prettier-base --check",
+    "lint-fix": "yarn eslint-base --fix && yarn prettier-base --write"
   },
   "dependencies": {
     "csv-parse": "^5.3.6",

src/components/DataDisclaimer.vue

@@ -14,8 +14,7 @@
           Chicago Energy Benchmarking Ordinance<NewTabIcon /> </a
         >. According to the City &ldquo;As of 2016, this list includes all
         commercial, institutional, and residential buildings larger than 50,000
-        square feet.&rdquo; This dataset is also then filtered to only buildings
-        with reported emissions > 1,000 metric tons CO<sub>2</sub> equivalent.
+        square feet.&rdquo;
       </p>
 
       <p class="constrained">

src/components/graphs/PieChart.vue

@@ -108,7 +108,10 @@ export default class PieChart extends Vue {
         let data = d.data as any as IPieSlice;
 
         const label =
-          `<tspan class="percent">${this.calculatePercentage(data.value, totalValue)}%</tspan>` +
+          `<tspan class="percent">${this.calculatePercentage(
+            data.value,
+            totalValue,
+          )}%</tspan>` +
           `<tspan class="label" x="0" dy="1.5em">${data.label}</tspan>`;
 
         return label;
@@ -121,7 +124,9 @@ export default class PieChart extends Vue {
           return '';
         }
 
-        return `translate(${labelArcGenerator.centroid(d as unknown as d3.DefaultArcObject)})`;
+        return `translate(${labelArcGenerator.centroid(
+          d as unknown as d3.DefaultArcObject,
+        )})`;
       })
       .style('text-anchor', (d) => {
         // Center single slice label

src/pages/Search.vue

@@ -51,6 +51,9 @@ export default class Search extends Vue {
   searchResults: Array<IBuildingEdge> = [];
   totalResultsCount = 0;
 
+  /** Dropdown information on database details */
+  dataDisclaimer!: HTMLDetailsElement;
+
   created(): void {
     // Make sure on load we have some data
     this.setSearchResults(this.$static.allBuilding.edges);
@@ -157,6 +160,16 @@ export default class Search extends Vue {
     this.totalResultsCount = allResults.length;
     this.searchResults = allResults.slice(0, this.MaxBuildings);
   }
+
+  /**
+   * Toggles DataDisclaimer open from the no-results message
+   */
+  openDataDisclaimer(): void {
+    this.dataDisclaimer = document.getElementById(
+      'data-disclaimer',
+    ) as HTMLDetailsElement;
+    this.dataDisclaimer.open = true;
+  }
 }
 </script>
 
@@ -200,7 +213,7 @@ export default class Search extends Vue {
         results are limited to the first {{ MaxBuildings }} matches.
       </p>
 
-      <DataDisclaimer />
+      <DataDisclaimer id="data-disclaimer" />
 
       <form>
         <div>
@@ -238,9 +251,18 @@ export default class Search extends Vue {
       <div v-if="searchResults.length === 0" class="no-results-msg">
         <h2>No results found!</h2>
 
+        <p class="layout-constrained">
+          There may be a typo in your search, the building name may be different
+          in the underlying data, or the building you are looking for may not be
+          in our dataset (buildings in Chicago over 50,000 square feet - see
+          <a href="#data-disclaimer" @click="openDataDisclaimer"
+            >dataset disclaimer</a
+          >).
+        </p>
+
         <p>
-          There may be a typo in your query or in the underlying data, or the
-          building you are looking for may not be in our dataset.
+          <strong>Note:</strong> Addresses generally follow the format
+          <em>123 W Main St</em>
         </p>
       </div>
 
@@ -287,7 +309,7 @@ export default class Search extends Vue {
     }
 
     input[type='text'] {
-      width: 15rem;
+      width: 16rem;
     }
 
     button {
@@ -312,7 +334,7 @@ export default class Search extends Vue {
 
   .no-results-msg {
     background-color: $grey;
-    padding: 1rem;
+    padding: 1rem 0 2rem 0;
     text-align: center;
   }