[fix] effect-related UI fixes (#2439)

keplergl · Nov 17, 2023 · 68bff82 · 68bff82
1 parent 82fc69e
commit 68bff82
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/src/components/src/effects/effect-manager.tsx b/src/components/src/effects/effect-manager.tsx
@@ -57,7 +57,7 @@ type StyledEffectPanelContentProps = {
 };
 const StyledEffectPanelContent = styled.div<StyledEffectPanelContentProps>`
   ${props => props.theme.sidePanelScrollBar};
-  padding: ${props => (props.extended ? '32px' : '10px')};
+  padding: ${props => (props.extended ? '32px' : '10px 0px 10px 0px')};
   overflow: overlay;
   display: flex;
   flex-direction: column;

diff --git a/src/components/src/effects/effect-panel.tsx b/src/components/src/effects/effect-panel.tsx
@@ -35,7 +35,7 @@ const PanelWrapper = styled.div<PanelWrapperProps>`
     cursor: move;
   }
   margin: 3px auto 3px 25px;
-  max-width: 275px;
+  max-width: 295px;
 `;
 
 EffectPanelFactory.deps = [EffectPanelHeaderFactory, EffectConfiguratorFactory];

diff --git a/src/components/src/effects/effect-time-slider.tsx b/src/components/src/effects/effect-time-slider.tsx
@@ -116,6 +116,12 @@ const RangeSliderWrapper = styled.div`
     height: 32px;
     width: 8px;
     margin-top: -14px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  .kg-range-slider__handle::after {
+    margin-left: 1px;
   }
   .kg-range-slider__input {
     height: 32px;

diff --git a/src/utils/src/effect-utils.ts b/src/utils/src/effect-utils.ts
@@ -21,16 +21,16 @@ export function computeDeckEffects({
   mapState: MapState;
 }): PostProcessEffect[] {
   // TODO: 1) deck effects per deck context 2) preserved between draws
-  let effects = visState.effectOrder
+  return visState.effectOrder
     .map(effectId => {
-      return findById(effectId)(visState.effects);
+      const effect = findById(effectId)(visState.effects) as Effect | undefined;
+      if (effect?.isEnabled && effect.deckEffect) {
+        updateEffect({visState, mapState, effect});
+        return effect.deckEffect;
+      }
+      return null;
     })
-    .filter(effect => Boolean(effect && effect.isEnabled && effect.deckEffect)) as Effect[];
-
-  return effects.map(effect => {
-    updateEffect({visState, mapState, effect});
-    return effect.deckEffect;
-  });
+    .filter(effect => effect);
 }
 
 /**