Merge pull request #20 from platforma-open/fix-filters-table-header-s…

…tyle Fix filters table header style
platforma-open · Nov 25, 2024 · 239ad0d · 239ad0d
2 parents 3872818 + 1769fee
commit 239ad0d
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 97 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @platforma-open/milaboratories.clonotype-browser
 
+## 1.3.8
+
+### Patch Changes
+
+- b4079f6: updated package and fixed filter button status
+- Updated dependencies [b4079f6]
+  - @platforma-open/milaboratories.clonotype-browser.ui@1.3.8
+
 ## 1.3.7
 
 ### Patch Changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platforma-open/milaboratories.clonotype-browser",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "scripts": {
     "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json,vue}\"",
     "build": "rm -rf ./block-pack && block-tools pack",
@@ -52,4 +52,4 @@
     }
   },
   "pnpm": {}
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @platforma-open/milaboratories.clonotype-browser.ui
 
+## 1.3.8
+
+### Patch Changes
+
+- b4079f6: updated package and fixed filter button status
+
 ## 1.3.7
 
 ### Patch Changes

diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platforma-open/milaboratories.clonotype-browser.ui",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "type": "module",
   "files": [
     "dist/**/*"

diff --git a/ui/src/BrowserPage.vue b/ui/src/BrowserPage.vue
@@ -31,18 +31,22 @@ import * as lodash from 'lodash';
 
 const app = useApp();
 
-const uiState = app.createUiModel<UiState>(undefined, () => ({
-  settingsOpen: true,
-  filtersOpen: false,
-  filterModel: {},
-  tableState: {
-    gridState: {},
-    pTableParams: {
-      sorting: [],
-      filters: []
-    }
-  }
-} satisfies UiState));
+const uiState = app.createUiModel<UiState>(
+  undefined,
+  () =>
+    ({
+      settingsOpen: true,
+      filtersOpen: false,
+      filterModel: {},
+      tableState: {
+        gridState: {},
+        pTableParams: {
+          sorting: [],
+          filters: []
+        }
+      }
+    } satisfies UiState)
+);
 
 (() => {
   if (app.model.ui.filtersOpen === undefined) app.model.ui.filtersOpen = false;
@@ -93,10 +97,10 @@ const join = computedAsync(async () => {
     type: 'full',
     entries: clonotypeColumns.map(
       (column) =>
-      ({
-        type: 'column',
-        column
-      } satisfies ColumnJoinEntry<PColumnIdAndSpec>)
+        ({
+          type: 'column',
+          column
+        } satisfies ColumnJoinEntry<PColumnIdAndSpec>)
     )
   } satisfies FullJoin<PColumnIdAndSpec>;
 });
@@ -117,12 +121,10 @@ const sheetAxes = computed(() => {
   const columns = getColumnsFromJoin(joinValue);
   const axes = getAxesId(columns[0].spec.axesSpec).map(lodash.cloneDeep);
 
-  const ret = [
-    axes.find((axis) => axis.name === 'pl7.app/sampleId')!
-  ] satisfies AxesId;
+  const ret = [axes.find((axis) => axis.name === 'pl7.app/sampleId')!] satisfies AxesId;
 
-  const chainAxis = axes.find((axis) => axis.name === 'pl7.app/vdj/chain')
-  if (chainAxis) ret.push(chainAxis)
+  const chainAxis = axes.find((axis) => axis.name === 'pl7.app/vdj/chain');
+  if (chainAxis) ret.push(chainAxis);
 
   return ret;
 });
@@ -137,36 +139,49 @@ const tableState = computed({
 });
 const tableSettings = computed(
   () =>
-  ({
-    sourceType: 'pframe',
-    pFrame: app.model.outputs.pFrame,
-    join: join.value,
-    sheetAxes: sheetAxes.value,
-    pTable: app.model.outputs.pTable,
-  } satisfies PlDataTableSettings)
+    ({
+      sourceType: 'pframe',
+      pFrame: app.model.outputs.pFrame,
+      join: join.value,
+      sheetAxes: sheetAxes.value,
+      pTable: app.model.outputs.pTable
+    } satisfies PlDataTableSettings)
 );
 const columns = ref<PTableColumnSpec[]>([]);
+
+const hasFilters = computed(
+  () => columns.value.length > 0 && (app.model.ui.filterModel.filters ?? []).length > 0
+);
+const filterIconName = computed(() => (hasFilters.value ? 'filter-on' : 'filter'));
+
+const filterIconColor = computed(() =>
+  hasFilters.value ? { backgroundColor: 'var(--border-color-focus)' } : undefined
+);
 </script>
 
 <template>
   <PlBlockPage>
     <template #title>Clonotype Browser</template>
     <template #append>
-      <PlBtnGhost @click.stop="() => uiState.model.filtersOpen = true">
+      <PlBtnGhost @click.stop="() => (uiState.model.filtersOpen = true)">
         Filters
         <template #append>
-          <PlMaskIcon24 :name="columns.length > 0 && (app.model.ui.filterModel.filters ?? []).length > 0 ? 'filter-on' : 'filter'"/>
+          <PlMaskIcon24 :name="filterIconName" :style="filterIconColor" />
         </template>
       </PlBtnGhost>
-      <PlBtnGhost @click.stop="() => uiState.model.settingsOpen = true">
+      <PlBtnGhost @click.stop="() => (uiState.model.settingsOpen = true)">
         Settings
         <template #append>
           <PlMaskIcon24 name="settings" />
         </template>
       </PlBtnGhost>
     </template>
     <div style="flex: 1">
-      <PlAgDataTable v-model="tableState" :settings="tableSettings" @columns-changed="(newColumns) => columns = newColumns" />
+      <PlAgDataTable
+        v-model="tableState"
+        :settings="tableSettings"
+        @columns-changed="(newColumns) => (columns = newColumns)"
+      />
     </div>
   </PlBlockPage>
   <PlSlideModal v-model="uiState.model.filtersOpen" :close-on-outside-click="true">