fix: sandwich view prompt in comparison view (#1688)

* fix: sandwich view prompt in comparison view Co-authored-by: eduardo aleixo <eh-am@users.noreply.github.com>
grafana · Nov 9, 2022 · 5f32774 · 5f32774
1 parent b47b441
commit 5f32774
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx b/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx
@@ -443,11 +443,19 @@ class FlameGraphRenderer extends Component<
     );
 
     const sandwichPane = (() => {
+      console.log(this.state.panesOrientation);
       if (this.state.selectedItem.isNothing) {
         return (
           <div className={styles.sandwichPane} key="sandwich-pane">
-            <div className={styles.sandwichPaneInfo}>
-              <div className={styles.arrowLeft} />
+            <div
+              className={clsx(
+                styles.sandwichPaneInfo,
+                this.state.panesOrientation === 'vertical'
+                  ? styles.vertical
+                  : styles.horizontal
+              )}
+            >
+              <div className={styles.arrow} />
               Select a function to view callers/callees sandwich view
             </div>
           </div>

diff --git a/packages/pyroscope-flamegraph/src/FlameGraph/FlamegraphRenderer.module.scss b/packages/pyroscope-flamegraph/src/FlameGraph/FlamegraphRenderer.module.scss
@@ -48,7 +48,18 @@
     background-color: var(--ps-sandwich-pane-info-bg);
     color: var(--ps-neutral-1);
 
-    .arrowLeft {
+    &.vertical {
+      margin: 30px 0;
+
+      .arrow {
+        top: initial;
+        bottom: -15px;
+        left: 20px;
+        transform: rotate(-90deg);
+      }
+    }
+
+    .arrow {
       position: absolute;
       top: 14px;
       left: -20px;