From eb585c8939f17aec06aab6401e475767aa4efb6a Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Tue, 31 Oct 2023 18:45:29 -0400 Subject: [PATCH 01/14] feat: DIA-601: [FE] User understands that similarity search sometimes automatically filters results --- package.json | 4 +- .../Filters/FilterLine/FilterLine.js | 4 +- src/components/Filters/Filters.js | 45 +++++++++---------- src/components/Filters/Filters.styl | 18 ++++++-- yarn.lock | 15 ++----- 5 files changed, 45 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index dd037d3a..0964adf9 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "start": "node dev-server.js", "test": "echo \"Error: no test specified\" && exit 0", "lint": "yarn run eslint ./src" - }, + }, "author": "Heartex, Inc.", "license": "ISC", "devDependencies": { @@ -80,7 +80,7 @@ "react-dom": "^17.0.2", "react-hot-loader": "^4.12.20", "react-hotkeys-hook": "^2.4.0", - "react-icons": "^3.11.0", + "react-icons": "^4.11.0", "react-virtualized-auto-sizer": "^1.0.2", "react-window": "^1.8.6", "react-window-infinite-loader": "^1.0.5", diff --git a/src/components/Filters/FilterLine/FilterLine.js b/src/components/Filters/FilterLine/FilterLine.js index 7a3e49ff..562191d5 100644 --- a/src/components/Filters/FilterLine/FilterLine.js +++ b/src/components/Filters/FilterLine/FilterLine.js @@ -1,6 +1,6 @@ import { observer } from "mobx-react"; import React, { Fragment } from "react"; -import { FaTrash } from "react-icons/fa"; +import { LiaTimesSolid } from "react-icons/lia"; import { BemWithSpecifiContext } from "../../../utils/bem"; import { Button } from "../../Common/Button/Button"; import { Icon } from "../../Common/Icon/Icon"; @@ -90,7 +90,7 @@ export const FilterLine = observer(({ e.stopPropagation(); filter.delete(); }} - icon={} + icon={} /> diff --git a/src/components/Filters/Filters.js b/src/components/Filters/Filters.js index a98a72d6..6308b222 100644 --- a/src/components/Filters/Filters.js +++ b/src/components/Filters/Filters.js @@ -1,6 +1,6 @@ import { inject } from "mobx-react"; import React from "react"; -import { FaCaretSquareRight, FaPlus } from "react-icons/fa"; +import { BsPin } from "react-icons/bs"; import { Block, cn, Elem } from "../../utils/bem"; import { Button } from "../Common/Button/Button"; import { Icon } from "../Common/Icon/Icon"; @@ -51,32 +51,13 @@ export const Filters = injector(({ views, currentView, filters }) => { return ( - - {filters.length ? ( - filters.map((filter, i) => ( - - )) - ) : ( - No filters applied - )} - {!sidebarEnabled ? ( @@ -86,12 +67,30 @@ export const Filters = injector(({ views, currentView, filters }) => { size="small" about="Pin to sidebar" onClick={() => views.expandFilters()} - style={{ display: "inline-flex", alignItems: "center" }} - icon={} + style={{ display: "inline-flex", alignItems: "center", border: "none" }} + icon={} /> ) : null} + + {filters.length ? ( + filters.map((filter, i) => ( + + )) + ) : ( + No filters applied + )} + ); }); diff --git a/src/components/Filters/Filters.styl b/src/components/Filters/Filters.styl index 7255e8be..6eedb234 100644 --- a/src/components/Filters/Filters.styl +++ b/src/components/Filters/Filters.styl @@ -1,6 +1,8 @@ .filters background-color white position relative + padding-top 15px + min-width 625px &:not(&_sidebar) padding-top 10px @@ -37,8 +39,7 @@ &__actions display flex - margin-top 10px - padding 0 10px 10px + padding 0 16px 16px justify-content space-between &__empty @@ -47,7 +48,7 @@ color #585858 &__list - padding 0 10px + padding 0 10px 15px &_withFilters display grid @@ -61,6 +62,17 @@ grid-auto-flow row align-items center + .button + --button-color rgba(9, 109, 217, 1) + box-shadow none + border 1px solid rgba(9, 109, 217, 0.16) + height 32px + font-size 16px + font-style normal + font-weight 500 + line-height 24px + letter-spacing 0.15px + padding 8px 16px .filter-data-tag margin 1px font-size 12px diff --git a/yarn.lock b/yarn.lock index cf2b3593..0073b315 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3282,11 +3282,6 @@ camel-case@^4.1.2: pascal-case "^3.1.2" tslib "^2.0.3" -camelcase@^5.0.0: - version "5.3.1" - resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz" - integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== - camelcase@^6.2.0: version "6.3.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a" @@ -6731,12 +6726,10 @@ react-hotkeys-hook@^2.4.0: dependencies: hotkeys-js "3.8.1" -react-icons@^3.11.0: - version "3.11.0" - resolved "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz" - integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q== - dependencies: - camelcase "^5.0.0" +react-icons@^4.11.0: + version "4.11.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65" + integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA== react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" From 9d8719726e1f83348aa0e440f11e6eee621cc954 Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Wed, 1 Nov 2023 12:17:28 -0400 Subject: [PATCH 02/14] visual updates --- src/components/DataManager/DataManager.styl | 2 +- src/components/Filters/Filters.styl | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/DataManager/DataManager.styl b/src/components/DataManager/DataManager.styl index f43f69b2..d0b79ae2 100644 --- a/src/components/DataManager/DataManager.styl +++ b/src/components/DataManager/DataManager.styl @@ -9,4 +9,4 @@ width 100% &_shrink - width calc(100% - 350px) + width calc(100% - 420px) diff --git a/src/components/Filters/Filters.styl b/src/components/Filters/Filters.styl index 6eedb234..84392ab1 100644 --- a/src/components/Filters/Filters.styl +++ b/src/components/Filters/Filters.styl @@ -2,11 +2,10 @@ background-color white position relative padding-top 15px - min-width 625px &:not(&_sidebar) padding-top 10px - min-width: 400px; + min-width 625px border-radius: 2px; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); @@ -73,6 +72,17 @@ line-height 24px letter-spacing 0.15px padding 8px 16px + &_withIcon + padding 0 + .icon + svg + width 18px + height 18px + + &__list + .button + border 0 none + --button-color rgba(137, 128, 152, 1) .filter-data-tag margin 1px font-size 12px From 2688659d2b0bd7737405dbb6077753042dc30f82 Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Thu, 2 Nov 2023 07:58:54 -0400 Subject: [PATCH 03/14] adding semantic search time and column now appears --- src/stores/Tabs/store.js | 11 ++++++++++- src/stores/Tabs/tab_column.js | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/stores/Tabs/store.js b/src/stores/Tabs/store.js index a9eb4890..0351d0e0 100644 --- a/src/stores/Tabs/store.js +++ b/src/stores/Tabs/store.js @@ -98,7 +98,7 @@ export const TabStore = types get columns() { const cols = self.columnsTargetMap ?? new Map(); - return cols.get(self.selected?.target ?? "tasks") ?? []; + return (cols.get(self.selected?.target ?? "tasks") ?? []).filter(col => col.type !== "SemanticSearch"); }, get dataStore() { @@ -451,6 +451,15 @@ export const TabStore = types }); }); + if (getRoot(self).SDK.type === "DE") { + self.availableFilters.push({ + id: "filter:tasks:distance", + type: "SemanticSearch", + field: "tasks:distance", + schema: null, + }); + } + self.defaultHidden = TabHiddenColumns.create(hiddenColumns); }, diff --git a/src/stores/Tabs/tab_column.js b/src/stores/Tabs/tab_column.js index 3c00494e..25e75bde 100644 --- a/src/stores/Tabs/tab_column.js +++ b/src/stores/Tabs/tab_column.js @@ -20,6 +20,7 @@ export const ViewColumnType = types.enumeration([ "HyperText", "TimeSeries", "Unknown", + "SemanticSearch", ]); export const ViewColumnTypeShort = (type) => { From 8aa452e4e98dc00b04957eb7d2752f7da7813fd1 Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Thu, 2 Nov 2023 14:50:29 -0400 Subject: [PATCH 04/14] working on adding support for customColumns --- .../Filters/FilterLine/FilterLine.js | 25 ++++++++++++++----- src/components/Filters/Filters.styl | 1 + src/sdk/dm-sdk.js | 3 ++- src/stores/AppStore.js | 2 ++ src/stores/Tabs/store.js | 11 +------- src/stores/Tabs/tab_column.js | 1 - src/stores/Tabs/tab_filter.js | 2 +- 7 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/components/Filters/FilterLine/FilterLine.js b/src/components/Filters/FilterLine/FilterLine.js index 562191d5..f6ea89cf 100644 --- a/src/components/Filters/FilterLine/FilterLine.js +++ b/src/components/Filters/FilterLine/FilterLine.js @@ -8,6 +8,7 @@ import { Tag } from "../../Common/Tag/Tag"; import { FilterDropdown } from "../FilterDropdown"; import "./FilterLine.styl"; import { FilterOperation } from "./FilterOperation"; +import { getRoot } from "mobx-state-tree"; const { Block, Elem } = BemWithSpecifiContext(); @@ -38,6 +39,8 @@ export const FilterLine = observer(({ sidebar, dropdownClassName, }) => { + const CustomFilterLine = getRoot(view).SDK?.customColumns[filter.field.alias]; + return ( @@ -76,12 +79,22 @@ export const FilterLine = observer(({ - + {CustomFilterLine ? ( + + ) : ( + + )}