Extra slots plus search transformRequest fix (#160)

* Four extra slots added, inset slot replaced with left-top
* Safe zone calculation improvements
* Search plugin transformRequest options fix

Author: dannyleech

demo/js/planning.js

@@ -131,8 +131,22 @@ interactiveMap.on('app:ready', function (e) {
 		label: 'Key',
 		html: renderKeyHTML(),
 		mobile: { slot: 'bottom', open: false, exclusive: true },
-		tablet: { slot: 'inset', width: '260px', open: false, exclusive: true },
-		desktop: { slot: 'inset', width: '280px', open: false, exclusive: true }
+		tablet: { slot: 'left-top', width: '260px', open: false, exclusive: true },
+		desktop: { slot: 'left-top', width: '280px', open: false, exclusive: true }
+	})
+	// interactiveMap.addPanel('test1', {
+	// 	label: 'Test1',
+	// 	html: '<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>',
+	// 	mobile: { slot: 'bottom', open: true },
+	// 	tablet: { slot: 'left-top', open: true },
+	// 	desktop: { slot: 'left-top', open: true, width: '200px' },
+	// })
+	interactiveMap.addPanel('test2', {
+		label: 'Test2',
+		html: '<p>Test</p><p>Test</p>',
+		mobile: { slot: 'bottom', open: true },
+		tablet: { slot: 'left-top', open: true },
+		desktop: { slot: 'left-top', open: true, width: '400px' },
 	})
 })
 

plugins/beta/datasets/src/manifest.js

@@ -27,13 +27,13 @@ export const manifest = {
       dismissible: true
     },
     tablet: {
-      slot: 'inset',
+      slot: 'left-top',
       dismissible: true,
       exclusive: true,
       width: '300px'
     },
     desktop: {
-      slot: 'inset',
+      slot: 'left-top',
       modal: false,
       dismissible: true,
       exclusive: true,
@@ -48,11 +48,11 @@ export const manifest = {
       modal: true
     },
     tablet: {
-      slot: 'inset',
+      slot: 'left-top',
       width: '300px'
     },
     desktop: {
-      slot: 'inset',
+      slot: 'left-top',
       width: '320px'
     },
     render: Key

plugins/beta/map-styles/src/manifest.js

@@ -14,13 +14,13 @@ export const manifest = {
       dismissible: true
     },
     tablet: {
-      slot: 'inset',
+      slot: 'left-top',
       modal: true,
       width: '400px',
       dismissible: true
     },
     desktop: {
-      slot: 'inset',
+      slot: 'left-top',
       modal: true,
       width: '400px',
       dismissible: true

plugins/search/src/events/fetchSuggestions.js

@@ -26,7 +26,7 @@ const getRequestConfig = async (ds, query, transformRequest) => {
  */
 const fetchDatasetResults = async (ds, request, query) => {
   try {
-    const response = await fetch(request.url, request.options)
+    const response = await fetch(request)
 
     if (!response.ok) {
       console.error(`Fetch error for ${ds.label || 'dataset'}: ${response.status}`)

plugins/search/src/events/fetchSuggestions.test.js

@@ -35,7 +35,7 @@ describe('fetchSuggestions', () => {
 
     const result = await fetchSuggestions('test', datasets, dispatch)
 
-    expect(fetch).toHaveBeenCalledWith('/api?q=test', { method: 'GET' })
+    expect(fetch).toHaveBeenCalledWith({ url: '/api?q=test', options: { method: 'GET' } })
     expect(result.results).toEqual(['a', 'b'])
     expect(dispatch).toHaveBeenCalledWith({
       type: 'UPDATE_SUGGESTIONS',
@@ -77,7 +77,7 @@ describe('fetchSuggestions', () => {
 
     const result = await fetchSuggestions('abc', datasets, dispatch)
 
-    expect(fetch).toHaveBeenCalledWith('/custom/abc', { method: 'POST' })
+    expect(fetch).toHaveBeenCalledWith({ url: '/custom/abc', options: { method: 'POST' } })
     expect(result.results).toEqual(['y'])
   })
 
@@ -101,7 +101,7 @@ describe('fetchSuggestions', () => {
 
     await fetchSuggestions('x', datasets, dispatch, transformRequest)
 
-    expect(fetch).toHaveBeenCalledWith('/t?q=x', { method: 'PUT' })
+    expect(fetch).toHaveBeenCalledWith({ url: '/t?q=x', options: { method: 'PUT' } })
   })
 
   test('handles fetch HTTP error', async () => {
@@ -206,7 +206,7 @@ describe('fetchSuggestions', () => {
 
     const result = await fetchSuggestions('hi', datasets, dispatch)
 
-    expect(fetch).toHaveBeenCalledWith('/default?q=hi', { method: 'GET' })
+    expect(fetch).toHaveBeenCalledWith({ url: '/default?q=hi', options: { method: 'GET' } })
     expect(result.results).toEqual(['ok'])
   })
 })

plugins/search/src/search.scss

@@ -84,9 +84,14 @@
     opacity: 0;
     z-index: -1;
   }
-  .im-o-app__inset .im-c-panel {
-    opacity: 0;
-    z-index: -1;
+  .im-o-app__left-top,
+  .im-o-app__left-bottom,
+  .im-o-app__right-top,
+  .im-o-app__right-bottom {
+    .im-c-panel {
+      opacity: 0;
+      z-index: -1;
+    }
   }
 }
 

src/App/components/Panel/Panel.module.scss

@@ -14,6 +14,7 @@
     display: flex;
     flex-direction: column;
     max-height: 100vh;
+    min-height: 0;
     min-width: var(--min-panel-width);
     pointer-events: auto;
     background-color: var(--background-color);

src/App/hooks/useLayoutMeasurements.js

@@ -12,9 +12,6 @@ const topColWidth = (left, right) =>
 const subSlotMaxHeight = (columnHeight, siblingButtons, gap) =>
   columnHeight - (siblingButtons ? siblingButtons + gap : 0)
 
-const calcOffsetLeft = (bottomOffsetTop, gap, insetBottom, inset) =>
-  bottomOffsetTop - gap > insetBottom ? 0 : inset.offsetLeft + inset.offsetWidth
-
 export function useLayoutMeasurements () {
   const { dispatch, breakpoint, layoutRefs } = useApp()
   const { mapSize, isMapReady } = useMap()
@@ -26,7 +23,6 @@ export function useLayoutMeasurements () {
     topRef,
     topLeftColRef,
     topRightColRef,
-    insetRef,
     footerRef,
     actionsRef,
     leftTopRef,
@@ -44,11 +40,9 @@ export function useLayoutMeasurements () {
     const top = topRef.current
     const topLeftCol = topLeftColRef.current
     const topRightCol = topRightColRef.current
-    const inset = insetRef.current
     const bottom = footerRef.current
-    const actions = actionsRef.current
 
-    if ([main, top, inset, bottom].some(r => !r)) {
+    if ([main, top, bottom].some(r => !r)) {
       return
     }
 
@@ -77,9 +71,6 @@ export function useLayoutMeasurements () {
     appContainer.style.setProperty('--left-bottom-panel-max-height', `${subSlotMaxHeight(leftColumnHeight, buttonHeight(leftTopRef), dividerGap)}px`)
     appContainer.style.setProperty('--right-top-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightBottomRef), dividerGap)}px`)
     appContainer.style.setProperty('--right-bottom-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightTopRef), dividerGap)}px`)
-
-    // === Bottom left offset ===
-    appContainer.style.setProperty('--offset-left', `${calcOffsetLeft(Math.min(bottom.offsetTop, actions.offsetTop), dividerGap, inset.offsetHeight + leftOffsetTop, inset)}px`)
   }
 
   // --------------------------------

src/App/hooks/useLayoutMeasurements.test.js

@@ -24,7 +24,6 @@ const refs = (o = {}) => ({
   topRef: { current: o.top === null ? null : el({ offsetTop: 10, ...o.top }) },
   topLeftColRef: { current: el({ offsetHeight: 50, offsetWidth: 200, ...o.topLeftCol }) },
   topRightColRef: { current: el({ offsetHeight: 40, offsetWidth: 180, ...o.topRightCol }) },
-  insetRef: { current: o.inset === null ? null : el({ offsetHeight: 100, offsetLeft: 20, offsetWidth: 300, ...o.inset }) },
   footerRef: { current: o.footer === null ? null : el({ offsetTop: 400, ...o.footer }) },
   actionsRef: { current: el({ offsetTop: 450, ...o.actions }) },
   leftTopRef: { current: el({ offsetHeight: 0, ...o.leftTop }) },
@@ -57,7 +56,7 @@ describe('useLayoutMeasurements', () => {
   })
 
   test('early return when required refs are null', () => {
-    const { layoutRefs } = setup({ refs: { main: null, top: null, inset: null, footer: null } })
+    const { layoutRefs } = setup({ refs: { main: null, top: null, footer: null } })
     renderHook(() => useLayoutMeasurements())
     expect(layoutRefs.appContainerRef.current.style.setProperty).not.toHaveBeenCalled()
   })
@@ -66,13 +65,11 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     const spy = layoutRefs.appContainerRef.current.style.setProperty
-    ;['--offset-left', '--right-offset-top', '--right-offset-bottom', '--top-col-width']
+    ;['--right-offset-top', '--right-offset-bottom', '--top-col-width']
       .forEach(prop => expect(spy).toHaveBeenCalledWith(prop, expect.any(String)))
   })
 
   test.each([
-    ['offset-left with overlap', { inset: { offsetHeight: 200, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 100 }, actions: { offsetTop: 120 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '180px'],
-    ['offset-left without overlap', { inset: { offsetHeight: 50, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 200 }, actions: { offsetTop: 220 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '0px'],
     ['right-offset-top', { topRightCol: { offsetHeight: 80 }, top: { offsetTop: 15 } }, '95px'],
     ['right-offset-bottom', { main: { offsetHeight: 600 }, footer: { offsetTop: 500 } }, '108px'],
     // leftColumnHeight = 400 - (50+10) - 8 = 332; rightColumnHeight = 400 - (40+10) - 8 = 342

src/App/hooks/useVisibleGeometry.js

@@ -31,14 +31,8 @@ export const getPointCoordinates = (geojson) => {
   return null
 }
 
-const SLOT_REFS = {
-  inset: 'insetRef',
-  bottom: 'bottomRef',
-  side: 'sideRef'
-}
-
 export const useVisibleGeometry = () => {
-  const { mapProvider, eventBus } = useConfig()
+  const { id, mapProvider, eventBus } = useConfig()
   const { layoutRefs, panelConfig, panelRegistry, breakpoint } = useApp()
 
   const latestRef = useRef({ layoutRefs, panelConfig, panelRegistry, breakpoint })
@@ -49,22 +43,22 @@ export const useVisibleGeometry = () => {
       return undefined
     }
 
-    const handlePanelOpened = ({ panelId, slot: eventSlot, visibleGeometry: eventVisibleGeometry }) => {
-      const { panelConfig: config, panelRegistry: registry, layoutRefs: refs, breakpoint: bp } = latestRef.current
+    const handlePanelOpened = ({ panelId, visibleGeometry: eventVisibleGeometry }) => {
+      const { panelConfig: config, panelRegistry: registry } = latestRef.current
       const resolvedConfig = config?.[panelId] ? config : (registry?.getPanelConfig() ?? config)
       const visibleGeometry = eventVisibleGeometry ?? resolvedConfig?.[panelId]?.visibleGeometry
-      const slot = eventSlot ?? resolvedConfig?.[panelId]?.[bp]?.slot
-      const slotRef = refs[SLOT_REFS[slot]]
+      const panel = layoutRefs.appContainerRef.current?.querySelector(`#${id}-panel-${panelId}`)
 
-      if (!visibleGeometry || !slotRef) {
+      if (!visibleGeometry) {
         return
       }
       if (typeof mapProvider.isGeometryObscured !== 'function') {
         return
       }
 
       const waitForPanel = () => {
-        const panelRect = slotRef.current?.getBoundingClientRect()
+        if (!panel) { return }
+        const panelRect = panel.getBoundingClientRect()
 
         if (!panelRect || panelRect.width === 0 || panelRect.height === 0) {
           // Not ready yet, check on the next animation frame