fix: allow mode to only show display filters

PostHog · Oct 6, 2023 · 1989bca · 1989bca
1 parent 1df3795
commit 1989bca
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 61 deletions.
diff --git a/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx b/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx
@@ -50,6 +50,7 @@ export function InsightContainer({
     disableCorrelationTable,
     disableLastComputation,
     disableLastComputationRefresh,
+    showingResults,
     insightMode,
     context,
     embedded,
@@ -59,6 +60,7 @@ export function InsightContainer({
     disableCorrelationTable?: boolean
     disableLastComputation?: boolean
     disableLastComputationRefresh?: boolean
+    showingResults?: boolean
     insightMode?: ItemMode
     context?: QueryContext
     embedded: boolean
@@ -210,56 +212,58 @@ export function InsightContainer({
                 className="insights-graph-container"
                 bordered={!embedded}
             >
-                <div>
-                    {isFunnels && (
-                        <div className="overflow-hidden">
-                            {/* negative margin-top so that the border is only visible when the rows wrap */}
-                            <div className="flex flex-wrap-reverse whitespace-nowrap gap-x-8 -mt-px">
-                                {(!disableLastComputation || !!samplingFactor) && (
-                                    <div className="flex grow items-center insights-graph-header border-t">
-                                        <InsightResultMetadata
-                                            disableLastComputation={disableLastComputation}
-                                            disableLastComputationRefresh={disableLastComputationRefresh}
-                                        />
+                {showingResults && (
+                    <div>
+                        {isFunnels && (
+                            <div className="overflow-hidden">
+                                {/* negative margin-top so that the border is only visible when the rows wrap */}
+                                <div className="flex flex-wrap-reverse whitespace-nowrap gap-x-8 -mt-px">
+                                    {(!disableLastComputation || !!samplingFactor) && (
+                                        <div className="flex grow items-center insights-graph-header border-t">
+                                            <InsightResultMetadata
+                                                disableLastComputation={disableLastComputation}
+                                                disableLastComputationRefresh={disableLastComputationRefresh}
+                                            />
+                                        </div>
+                                    )}
+                                    <div
+                                        className={`flex insights-graph-header ${
+                                            disableLastComputation ? 'border-b w-full mb-4' : 'border-t'
+                                        }`}
+                                    >
+                                        <FunnelCanvasLabel />
                                     </div>
-                                )}
-                                <div
-                                    className={`flex insights-graph-header ${
-                                        disableLastComputation ? 'border-b w-full mb-4' : 'border-t'
-                                    }`}
-                                >
-                                    <FunnelCanvasLabel />
                                 </div>
                             </div>
-                        </div>
-                    )}
+                        )}
 
-                    {!isFunnels && (!disableLastComputation || !!samplingFactor) && (
-                        <div className="flex items-center justify-between insights-graph-header">
-                            <div className="flex items-center">
-                                <InsightResultMetadata
-                                    disableLastComputation={disableLastComputation}
-                                    disableLastComputationRefresh={disableLastComputationRefresh}
-                                />
-                            </div>
+                        {!isFunnels && (!disableLastComputation || !!samplingFactor) && (
+                            <div className="flex items-center justify-between insights-graph-header">
+                                <div className="flex items-center">
+                                    <InsightResultMetadata
+                                        disableLastComputation={disableLastComputation}
+                                        disableLastComputationRefresh={disableLastComputationRefresh}
+                                    />
+                                </div>
 
-                            <div>{isPaths ? <PathCanvasLabel /> : null}</div>
-                        </div>
-                    )}
+                                <div>{isPaths ? <PathCanvasLabel /> : null}</div>
+                            </div>
+                        )}
 
-                    {BlockingEmptyState ? (
-                        BlockingEmptyState
-                    ) : supportsDisplay && showLegend ? (
-                        <Row className="insights-graph-container-row" wrap={false}>
-                            <Col className="insights-graph-container-row-left">{VIEW_MAP[activeView]}</Col>
-                            <Col className="insights-graph-container-row-right">
-                                <InsightLegend />
-                            </Col>
-                        </Row>
-                    ) : (
-                        VIEW_MAP[activeView]
-                    )}
-                </div>
+                        {BlockingEmptyState ? (
+                            BlockingEmptyState
+                        ) : supportsDisplay && showLegend ? (
+                            <Row className="insights-graph-container-row" wrap={false}>
+                                <Col className="insights-graph-container-row-left">{VIEW_MAP[activeView]}</Col>
+                                <Col className="insights-graph-container-row-right">
+                                    <InsightLegend />
+                                </Col>
+                            </Row>
+                        ) : (
+                            VIEW_MAP[activeView]
+                        )}
+                    </div>
+                )}
             </Card>
             {renderTable()}
             {!disableCorrelationTable && activeView === InsightType.FUNNELS && <FunnelCorrelation />}

diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
@@ -89,7 +89,7 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps
 
     return (
         <div className="flex justify-between items-center flex-wrap" data-attr="insight-filters">
-            <div className="flex items-center space-x-2 flex-wrap my-2 gap-y-2">
+            <div className="flex items-center gap-x-2 flex-wrap my-2 gap-y-2">
                 {showDateRange && !disableTable && (
                     <ConfigFilter>
                         <InsightDateFilter disabled={disableDateRange} />
@@ -127,7 +127,7 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps
                     </ConfigFilter>
                 )}
             </div>
-            <div className="flex items-center space-x-2 flex-wrap my-2 grow justify-end">
+            <div className="flex items-center gap-x-2 flex-wrap my-2">
                 {advancedOptions.length > 0 && (
                     <LemonMenu items={advancedOptions} closeOnClickInside={false}>
                         <LemonButton size="small" status="stealth">

diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx
@@ -79,20 +79,19 @@ export function InsightViz({ uniqueKey, query, setQuery, context, readOnly }: In
                             <EditorFilters query={query.source} showing={showingFilters} embedded={embedded} />
                         )}
 
-                        {showingResults && (
-                            <div className="insights-container" data-attr="insight-view">
-                                <InsightContainer
-                                    insightMode={insightMode}
-                                    context={context}
-                                    disableHeader={disableHeader}
-                                    disableTable={disableTable}
-                                    disableCorrelationTable={disableCorrelationTable}
-                                    disableLastComputation={disableLastComputation}
-                                    disableLastComputationRefresh={disableLastComputationRefresh}
-                                    embedded={embedded}
-                                />
-                            </div>
-                        )}
+                        <div className="insights-container" data-attr="insight-view">
+                            <InsightContainer
+                                insightMode={insightMode}
+                                context={context}
+                                disableHeader={disableHeader}
+                                disableTable={disableTable}
+                                disableCorrelationTable={disableCorrelationTable}
+                                disableLastComputation={disableLastComputation}
+                                disableLastComputationRefresh={disableLastComputationRefresh}
+                                showingResults={showingResults}
+                                embedded={embedded}
+                            />
+                        </div>
                     </div>
                 </BindLogic>
             </BindLogic>

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -69,7 +69,8 @@ const Component = (props: NotebookNodeViewProps<NotebookNodeQueryAttributes>): J
 
         if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             modifiedQuery.showFilters = false
-            modifiedQuery.showHeader = false
+            modifiedQuery.showHeader = true
+            modifiedQuery.showResults = false
             modifiedQuery.showTable = false
             modifiedQuery.showCorrelationTable = false
             modifiedQuery.embedded = true