Implement display popover

nextjs/package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.0.7",

nextjs/src/app/reports/[id]/(components)/ConstituenciesPanel.tsx

@@ -1,10 +1,13 @@
-import { useAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 import { useEffect, useRef } from 'react'
 
 import { ConstituencyElectionDeepDive } from '@/app/reports/[id]/(components)/reportsConstituencyItem'
 import { Card } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { constituencyPanelTabAtom } from '@/lib/map/state'
+import {
+  constituencyPanelTabAtom,
+  isConstituencyPanelOpenAtom,
+} from '@/lib/map/state'
 
 import { selectedBoundaryAtom } from '../useSelectBoundary'
 import { useReport } from './ReportProvider'
@@ -13,6 +16,8 @@ import { TopConstituencies } from './TopConstituencies'
 export function ConstituenciesPanel() {
   const [selectedBoundary, setSelectedConstituency] =
     useAtom(selectedBoundaryAtom)
+
+  const isConstituencyPanelOpen = useAtomValue(isConstituencyPanelOpenAtom)
   const [tab, setTab] = useAtom(constituencyPanelTabAtom)
   const {
     report: {
@@ -32,6 +37,7 @@ export function ConstituenciesPanel() {
   }, [selectedBoundary, setTab])
 
   if (!analyticalAreaType) return null
+  if (!isConstituencyPanelOpen) return null
 
   return (
     <Card className="pt-4 bg-meepGray-800 border-1 text-meepGray-200 border border-meepGray-700 max-h-full flex flex-col pointer-events-auto">

nextjs/src/app/reports/[id]/(components)/ReportConfiguration.tsx

@@ -16,7 +16,6 @@ import {
 import { ChevronsUpDown } from 'lucide-react'
 import { getPoliticalTilesetsByCountry } from '../politicalTilesets'
 import { useReport } from './ReportProvider'
-import ReportConfigLegacyControls from './_ReportConfigLegacyControls'
 
 const ReportConfiguration: React.FC = () => {
   const { report, updateReport } = useReport()
@@ -74,7 +73,6 @@ const ReportConfiguration: React.FC = () => {
             </p>
           </CollapsibleContent>
         </Collapsible>
-        <ReportConfigLegacyControls />
       </div>
     </div>
   )

nextjs/src/app/reports/[id]/(components)/ReportDisplaySettings.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@/components/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { isConstituencyPanelOpenAtom } from '@/lib/map'
+import { MixerHorizontalIcon } from '@radix-ui/react-icons'
+import { useAtomValue } from 'jotai'
+import React from 'react'
+import { NAVBAR_HEIGHT } from './ReportNavbar'
+import ReportConfigLegacyControls from './_ReportConfigLegacyControls'
+
+const ReportDisplaySettings: React.FC = () => {
+  const isConstituencyPanelOpen = useAtomValue(isConstituencyPanelOpenAtom)
+
+  return (
+    <div
+      id="report-display-settings"
+      style={{
+        top: NAVBAR_HEIGHT + 15 + 'px',
+        right: isConstituencyPanelOpen ? '400px' : '15px',
+        // right: 'calc(var(--sidebar-width) + 15px)',
+      }}
+      className="fixed z-10"
+    >
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button size="sm" variant="muted">
+            <MixerHorizontalIcon />
+            Display
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end">
+          <ReportConfigLegacyControls />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export default ReportDisplaySettings

nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx

@@ -7,14 +7,16 @@ import { MappedIcon } from '../../../../components/icons/MappedIcon'
 
 // You can set the title & href of the top left icon link based on route & context
 export const navbarTitleAtom = atom('')
+export const NAVBAR_HEIGHT = 48
 
 export default function ReportNavbar() {
   const title = useAtomValue(navbarTitleAtom)
   const { updateReport } = useReport()
 
   return (
     <nav
-      className="fixed top-0 left-0 w-full h-12 bg-meepGray-600 flex flex-row items-center
+      style={{ height: NAVBAR_HEIGHT.toString() + 'px' }}
+      className="fixed top-0 left-0 w-full bg-meepGray-600 flex flex-row items-center
      justify-between px-4 shadow-md z-10 border border-b-meepGray-800"
     >
       <section className="flex flex-row items-center gap-2">

nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx

@@ -3,6 +3,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
 import ReportConfiguration from './ReportConfiguration'
 import { ReportDataSources } from './ReportDataSources'
+import { NAVBAR_HEIGHT } from './ReportNavbar'
 
 const classes = {
   tabsTrigger:
@@ -11,7 +12,12 @@ const classes = {
 
 export function ReportSidebarLeft() {
   return (
-    <Sidebar className="top-[48px]  border border-r-meepGray-800">
+    <Sidebar
+      style={{
+        top: NAVBAR_HEIGHT + 'px',
+      }}
+      className="border border-r-meepGray-800"
+    >
       <SidebarContent className="bg-meepGray-600">
         <Tabs defaultValue="data-sources" className="w-full">
           <TabsList

nextjs/src/app/reports/[id]/page.tsx

@@ -14,6 +14,7 @@ import {
 import { currentOrganisationIdAtom } from '@/lib/organisation'
 
 import { SidebarProvider } from '@/components/ui/sidebar'
+import ReportDisplaySettings from './(components)/ReportDisplaySettings'
 import ReportNavbar from './(components)/ReportNavbar'
 import ReportPage from './(components)/ReportPage'
 import ReportProvider from './(components)/ReportProvider'
@@ -49,7 +50,6 @@ export default function Page({ params: { id } }: { params: Params }) {
   // The ReportProvider component needs to be able to provide a report to its children
   if (!report.data?.mapReport) return null
 
-  console.log('report.data?.mapReport', report.data?.mapReport)
   return (
     <JotaiProvider key={id}>
       <MapProvider>
@@ -63,6 +63,7 @@ export default function Page({ params: { id } }: { params: Params }) {
           >
             <ReportNavbar />
             <ReportSidebarLeft />
+            <ReportDisplaySettings />
             <main>
               <ReportPage />
             </main>

nextjs/src/app/reports/[id]/useSelectBoundary.ts

@@ -1,6 +1,6 @@
 'use client'
-import { useLoadedMap } from '@/lib/map'
-import { atom, useAtom } from 'jotai'
+import { isConstituencyPanelOpenAtom, useLoadedMap } from '@/lib/map'
+import { atom, useAtom, useSetAtom } from 'jotai'
 import { useEffect } from 'react'
 import { Tileset } from './types'
 
@@ -9,6 +9,7 @@ export const selectedBoundaryAtom = atom<string | null>(null)
 const useSelectBoundary = (tileset?: Tileset | null) => {
   const { loadedMap } = useLoadedMap()
   const [selectedBoundary, setSelectedBoundary] = useAtom(selectedBoundaryAtom)
+  const setIsConstituencyPanelOpen = useSetAtom(isConstituencyPanelOpenAtom)
 
   useEffect(
     function selectConstituency() {
@@ -30,12 +31,15 @@ const useSelectBoundary = (tileset?: Tileset | null) => {
             if (feature.source === tileset.mapboxSourceId) {
               const id = feature.properties?.[tileset.promoteId]
               if (id) {
-                console.log('Selected constituency:', id)
-                setSelectedBoundary(id)
-
-                // setSelectedConstituency(id)
-                // setIsConstituencyPanelOpen(true)
-                // setTab('selected')
+                // If already selected boundary, deselect it
+                if (selectedBoundary === id) {
+                  setSelectedBoundary(null)
+                  setIsConstituencyPanelOpen(false)
+                  return
+                } else {
+                  setSelectedBoundary(id)
+                  setIsConstituencyPanelOpen(true)
+                }
               }
             }
           }
@@ -44,7 +48,13 @@ const useSelectBoundary = (tileset?: Tileset | null) => {
         }
       })
     },
-    [loadedMap, tileset]
+    [
+      loadedMap,
+      tileset,
+      selectedBoundary,
+      setSelectedBoundary,
+      setIsConstituencyPanelOpen,
+    ]
   )
 }
 

nextjs/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'font-IBMPlexCondensed inline-flex items-center justify-center whitespace-nowrap rounded-sm font-medium ring-offset-meepGray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'font-IBMPlexCondensed inline-flex gap-2 flex-row items-center justify-center whitespace-nowrap rounded-sm font-medium ring-offset-meepGray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -21,6 +21,7 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
         reverse:
           'bg-white hover:bg-slate-100 !text-gray-900 hover:!text-gray-900',
+        muted: 'bg-muted text-meepGray-400 hover:text-meepGray-200 opacity-100',
       },
       size: {
         default: 'rounded text-label h-10 px-4 py-2',