Add styles to make panel scrollable (#692)

Follow up of : #691 Fixing panel overflowing problem in https://deploy-preview-201--ghg-demo.netlify.app/data-catalog/epa-ch4emission-yeargrid-v2express/explore?projection=equirectangular%7C%7C&basemapid=light&datetime=2020-01-01T00%3A00%3A00.000Z Wow Scroll is hard. It will be ideal if we can find a way to stick the date widget and make only layers roll, but I am giving up here.. This change basically resurrects what `ShadowScroll` does for HTML and CSS sans some unnecessary elements for this case. I noticed that the window scroll sometimes pops up if you scroll very fast on the panel area. (Sorry, I cannot reproduce stably enough to grab a screen recording.) this error happens in production environment, too, so this PR doesn't necessarily introduce the error. But with the default (thicker) scroll, the error seems more noticeable.
NASA-IMPACT · Oct 6, 2023 · e2c4b90 · e2c4b90
2 parents f04141a + cf8a812
commit e2c4b90
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 45 deletions.
diff --git a/app/scripts/components/datasets/s-explore/index.tsx b/app/scripts/components/datasets/s-explore/index.tsx
@@ -100,7 +100,6 @@ const DatesWrapper = styled.div`
   position: relative;
   z-index: 10;
   box-shadow: 0 1px 0 0 ${themeVal('color.base-100a')};
-
   > ${PanelWidget} {
     width: 100%;
     position: relative;
@@ -109,6 +108,34 @@ const DatesWrapper = styled.div`
   }
 `;
 
+const PositionPlaceHolderForScroll = styled.div`
+  position: absolute;
+  pointer-events: none;
+  z-index: 1000;
+  top: 0px;
+  left: 0px;
+  width: 1.5rem;
+  height: 100%;
+  background: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 100%
+  );
+`;
+
+const ScrollArea = styled.div`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+`;
+
+const ScrollAreaInner = styled.div`
+  position: absolute;
+  inset: 0px;
+  overflow: scroll;
+`;
+
 const isSelectedDateValid = (dateList, selectedDate) => {
   if (dateList) {
     // Since the available dates changes, check if the currently selected
@@ -587,52 +614,57 @@ function DatasetsExplore() {
                 </PanelActions>
               </PanelHeader>
               <PanelBody>
-                <DatesWrapper>
-                  {activeLayerTimeseries && (
-                    <PanelDateWidget
-                      title='Date'
-                      value={datePickerValue}
-                      onConfirm={datePickerConfirm}
-                      timeDensity={activeLayerTimeseries.timeDensity}
-                      availableDates={availableActiveLayerDates}
-                    >
-                      {activeLayerCompareTimeseries && (
-                        <FormSwitch
-                          id='compare-date-toggle'
-                          name='compare-date-toggle'
-                          value='compare-date-toggle'
-                          checked={isComparing}
-                          textPlacement='right'
-                          onChange={() => setIsComparing((v) => !v)}
+                <PositionPlaceHolderForScroll />
+                <ScrollArea>
+                  <ScrollAreaInner>
+                    <DatesWrapper>
+                      {activeLayerTimeseries && (
+                        <PanelDateWidget
+                          title='Date'
+                          value={datePickerValue}
+                          onConfirm={datePickerConfirm}
+                          timeDensity={activeLayerTimeseries.timeDensity}
+                          availableDates={availableActiveLayerDates}
                         >
-                          Toggle date comparison
-                        </FormSwitch>
+                          {activeLayerCompareTimeseries && (
+                            <FormSwitch
+                              id='compare-date-toggle'
+                              name='compare-date-toggle'
+                              value='compare-date-toggle'
+                              checked={isComparing}
+                              textPlacement='right'
+                              onChange={() => setIsComparing((v) => !v)}
+                            >
+                              Toggle date comparison
+                            </FormSwitch>
+                          )}
+                        </PanelDateWidget>
+                      )}
+                      {isComparing && activeLayerCompareTimeseries && (
+                        <PanelDateWidget
+                          title='Date comparison'
+                          value={datePickerCompareValue}
+                          onConfirm={datePickerCompareConfirm}
+                          timeDensity={activeLayerCompareTimeseries.timeDensity}
+                          availableDates={availableActiveLayerCompareDates}
+                        />
                       )}
-                    </PanelDateWidget>
-                  )}
-                  {isComparing && activeLayerCompareTimeseries && (
-                    <PanelDateWidget
-                      title='Date comparison'
-                      value={datePickerCompareValue}
-                      onConfirm={datePickerCompareConfirm}
-                      timeDensity={activeLayerCompareTimeseries.timeDensity}
-                      availableDates={availableActiveLayerCompareDates}
-                    />
-                  )}
-                </DatesWrapper>
-                <PanelWidget>
-                  <PanelWidgetHeader>
-                    <PanelWidgetTitle>Layers</PanelWidgetTitle>
-                  </PanelWidgetHeader>
-                  <PanelWidgetBody>
-                    <DatasetLayers
-                      datasetId={dataset.data.id}
-                      asyncLayers={asyncLayers}
-                      selectedLayerId={selectedLayerId ?? undefined}
-                      onAction={onLayerAction}
-                    />
-                  </PanelWidgetBody>
-                </PanelWidget>
+                    </DatesWrapper>
+                    <PanelWidget id='panel-widget'>
+                      <PanelWidgetHeader>
+                        <PanelWidgetTitle>Layers</PanelWidgetTitle>
+                      </PanelWidgetHeader>
+                      <PanelWidgetBody>
+                        <DatasetLayers
+                          datasetId={dataset.data.id}
+                          asyncLayers={asyncLayers}
+                          selectedLayerId={selectedLayerId ?? undefined}
+                          onAction={onLayerAction}
+                        />
+                      </PanelWidgetBody>
+                    </PanelWidget>
+                  </ScrollAreaInner>
+                </ScrollArea>
               </PanelBody>
             </PanelInner>
           </Panel>

diff --git a/app/scripts/styles/panel.tsx b/app/scripts/styles/panel.tsx
@@ -105,6 +105,7 @@ export const PanelBody = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  position:relative;
 
   > div > div:nth-child(2),
   > div > div:nth-child(3) {