Merge pull request #4115 from mathesar-foundation/3183_refresh_button

Improve data explorer UI layout
mathesar-foundation · Jan 9, 2025 · b287684 · b287684
2 parents 60e95bf + 04192ab
commit b287684
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 123 deletions.
diff --git a/mathesar_ui/src/App.svelte b/mathesar_ui/src/App.svelte
@@ -132,6 +132,7 @@
     --header-height: 3.7378rem;
 
     --table-title-header-height: 4.6428rem;
+    --status-bar-padding: 0.3rem;
 
     color: var(--slate-800);
 

diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
@@ -48,7 +48,6 @@
   "based_on": "Based on",
   "before_upgrading": "Before Upgrading",
   "bootstrap_connection_help": "These connection credentials will be used to create the new user. The existing user will need to have the CREATEROLE privilege.",
-  "build_your_exploration": "Build your Exploration",
   "cancel": "Cancel",
   "cancel_upload": "Cancel upload",
   "cannot_modify_own_access_warning": "You cannot modify your own access levels. Please contact an administrator.",

diff --git a/mathesar_ui/src/i18n/languages/ja/dict.json b/mathesar_ui/src/i18n/languages/ja/dict.json
@@ -35,7 +35,6 @@
   "based_on": "ベース",
   "before_upgrading": "アップグレード前",
   "bootstrap_connection_help": "これらの接続認証情報は、新規ユーザーの作成に使用されます。既存のユーザーはCREATEROLE権限を持っている必要があります。",
-  "build_your_exploration": "探索を構築",
   "cancel": "キャンセル",
   "cancel_upload": "アップロードをキャンセル",
   "cannot_modify_own_access_warning": "自分のアクセスレベルは変更できません。管理者にご連絡ください。",

diff --git a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
@@ -8,11 +8,12 @@
   import type { Schema } from '@mathesar/models/Schema';
   import { getSchemaPageUrl } from '@mathesar/routes/urls';
   import {
-    ExplorationResult,
+    ExplorationResults,
     QueryModel,
     QueryRunner,
     WithExplorationInspector,
   } from '@mathesar/systems/data-explorer';
+  import StatusBar from '@mathesar/systems/data-explorer/StatusBar.svelte';
   import type { ShareConsumer } from '@mathesar/utils/shares';
 
   import Header from './Header.svelte';
@@ -58,16 +59,17 @@
         queryHandler={queryRunner}
         on:delete={gotoSchemaPage}
       >
-        <ExplorationResult queryHandler={queryRunner} isExplorationPage />
+        <ExplorationResults queryHandler={queryRunner} />
       </WithExplorationInspector>
+      <StatusBar queryHandler={queryRunner} />
     </div>
   {/if}
 </LayoutWithHeader>
 
 <style>
   .exploration-page {
     display: grid;
-    grid-template: auto 1fr / 1fr;
+    grid-template: auto 1fr auto / 1fr;
     height: 100%;
   }
 </style>
diff --git a/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte b/mathesar_ui/src/systems/data-explorer/DataExplorer.svelte
@@ -8,15 +8,16 @@
   import { WithExplorationInspector } from './exploration-inspector';
   import WithInputSidebar from './input-sidebar/WithInputSidebar.svelte';
   import type QueryManager from './QueryManager';
-  import ResultPane from './result-pane/ResultPane.svelte';
+  import ExplorationResults from './result-pane/ExplorationResults.svelte';
+  import StatusBar from './StatusBar.svelte';
   import type { ColumnWithLink } from './utils';
 
   export let queryManager: QueryManager;
   export let linkCollapsibleOpenState: Record<ColumnWithLink['id'], boolean> =
     {};
 
   $: ({ query } = queryManager);
-  $: hasNoColumns = $query.initial_columns.length === 0;
+  $: hasColumns = !!$query.initial_columns.length;
 
   let isInspectorOpen = true;
 </script>
@@ -49,7 +50,7 @@
   {:else}
     <div class="content-pane">
       <WithInputSidebar {queryManager} {linkCollapsibleOpenState}>
-        {#if hasNoColumns}
+        {#if !hasColumns}
           <div class="help-text">
             {$_('get_started_by_adding_columns_from_left')}
           </div>
@@ -59,10 +60,13 @@
             queryHandler={queryManager}
             on:delete
           >
-            <ResultPane queryHandler={queryManager} />
+            <ExplorationResults queryHandler={queryManager} />
           </WithExplorationInspector>
         {/if}
       </WithInputSidebar>
+      {#if hasColumns}
+        <StatusBar queryHandler={queryManager} />
+      {/if}
     </div>
   {/if}
 </div>
@@ -100,7 +104,8 @@
     }
 
     .content-pane {
-      display: flex;
+      display: grid;
+      grid-template: 1fr auto / 1fr;
       overflow: hidden;
       overflow-x: auto;
       .help-text {

diff --git a/mathesar_ui/src/systems/data-explorer/StatusBar.svelte b/mathesar_ui/src/systems/data-explorer/StatusBar.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import PaginationGroup from '@mathesar/components/PaginationGroup.svelte';
+
+  import type QueryManager from './QueryManager';
+  import type { QueryRunner } from './QueryRunner';
+  import QueryRefreshButton from './result-pane/QueryRefreshButton.svelte';
+
+  export let queryHandler: QueryRunner | QueryManager;
+
+  $: ({ rowsData, pagination, runState } = queryHandler);
+  $: recordRunState = $runState?.state;
+  $: totalCount = $rowsData.totalCount;
+</script>
+
+<div data-identifier="status-bar">
+  {#if totalCount}
+    <div>
+      {$_('showing_n_to_m_of_total', {
+        values: {
+          leftBound: $pagination.leftBound,
+          rightBound: Math.min(totalCount, $pagination.rightBound),
+          totalCount,
+        },
+      })}
+    </div>
+  {:else if recordRunState === 'success'}
+    {$_('no_results_found')}
+  {/if}
+  <div class="pagination-controls">
+    <PaginationGroup
+      pagination={$pagination}
+      {totalCount}
+      on:change={(e) => {
+        void queryHandler.setPagination(e.detail);
+      }}
+    />
+    <div class="refresh">
+      <QueryRefreshButton queryRunner={queryHandler} />
+    </div>
+  </div>
+</div>
+
+<style>
+  [data-identifier='status-bar'] {
+    flex-grow: 0;
+    flex-shrink: 0;
+    border-top: 1px solid var(--slate-300);
+    background-color: var(--slate-100);
+    padding: var(--status-bar-padding);
+    display: flex;
+    align-items: center;
+  }
+
+  .pagination-controls {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .refresh {
+    margin-left: var(--size-xx-small);
+  }
+</style>
diff --git a/mathesar_ui/src/systems/data-explorer/index.ts b/mathesar_ui/src/systems/data-explorer/index.ts
@@ -2,6 +2,6 @@ export { default as DataExplorer } from './DataExplorer.svelte';
 export { default as QueryManager } from './QueryManager';
 export { QueryRunner } from './QueryRunner';
 export { default as QueryModel } from './QueryModel';
-export { default as ExplorationResult } from './result-pane/Results.svelte';
+export { default as ExplorationResults } from './result-pane/ExplorationResults.svelte';
 export * from './exploration-inspector';
 export * from './urlSerializationUtils';
diff --git a/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte b/mathesar_ui/src/systems/data-explorer/input-sidebar/InputSidebar.svelte
@@ -85,7 +85,6 @@
 </script>
 
 <aside class="input-sidebar">
-  <header>{$_('build_your_exploration')}</header>
   <section class="input-pane">
     <TabContainer
       {tabs}
@@ -134,12 +133,6 @@
     flex-direction: column;
     overflow: hidden;
 
-    header {
-      padding: var(--size-xx-small) var(--size-large);
-      border-bottom: 1px solid var(--slate-200);
-      font-weight: 590;
-    }
-
     .input-pane {
       flex-grow: 1;
       overflow: hidden;

diff --git a/.../data-explorer/result-pane/Results.svelte → ...rer/result-pane/ExplorationResults.svelte b/.../data-explorer/result-pane/Results.svelte → ...rer/result-pane/ExplorationResults.svelte
@@ -4,7 +4,6 @@
   import { _ } from 'svelte-i18n';
 
   import CellBackground from '@mathesar/components/CellBackground.svelte';
-  import PaginationGroup from '@mathesar/components/PaginationGroup.svelte';
   import {
     Sheet,
     SheetHeader,
@@ -22,13 +21,11 @@
   import type QueryManager from '../QueryManager';
   import { type QueryRunner, getRowSelectionId } from '../QueryRunner';
 
-  import QueryRefreshButton from './QueryRefreshButton.svelte';
   import QueryRunErrors from './QueryRunErrors.svelte';
   import ResultHeaderCell from './ResultHeaderCell.svelte';
   import ResultRowCell from './ResultRowCell.svelte';
 
   export let queryHandler: QueryRunner | QueryManager;
-  export let isExplorationPage = false;
 
   const ID_ROW_CONTROL_COLUMN = 'row-control';
   const columnWidths = new ImmutableMap([
@@ -64,7 +61,6 @@
     ? [{ id: ID_ROW_CONTROL_COLUMN }, ...columnList]
     : [];
   $: rows = $rowsData.rows;
-  $: totalCount = $rowsData.totalCount;
   // Show a dummy ghost row when there are no records
   $: showDummyGhostRow =
     (recordRunState === 'success' || recordRunState === 'processing') &&
@@ -149,33 +145,6 @@
         {/each}
       </SheetVirtualRows>
     </Sheet>
-    <div data-identifier="status-bar">
-      {#if totalCount}
-        <div>
-          {$_('showing_n_to_m_of_total', {
-            values: {
-              leftBound: $pagination.leftBound,
-              rightBound: Math.min(totalCount, $pagination.rightBound),
-              totalCount,
-            },
-          })}
-        </div>
-      {:else if recordRunState === 'success'}
-        {$_('no_results_found')}
-      {/if}
-      <div class="pagination-controls">
-        <PaginationGroup
-          pagination={$pagination}
-          {totalCount}
-          on:change={(e) => {
-            void queryHandler.setPagination(e.detail);
-          }}
-        />
-        {#if isExplorationPage}
-          <QueryRefreshButton queryRunner={queryHandler} />
-        {/if}
-      </div>
-    </div>
   {/if}
 </div>
 
@@ -186,7 +155,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    --status-bar-height: 3rem;
 
     .empty-state {
       padding: 1rem;
@@ -198,32 +166,6 @@
       overflow: auto;
     }
 
-    :global(.sheet) {
-      bottom: var(--status-bar-height);
-    }
-
-    [data-identifier='status-bar'] {
-      flex-grow: 0;
-      flex-shrink: 0;
-      border-top: 1px solid var(--slate-300);
-      background-color: var(--slate-100);
-      padding: 0.2rem 0.6rem;
-      display: flex;
-      align-items: center;
-      margin-top: auto;
-      height: var(--status-bar-height);
-
-      .pagination-controls {
-        margin-left: auto;
-        display: flex;
-        align-items: center;
-
-        :global(.refresh-button) {
-          margin-left: var(--size-xx-small);
-        }
-      }
-    }
-
     :global(button.column-name-wrapper) {
       flex: 1;
       padding: 6px 8px;

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultPane.svelte
diff --git a/mathesar_ui/src/systems/table-view/StatusPane.svelte b/mathesar_ui/src/systems/table-view/StatusPane.svelte
@@ -107,7 +107,7 @@
 
 <style lang="scss">
   .status-pane {
-    padding: 0.5rem;
+    padding: var(--status-bar-padding);
     display: flex;
     align-items: center;
     justify-content: space-between;