From 300b8ff2addd9d3e9e4119eb198475f0009736e2 Mon Sep 17 00:00:00 2001
From: Chad Kruse <314653+chadokruse@users.noreply.github.com>
Date: Sat, 16 Nov 2024 18:08:14 -0600
Subject: [PATCH] Misc UI updates and tweaks

---
 .../lib/components/profiles/Profile.svelte    |  4 +-
 .../profiles/charts/BarFinancialTrends.svelte |  3 +-
 .../profiles/grants/GrantsSummaryBox.svelte   |  6 +-
 .../profiles/grants/GrantsTable.svelte        | 14 ++---
 .../profiles/header/FoundationHeader.svelte   | 14 ++++-
 apps/web/src/lib/components/search/Nav.svelte |  2 +-
 apps/web/src/lib/utils/tooltip.ts             | 60 +++++++++++++++++++
 7 files changed, 85 insertions(+), 18 deletions(-)
 create mode 100644 apps/web/src/lib/utils/tooltip.ts

diff --git a/apps/web/src/lib/components/profiles/Profile.svelte b/apps/web/src/lib/components/profiles/Profile.svelte
index 1fbd310..c57ab57 100644
--- a/apps/web/src/lib/components/profiles/Profile.svelte
+++ b/apps/web/src/lib/components/profiles/Profile.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Toaster } from 'svelte-french-toast';
   import People from './people/People.svelte';
   import SummaryBoxHeader from './SummaryBoxHeader.svelte';
   import Banner from './Banner.svelte';
@@ -30,7 +31,7 @@
   let {
     organization_name,
     filings,
-    grants,
+    // grants,
     people,
     has_website: hasWebsite,
     grants_facets: grantsFacets,
@@ -43,6 +44,7 @@
   let formattedTaxPeriodEnd: string = $derived(formatTaxPeriodDate(filings[0].tax_period) || 'N/A');
 </script>
 
+<Toaster />
 <Banner />
 <div class="relative">
   <!-- Left Navigation -->
diff --git a/apps/web/src/lib/components/profiles/charts/BarFinancialTrends.svelte b/apps/web/src/lib/components/profiles/charts/BarFinancialTrends.svelte
index 1a977ff..3001562 100644
--- a/apps/web/src/lib/components/profiles/charts/BarFinancialTrends.svelte
+++ b/apps/web/src/lib/components/profiles/charts/BarFinancialTrends.svelte
@@ -97,6 +97,7 @@
       },
       options: {
         responsive: true,
+        maintainAspectRatio: false,
         plugins: {
           title: {
             display: true,
@@ -166,7 +167,7 @@
     </div>
     <Divider />
     {#if orgFinancialStats && orgFinancialStats.length > 1}
-      <div class="min-h-full w-full">
+      <div class="min-h-60 w-full">
         <canvas bind:this={chartCanvas}></canvas>
       </div>
       <Divider />
diff --git a/apps/web/src/lib/components/profiles/grants/GrantsSummaryBox.svelte b/apps/web/src/lib/components/profiles/grants/GrantsSummaryBox.svelte
index 176d20e..6437763 100644
--- a/apps/web/src/lib/components/profiles/grants/GrantsSummaryBox.svelte
+++ b/apps/web/src/lib/components/profiles/grants/GrantsSummaryBox.svelte
@@ -97,11 +97,7 @@
   </dl>
 
   {#if grantsReferenceAttachment && grantCount === 1}
-    <Tip
-      title="Grantmaking reported as a single grant"
-      message="Further grant details may be available in the tax filing itself."
-      includeLogo
-    />
+    <Tip title="Grantmaking reported as a single grant" message="See the Grants table below for details." includeLogo />
   {/if}
 
   <!-- Grant Clusters Section -->
diff --git a/apps/web/src/lib/components/profiles/grants/GrantsTable.svelte b/apps/web/src/lib/components/profiles/grants/GrantsTable.svelte
index d37f243..6556d05 100644
--- a/apps/web/src/lib/components/profiles/grants/GrantsTable.svelte
+++ b/apps/web/src/lib/components/profiles/grants/GrantsTable.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
   import GrantRow from './GrantRow.svelte';
   import { ExclamationCircle } from 'svelte-heros-v2';
-  import type { GrantsArray } from '@shared/typings/grantmakers/all';
+  import type { GrantsArray, GrantmakersExtractedDataObj } from '@shared/typings/grantmakers/all';
   import { humanizeNumber } from '@shared/functions/formatters/numbers';
   import Tip from '../alerts/Tip.svelte';
   interface Props {
     grantsAllYears?: GrantsArray | null;
     grantsCurrent?: GrantsArray | null;
-    grantCount?: number | null;
-    grantCountAllYears?: number | null;
+    grantCount?: GrantmakersExtractedDataObj['grant_count'];
+    grantCountAllYears?: GrantmakersExtractedDataObj['grant_count_all_years'];
     filingsAvailable?: number | null;
-    grantsReferenceAttachment: boolean;
+    grantsReferenceAttachment: GrantmakersExtractedDataObj['grants_reference_attachment'];
   }
 
   let {
     grantsAllYears = null,
     grantsCurrent = null,
-    grantCount = null,
-    grantCountAllYears = null,
+    grantCount,
+    grantCountAllYears,
     filingsAvailable = null,
     grantsReferenceAttachment = false,
   }: Props = $props();
@@ -104,7 +104,7 @@
           <div class="mx-auto mt-4 flex">
             <Tip
               title="Grants reference an attachment"
-              message="The use of attachments and statements to provide grant details is a holdover from before foundation tax returns were filed electronically. Though unlikely, further grant details may be available in the tax filing itself. "
+              message="The use of attachments and statements to provide grant details is a holdover from before foundation tax returns were filed electronically. Unfortunately, these attachments are often not available. "
               includeLogo
             />
           </div>
diff --git a/apps/web/src/lib/components/profiles/header/FoundationHeader.svelte b/apps/web/src/lib/components/profiles/header/FoundationHeader.svelte
index b2bc5a4..972c476 100644
--- a/apps/web/src/lib/components/profiles/header/FoundationHeader.svelte
+++ b/apps/web/src/lib/components/profiles/header/FoundationHeader.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import Approachability from './Approachability.svelte';
+  import { copy } from 'svelte-copy';
+  import toast from 'svelte-french-toast';
   import Dot from '$lib/components/shared/icons/Dot.svelte';
   import LetterAvatar from '$lib/components/shared/avatars/LetterAvatar.svelte';
   import { formatEin } from '@shared/functions/formatters/ein';
@@ -46,9 +48,9 @@
       </div>
     </div>
     <!-- Name -->
-    <div class="relative my-auto w-auto max-w-full flex-none md:px-3">
+    <div class="relative my-auto w-auto md:flex-none md:px-3 lg:max-w-full">
       <div class="h-full">
-        <h5 class="mb-1 w-full max-w-md whitespace-normal text-wrap">{organization_name}</h5>
+        <h5 class="mb-1 w-full whitespace-normal text-wrap text-lg font-semibold md:max-w-md">{organization_name}</h5>
         <div class="mb-0 text-sm font-normal leading-normal">
           <strong class="text-slate-700">
             {profile.city},
@@ -71,7 +73,13 @@
   <div class="ml-4 grid w-full grid-cols-2 gap-x-2 gap-y-1 text-right md:ml-2 md:mt-0 md:w-auto md:gap-x-4">
     <span class="inline-flex items-center justify-start text-sm md:justify-end">EIN</span>
     <span
-      class="inline-flex items-center justify-center rounded-md bg-slate-50 px-2 py-1 text-sm font-medium text-slate-700 ring-1 ring-inset ring-slate-700/10"
+      use:copy={{
+        text: profile.ein,
+        onCopy() {
+          toast.success('Copied EIN');
+        },
+      }}
+      class="inline-flex cursor-copy items-center justify-center rounded-md px-2 py-1 text-sm font-medium text-slate-700"
       >{formatEin(profile.ein)}</span
     >
     <span class="inline-flex items-center justify-start text-sm md:justify-end">IRS Status</span>
diff --git a/apps/web/src/lib/components/search/Nav.svelte b/apps/web/src/lib/components/search/Nav.svelte
index 917bd30..e8fb88b 100644
--- a/apps/web/src/lib/components/search/Nav.svelte
+++ b/apps/web/src/lib/components/search/Nav.svelte
@@ -32,7 +32,7 @@
             ></path>
           </svg>
         </div>
-        <span class="text-sm text-slate-500">Search</span>
+        <span class="text-sm text-slate-500">Quick search...</span>
       </div>
     </button>
   </div>
diff --git a/apps/web/src/lib/utils/tooltip.ts b/apps/web/src/lib/utils/tooltip.ts
new file mode 100644
index 0000000..f9e6c37
--- /dev/null
+++ b/apps/web/src/lib/utils/tooltip.ts
@@ -0,0 +1,60 @@
+// tooltip.ts
+import tippy, { type Props, type Content } from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+import { browser } from '$app/environment';
+
+interface TooltipParams extends Partial<Props> {
+  content?: Content; // Using tippy's Content type instead of just string
+}
+
+let tippyInstance: typeof tippy | undefined;
+
+if (browser) {
+  tippyInstance = tippy;
+}
+
+export function tooltip(node: HTMLElement, params: TooltipParams = {}) {
+  if (!browser || !tippyInstance) {
+    return {
+      update: () => {},
+      destroy: () => {},
+    };
+  }
+
+  // Determine the title to show. Prefer custom content, then title, then aria-label
+  const custom = params.content;
+  const title = node.title;
+  const label = node.getAttribute('aria-label');
+
+  // Ensure content is properly typed
+  const content: Content = (custom ?? title ?? label ?? '') as Content;
+
+  // Ensure the "aria-label" attribute is set for accessibility
+  if (!label && content) {
+    node.setAttribute('aria-label', typeof content === 'string' ? content : '');
+  }
+
+  // Clear the HTML title attribute to prevent default browser behavior
+  node.title = '';
+
+  // Create a Tippy instance with the provided content and parameters
+  const tip = tippyInstance(node as Element, {
+    content,
+    ...params,
+    animation: true,
+    arrow: true,
+  });
+
+  return {
+    update(newParams: TooltipParams) {
+      const newContent = newParams.content ?? content;
+      tip.setProps({
+        content: newContent,
+        ...newParams,
+      });
+    },
+    destroy() {
+      tip.destroy();
+    },
+  };
+}