From 8e90dab7cce766b730a3fecc69d2187fe60ea9c0 Mon Sep 17 00:00:00 2001
From: Kristin Lindquist <lindquist.kristin@gmail.com>
Date: Tue, 23 Jan 2024 14:23:52 -0700
Subject: [PATCH 1/4] tabs saved in params

---
 .../dashboard/characteristics/control.tsx     |  8 +--
 src/app/core/dashboard/content.tsx            | 13 +++--
 src/app/core/dashboard/page.tsx               |  2 +
 src/components/layout/tabs.tsx                | 50 +++++++++++--------
 src/hooks/navigation.tsx                      | 17 +++++--
 5 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/app/core/dashboard/characteristics/control.tsx b/src/app/core/dashboard/characteristics/control.tsx
index e5fbf5a..042d4fa 100644
--- a/src/app/core/dashboard/characteristics/control.tsx
+++ b/src/app/core/dashboard/characteristics/control.tsx
@@ -13,7 +13,7 @@ export const PatentCharacteristicsControl = ({
     terms,
     children,
 }: PatentSearchArgs & { children: ReactNode; headField: HeadField }) => {
-    const { params, navigate } = useNavigation();
+    const { setParam } = useNavigation();
 
     return (
         <>
@@ -31,11 +31,7 @@ export const PatentCharacteristicsControl = ({
                     label="Dimension"
                     onChange={(e: unknown, value: HeadField | null) => {
                         if (value) {
-                            const newParams = new URLSearchParams(params);
-                            newParams.set('headField', value);
-                            navigate(`?${newParams.toString()}`, {
-                                scroll: false,
-                            });
+                            setParam('headField', value);
                         }
                     }}
                     options={['priority_date', 'id']}
diff --git a/src/app/core/dashboard/content.tsx b/src/app/core/dashboard/content.tsx
index 4693b1d..6b3477b 100644
--- a/src/app/core/dashboard/content.tsx
+++ b/src/app/core/dashboard/content.tsx
@@ -16,12 +16,16 @@ import { PatentCharacteristics } from './characteristics';
 import { OverTime } from './over-time';
 import { Summary } from './summary';
 
-export type ContentArgs = PatentSearchArgs & { headField: HeadField };
+export type ContentArgs = PatentSearchArgs & {
+    headField: HeadField;
+    tab: string;
+};
 
-export const Content = (args: ContentArgs) => {
+export const Content = ({ tab, ...args }: ContentArgs) => {
     try {
         const tabs = [
             {
+                id: 'assets',
                 label: 'Assets',
                 panel: (
                     <Suspense fallback={<Skeleton />}>
@@ -30,6 +34,7 @@ export const Content = (args: ContentArgs) => {
                 ),
             },
             {
+                id: 'summary',
                 label: 'Summary',
                 panel: (
                     <Suspense fallback={<Skeleton />}>
@@ -38,6 +43,7 @@ export const Content = (args: ContentArgs) => {
                 ),
             },
             {
+                id: 'over-time',
                 label: 'Over Time',
                 panel: (
                     <Suspense fallback={<Skeleton />}>
@@ -46,6 +52,7 @@ export const Content = (args: ContentArgs) => {
                 ),
             },
             {
+                id: 'characteristics',
                 label: 'Characteristics',
                 panel: (
                     <Suspense fallback={<Skeleton />}>
@@ -56,7 +63,7 @@ export const Content = (args: ContentArgs) => {
         ];
         return (
             <Box sx={getStyles}>
-                <Tabs tabs={tabs} />
+                <Tabs openId={tab} tabs={tabs} />
             </Box>
         );
     } catch (e) {
diff --git a/src/app/core/dashboard/page.tsx b/src/app/core/dashboard/page.tsx
index 4c3e83d..8c17363 100644
--- a/src/app/core/dashboard/page.tsx
+++ b/src/app/core/dashboard/page.tsx
@@ -25,6 +25,7 @@ const Page = ({ searchParams }: { searchParams: Record<string, string> }) => {
         ? parseInt(searchParams.endYear, 10)
         : undefined;
     const headField = (searchParams.headField as HeadField) || 'priority_date';
+    const { tab } = searchParams;
 
     return (
         <>
@@ -57,6 +58,7 @@ const Page = ({ searchParams }: { searchParams: Record<string, string> }) => {
                             headField={headField}
                             queryType={queryType}
                             startYear={startYear}
+                            tab={tab}
                             terms={terms || []}
                         />
                     </Suspense>
diff --git a/src/components/layout/tabs.tsx b/src/components/layout/tabs.tsx
index 638847d..096c265 100644
--- a/src/components/layout/tabs.tsx
+++ b/src/components/layout/tabs.tsx
@@ -6,9 +6,10 @@ import TabList from '@mui/joy/TabList';
 import TabPanel from '@mui/joy/TabPanel';
 import JoyTabs from '@mui/joy/Tabs';
 
-import { getSelectableId } from '@/utils/string';
+import { useNavigation } from '@/hooks/navigation';
 
 type TabDef = {
+    id: string;
     label: string;
     panel: ReactNode;
 };
@@ -17,23 +18,32 @@ type TabDef = {
  * Tab component
  * @param props.tabs
  */
-export const Tabs = ({ tabs }: { tabs: TabDef[] }): JSX.Element => (
-    <JoyTabs>
-        <TabList>
-            {tabs.map(({ label }) => (
-                <Tab key={`${getSelectableId(label)}-tab`} variant="soft">
-                    {label}
-                </Tab>
+export const Tabs = ({
+    openId,
+    tabs,
+}: {
+    openId?: string;
+    tabs: TabDef[];
+}): JSX.Element => {
+    const { setParam } = useNavigation();
+    return (
+        <JoyTabs onChange={(e, id) => setParam('tab', `${id}`)} value={openId}>
+            <TabList>
+                {tabs.map(({ id, label }) => (
+                    <Tab key={`${id}-tab`} value={id} variant="soft">
+                        {label}
+                    </Tab>
+                ))}
+            </TabList>
+            {tabs.map(({ id, panel }) => (
+                <TabPanel
+                    key={`${id}-panel`}
+                    value={id}
+                    sx={{ minHeight: '100vh' }}
+                >
+                    {panel}
+                </TabPanel>
             ))}
-        </TabList>
-        {tabs.map(({ label, panel }, idx) => (
-            <TabPanel
-                key={`${getSelectableId(label)}-panel`}
-                value={idx}
-                sx={{ minHeight: '100vh' }}
-            >
-                {panel}
-            </TabPanel>
-        ))}
-    </JoyTabs>
-);
+        </JoyTabs>
+    );
+};
diff --git a/src/hooks/navigation.tsx b/src/hooks/navigation.tsx
index 8c7265c..220b61c 100644
--- a/src/hooks/navigation.tsx
+++ b/src/hooks/navigation.tsx
@@ -18,6 +18,7 @@ type NavigationContextType = {
     isPending: boolean;
     navigate: (url: string, options?: NavigateOptions) => void;
     params: ReadonlyURLSearchParams;
+    setParam: (key: string, value: string) => void;
 };
 
 const NavigationContext = createContext({
@@ -26,6 +27,9 @@ const NavigationContext = createContext({
         console.warn(`No impl when attempting to route to ${url}`);
     }) as NavigationContextType['navigate'],
     params: new URLSearchParams() as ReadonlyURLSearchParams,
+    setParam: (key: string, value: string) => {
+        console.warn(`No impl when attempting to set param ${key} to ${value}`);
+    },
 });
 
 export const NavigationProvider = ({ children }: { children: ReactNode }) => {
@@ -38,11 +42,14 @@ export const NavigationProvider = ({ children }: { children: ReactNode }) => {
             isPending,
             navigate: (url: string, options?: NavigateOptions) => {
                 startTransition(() => {
-                    if (options?.scroll === false) {
-                        Router.replace(url, options);
-                    } else {
-                        Router.push(url, options);
-                    }
+                    Router.push(url, options);
+                });
+            },
+            setParam: (key: string, value: string) => {
+                const newParams = new URLSearchParams(params);
+                newParams.set(key, value);
+                Router.replace(`?${newParams.toString()}`, {
+                    scroll: false, // TODO!
                 });
             },
             params,

From c52d233e26ad016adf2ece79e8d1879f6bdba89d Mon Sep 17 00:00:00 2001
From: Kristin Lindquist <lindquist.kristin@gmail.com>
Date: Tue, 23 Jan 2024 14:26:35 -0700
Subject: [PATCH 2/4] disabling exemplar patent field

---
 src/components/composite/search/search-bar.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/composite/search/search-bar.tsx b/src/components/composite/search/search-bar.tsx
index 4eeb7a7..ec6c6fd 100644
--- a/src/components/composite/search/search-bar.tsx
+++ b/src/components/composite/search/search-bar.tsx
@@ -18,7 +18,7 @@ import { FetchAutocompletions } from './types';
  */
 export const SearchBar = ({
     endYear = 2024,
-    exemplarPatents,
+    // exemplarPatents,
     fetchAutocompletions,
     queryType,
     startYear = 2014,
@@ -29,9 +29,9 @@ export const SearchBar = ({
     const { navigate } = useNavigation();
     const pathname = usePathname();
     const [newTerms, setTerms] = useState<string[] | null>(terms);
-    const [newExemplarPatents, setExemplarPatents] = useState<string[] | null>(
-        exemplarPatents || null
-    );
+    // const [newExemplarPatents, setExemplarPatents] = useState<string[] | null>(
+    //     exemplarPatents || null
+    // );
     const [newQueryType, setQueryType] = useState<string | null>(
         queryType || null
     );
@@ -72,6 +72,7 @@ export const SearchBar = ({
                             minDistance={2}
                             max={2025}
                             size="lg"
+                            sx={{ mr: 3 }}
                             valueLabelDisplay="on"
                         />
                     </Grid>
@@ -90,7 +91,7 @@ export const SearchBar = ({
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={4} sx={{ mt: 1 }}>
+                {/* <Grid container spacing={4} sx={{ mt: 1 }}>
                     <Grid xs={12} sm={6}>
                         <Autocomplete<Option, true, false>
                             isMultiple
@@ -116,7 +117,7 @@ export const SearchBar = ({
                             variant="soft"
                         />
                     </Grid>
-                </Grid>
+                </Grid> */}
             </Section>
             <Section variant="l2">
                 <Button
@@ -128,7 +129,7 @@ export const SearchBar = ({
                         const queryArgs = getQueryArgs({
                             endYear: newYearRange?.[1],
                             queryType: newQueryType,
-                            exemplarPatents: newExemplarPatents,
+                            exemplarPatents: [], // TODO
                             startYear: newYearRange?.[0],
                             terms: newTerms,
                         });

From 197deab808e4628c854c53a5b8a39b0e174d7ec7 Mon Sep 17 00:00:00 2001
From: Kristin Lindquist <lindquist.kristin@gmail.com>
Date: Tue, 23 Jan 2024 14:43:30 -0700
Subject: [PATCH 3/4] fixed title for heatmap click

---
 .../characteristics/characteristics.tsx       | 11 ++++-----
 .../dashboard/characteristics/control.tsx     | 12 +++++++++-
 src/components/charts/heatmap.tsx             | 24 ++++++++-----------
 src/types/documents/patents.ts                | 16 ++++++-------
 4 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/app/core/dashboard/characteristics/characteristics.tsx b/src/app/core/dashboard/characteristics/characteristics.tsx
index 426fc54..edc332b 100644
--- a/src/app/core/dashboard/characteristics/characteristics.tsx
+++ b/src/app/core/dashboard/characteristics/characteristics.tsx
@@ -4,10 +4,10 @@ import Box from '@mui/joy/Box';
 
 import { DEFAULT_PATHNAME } from '@/constants';
 import { Heatmap } from '@/components/charts/heatmap';
-import { HeadField, PatentSearchArgs } from '@/types';
+import { HeadField, PatentCharacteristic, PatentSearchArgs } from '@/types';
 
 import { fetchPatentCharacteristics } from './actions';
-import { PatentCharacteristicsControl } from './control';
+import { PatentCharacteristicsControl, getClickUrl } from './control';
 
 const CharacteristicsInner = async ({
     pathname = DEFAULT_PATHNAME,
@@ -17,12 +17,11 @@ const CharacteristicsInner = async ({
         const data = await fetchPatentCharacteristics(args);
 
         return (
-            <Heatmap
-                clickBaseUrl={`${pathname}/patents?terms=`}
-                clickField="documents"
+            <Heatmap<PatentCharacteristic>
+                getClickUrl={getClickUrl}
                 data={data}
                 pathname={pathname}
-                tooltipFields={['documents']}
+                tooltipFields={['head', 'concept', 'documents']}
                 xField="head"
                 yField="concept"
             />
diff --git a/src/app/core/dashboard/characteristics/control.tsx b/src/app/core/dashboard/characteristics/control.tsx
index 042d4fa..e3b0b83 100644
--- a/src/app/core/dashboard/characteristics/control.tsx
+++ b/src/app/core/dashboard/characteristics/control.tsx
@@ -6,7 +6,8 @@ import Typography from '@mui/joy/Typography';
 import { Section } from '@/components/layout/section';
 import { Select } from '@/components/input';
 import { useNavigation } from '@/hooks/navigation';
-import { HeadField, PatentSearchArgs } from '@/types';
+import { HeadField, PatentCharacteristic, PatentSearchArgs } from '@/types';
+import { DEFAULT_PATHNAME } from '@/constants';
 
 export const PatentCharacteristicsControl = ({
     headField,
@@ -42,3 +43,12 @@ export const PatentCharacteristicsControl = ({
         </>
     );
 };
+
+export const getClickUrl = (
+    object: PatentCharacteristic,
+    pathname: string = DEFAULT_PATHNAME
+) => {
+    const ids = object.documents?.join(';');
+    const term = `${object.concept} x ${object.head}`;
+    return `${pathname}/patents?ids=${ids}&terms=${term}`;
+};
diff --git a/src/components/charts/heatmap.tsx b/src/components/charts/heatmap.tsx
index 45856ce..81f4ce9 100644
--- a/src/components/charts/heatmap.tsx
+++ b/src/components/charts/heatmap.tsx
@@ -4,8 +4,6 @@ import { useRouter } from 'next/navigation';
 import Typography from '@mui/joy/Typography';
 import { Vega, VisualizationSpec } from 'react-vega';
 
-import { PatentCharacteristics } from '@/types';
-
 import { BaseChartProps } from './types';
 
 type HeadmapSpecProps = {
@@ -17,10 +15,9 @@ type HeadmapSpecProps = {
     yFieldTitle?: string;
 };
 
-type HeatmapProps = BaseChartProps & {
-    clickBaseUrl?: string; // TODO: both or neither with clickField
-    clickField?: string;
-    data: PatentCharacteristics; // TODO: make generic
+type HeatmapProps<DT extends Record<string, unknown>> = BaseChartProps & {
+    data: DT[];
+    getClickUrl?: (obj: DT) => string;
 } & HeadmapSpecProps;
 
 const getSpec: (props: HeadmapSpecProps) => VisualizationSpec = ({
@@ -95,27 +92,26 @@ const getSpec: (props: HeadmapSpecProps) => VisualizationSpec = ({
 /**
  * Graph chart
  */
-export const Heatmap = ({
+export const Heatmap = <DT extends Record<string, unknown>>({
     data,
-    clickBaseUrl,
-    clickField,
     colorField,
+    getClickUrl,
     tooltipFields = [],
     title,
     xField,
     yField,
     xFieldTitle = '',
     yFieldTitle = '',
-}: HeatmapProps): JSX.Element => {
+}: HeatmapProps<DT>): JSX.Element => {
     const router = useRouter();
     const signalListeners = {
         select: (_: unknown, value: unknown) => {
-            if (!clickField || typeof value !== 'object') {
+            if (!getClickUrl || typeof value !== 'object') {
                 return;
             }
-            const obj = value as Record<string, unknown>;
-            const urlParams = (obj[clickField] as string[]).join(';');
-            router.push(`${clickBaseUrl}${urlParams}`);
+            const obj = value as DT;
+            const url = getClickUrl(obj);
+            router.push(url);
         },
     };
 
diff --git a/src/types/documents/patents.ts b/src/types/documents/patents.ts
index 34c589c..ac63d88 100644
--- a/src/types/documents/patents.ts
+++ b/src/types/documents/patents.ts
@@ -86,13 +86,13 @@ const HeadFieldEnum = z.enum(['id', 'assignee', 'priority_date']);
 
 export type HeadField = z.infer<typeof HeadFieldEnum>;
 
-export const PatentCharacteristicsSchema = z.array(
-    z.object({
-        concept: z.string(),
-        count: z.number(),
-        head: z.union([z.string(), z.number()]),
-        documents: z.array(z.string()),
-    })
-);
+const PatentCharacteristicSchema = z.object({
+    concept: z.string(),
+    count: z.number(),
+    head: z.union([z.string(), z.number()]),
+    documents: z.array(z.string()),
+});
+export const PatentCharacteristicsSchema = z.array(PatentCharacteristicSchema);
 
+export type PatentCharacteristic = z.infer<typeof PatentCharacteristicSchema>;
 export type PatentCharacteristics = z.infer<typeof PatentCharacteristicsSchema>;

From f0116bfc03a38ca596380c9de2ad0e6794b2b8bb Mon Sep 17 00:00:00 2001
From: Kristin Lindquist <lindquist.kristin@gmail.com>
Date: Tue, 23 Jan 2024 14:54:49 -0700
Subject: [PATCH 4/4] fixed build

---
 src/app/layout.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 00ee8cc..eebbc01 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { Suspense } from 'react';
 import { Mulish } from 'next/font/google';
 
 import MuiXLicense from '@/components/data/mui-license';
@@ -26,7 +27,9 @@ const RootLayout = ({
     >
         <body className={mulish.className}>
             <ThemeRegistry options={{ key: 'joy' }}>
-                <NavigationProvider>{children}</NavigationProvider>
+                <Suspense>
+                    <NavigationProvider>{children}</NavigationProvider>
+                </Suspense>
                 <MuiXLicense />
             </ThemeRegistry>
         </body>