mirror of
https://github.com/infinilabs/coco-app.git
synced 2025-12-20 05:19:23 +01:00
Compare commits
45 Commits
v0.10.0
...
add-search
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6ab93407ed | ||
|
|
a488b0b465 | ||
|
|
5fdbc7cd31 | ||
|
|
6d00efc7e8 | ||
|
|
798bd923c6 | ||
|
|
56234526a8 | ||
|
|
5fe4032209 | ||
|
|
8d0d719964 | ||
|
|
d056271848 | ||
|
|
b11fec29dc | ||
|
|
97369963a6 | ||
|
|
f3fa91a03c | ||
|
|
0e6d7fa52f | ||
|
|
209438a638 | ||
|
|
4ada34ad75 | ||
|
|
52f6f73d53 | ||
|
|
aa779ec156 | ||
|
|
93da46662c | ||
|
|
fbbc5f1d6a | ||
|
|
e89cca1c2f | ||
|
|
5e103bfc3d | ||
|
|
78ec0836a1 | ||
|
|
c698b4094b | ||
|
|
2235bd1da1 | ||
|
|
8a2898b0b9 | ||
|
|
53f6b33279 | ||
|
|
b20cc771ea | ||
|
|
a339dbab9c | ||
|
|
1bb2d8b3b3 | ||
|
|
1ceb385505 | ||
|
|
371f8d0daa | ||
|
|
28cf5ca326 | ||
|
|
ed10be5c6f | ||
|
|
0bcb974837 | ||
|
|
4c4c08a598 | ||
|
|
724db0f66d | ||
|
|
a8a14cae18 | ||
|
|
eea6a7a5ae | ||
|
|
fdc8967b76 | ||
|
|
5df1f9668d | ||
|
|
23607e6b4c | ||
|
|
494be3db62 | ||
|
|
530502ecff | ||
|
|
8d6204a9d8 | ||
|
|
ca350dfeed |
@@ -51,17 +51,19 @@
|
||||
"axios": "^1.12.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"dotenv": "^16.5.0",
|
||||
"filesize": "^10.1.6",
|
||||
"i18next": "^23.16.8",
|
||||
"i18next-browser-languagedetector": "^8.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"lucide-react": "^0.461.0",
|
||||
"lucide-react": "^0.561.0",
|
||||
"mdast-util-gfm-autolink-literal": "2.0.0",
|
||||
"mermaid": "^11.6.0",
|
||||
"nanoid": "^5.1.5",
|
||||
"react": "^18.3.1",
|
||||
"react-day-picker": "^9.13.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hotkeys-hook": "^4.6.2",
|
||||
"react-i18next": "^15.5.1",
|
||||
|
||||
52
pnpm-lock.yaml
generated
52
pnpm-lock.yaml
generated
@@ -10,7 +10,7 @@ importers:
|
||||
dependencies:
|
||||
'@infinilabs/custom-icons':
|
||||
specifier: 0.0.4
|
||||
version: 0.0.4(lucide-react@0.461.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
version: 0.0.4(lucide-react@0.561.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-checkbox':
|
||||
specifier: ^1.1.5
|
||||
version: 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
@@ -104,6 +104,9 @@ importers:
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
date-fns:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.18
|
||||
@@ -123,8 +126,8 @@ importers:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
lucide-react:
|
||||
specifier: ^0.461.0
|
||||
version: 0.461.0(react@18.3.1)
|
||||
specifier: ^0.561.0
|
||||
version: 0.561.0(react@18.3.1)
|
||||
mdast-util-gfm-autolink-literal:
|
||||
specifier: 2.0.0
|
||||
version: 2.0.0
|
||||
@@ -137,6 +140,9 @@ importers:
|
||||
react:
|
||||
specifier: ^18.3.1
|
||||
version: 18.3.1
|
||||
react-day-picker:
|
||||
specifier: ^9.13.0
|
||||
version: 9.13.0(react@18.3.1)
|
||||
react-dom:
|
||||
specifier: ^18.3.1
|
||||
version: 18.3.1(react@18.3.1)
|
||||
@@ -408,6 +414,9 @@ packages:
|
||||
'@chevrotain/utils@11.0.3':
|
||||
resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
|
||||
|
||||
'@date-fns/tz@1.4.1':
|
||||
resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
|
||||
|
||||
'@esbuild/aix-ppc64@0.21.5':
|
||||
resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -2469,6 +2478,12 @@ packages:
|
||||
resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
|
||||
engines: {node: '>= 14'}
|
||||
|
||||
date-fns-jalali@4.1.0-0:
|
||||
resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
|
||||
|
||||
date-fns@4.1.0:
|
||||
resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
|
||||
|
||||
dayjs@1.11.18:
|
||||
resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
|
||||
|
||||
@@ -3246,10 +3261,10 @@ packages:
|
||||
resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
lucide-react@0.461.0:
|
||||
resolution: {integrity: sha512-Scpw3D/dV1bgVRC5Kh774RCm99z0iZpPv75M6kg7QL1lLvkQ1rmI1Sjjic1aGp1ULBwd7FokV6ry0g+d6pMB+w==}
|
||||
lucide-react@0.561.0:
|
||||
resolution: {integrity: sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==}
|
||||
peerDependencies:
|
||||
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
|
||||
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
macos-release@3.3.0:
|
||||
resolution: {integrity: sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ==}
|
||||
@@ -3700,6 +3715,12 @@ packages:
|
||||
resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
|
||||
hasBin: true
|
||||
|
||||
react-day-picker@9.13.0:
|
||||
resolution: {integrity: sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ==}
|
||||
engines: {node: '>=18'}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
react-dom@18.3.1:
|
||||
resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
|
||||
peerDependencies:
|
||||
@@ -4574,6 +4595,8 @@ snapshots:
|
||||
|
||||
'@chevrotain/utils@11.0.3': {}
|
||||
|
||||
'@date-fns/tz@1.4.1': {}
|
||||
|
||||
'@esbuild/aix-ppc64@0.21.5':
|
||||
optional: true
|
||||
|
||||
@@ -4752,9 +4775,9 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@infinilabs/custom-icons@0.0.4(lucide-react@0.461.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
'@infinilabs/custom-icons@0.0.4(lucide-react@0.561.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
lucide-react: 0.461.0(react@18.3.1)
|
||||
lucide-react: 0.561.0(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
@@ -6477,6 +6500,10 @@ snapshots:
|
||||
|
||||
data-uri-to-buffer@6.0.2: {}
|
||||
|
||||
date-fns-jalali@4.1.0-0: {}
|
||||
|
||||
date-fns@4.1.0: {}
|
||||
|
||||
dayjs@1.11.18: {}
|
||||
|
||||
debug@4.4.0:
|
||||
@@ -7261,7 +7288,7 @@ snapshots:
|
||||
|
||||
lru-cache@7.18.3: {}
|
||||
|
||||
lucide-react@0.461.0(react@18.3.1):
|
||||
lucide-react@0.561.0(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
@@ -7961,6 +7988,13 @@ snapshots:
|
||||
minimist: 1.2.8
|
||||
strip-json-comments: 2.0.1
|
||||
|
||||
react-day-picker@9.13.0(react@18.3.1):
|
||||
dependencies:
|
||||
'@date-fns/tz': 1.4.1
|
||||
date-fns: 4.1.0
|
||||
date-fns-jalali: 4.1.0-0
|
||||
react: 18.3.1
|
||||
|
||||
react-dom@18.3.1(react@18.3.1):
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
use crate::common::document::Document;
|
||||
use crate::common::http::get_response_body_text;
|
||||
use reqwest::Response;
|
||||
use serde::de::Deserializer;
|
||||
use serde::{Deserialize, Serialize};
|
||||
use std::collections::HashMap;
|
||||
use std::error::Error;
|
||||
@@ -11,6 +12,7 @@ pub struct SearchResponse<T> {
|
||||
pub timed_out: Option<bool>,
|
||||
pub _shards: Option<Shards>,
|
||||
pub hits: Hits<T>,
|
||||
pub aggregations: Option<Aggregations>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize)]
|
||||
@@ -122,11 +124,162 @@ pub struct FailedRequest {
|
||||
pub reason: Option<String>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Deserialize, Serialize, Clone)]
|
||||
pub struct Aggregation {
|
||||
// Frontend code needs to this to not be NULL, so we `clean_aggregations()`
|
||||
// in query_coco_fusion() to ensure this.
|
||||
pub buckets: Option<Vec<AggBucket>>,
|
||||
}
|
||||
|
||||
/// A bucket's fields contain more than just "doc_count" and "key", but we only
|
||||
/// need them. Serde can deserialize this as we don't `deny_unknown_fields`.
|
||||
#[derive(Debug, Serialize, Clone)]
|
||||
pub struct AggBucket {
|
||||
doc_count: usize,
|
||||
key: String,
|
||||
/// Optional human label extracted from `top.hits.hits[0]._source.source.name`.
|
||||
label: Option<String>,
|
||||
}
|
||||
|
||||
impl<'de> Deserialize<'de> for AggBucket {
|
||||
fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
|
||||
where
|
||||
D: Deserializer<'de>,
|
||||
{
|
||||
#[derive(Deserialize)]
|
||||
struct Wrapper {
|
||||
doc_count: usize,
|
||||
key: String,
|
||||
#[serde(default)]
|
||||
top: Option<Top>,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct Top {
|
||||
hits: TopHits,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct TopHits {
|
||||
hits: Vec<TopHit>,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct TopHit {
|
||||
#[serde(default)]
|
||||
_source: Option<TopSource>,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct TopSource {
|
||||
#[serde(default)]
|
||||
source: Option<SourceLabel>,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct SourceLabel {
|
||||
#[serde(default)]
|
||||
name: Option<String>,
|
||||
}
|
||||
|
||||
let wrapper = Wrapper::deserialize(deserializer)?;
|
||||
|
||||
let label = wrapper
|
||||
.top
|
||||
.and_then(|top| top.hits.hits.into_iter().next())
|
||||
.and_then(|hit| hit._source)
|
||||
.and_then(|src| src.source)
|
||||
.and_then(|lbl| lbl.name);
|
||||
|
||||
Ok(AggBucket {
|
||||
doc_count: wrapper.doc_count,
|
||||
key: wrapper.key,
|
||||
label,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/// Coco server aggregation result.
|
||||
///
|
||||
/// ```json
|
||||
/// {
|
||||
/// "type": {
|
||||
/// "buckets": [
|
||||
/// {
|
||||
/// "doc_count": 26,
|
||||
/// "key": "web_page"
|
||||
/// },
|
||||
/// {
|
||||
/// "doc_count": 1,
|
||||
/// "key": "pdf"
|
||||
/// }
|
||||
/// ]
|
||||
/// },
|
||||
/// "lang": {
|
||||
/// "buckets": [
|
||||
/// {
|
||||
/// "doc_count": 30,
|
||||
/// "key": "en"
|
||||
/// }
|
||||
/// ]
|
||||
/// }
|
||||
/// }
|
||||
/// ```
|
||||
pub type Aggregations = HashMap<String, Aggregation>;
|
||||
|
||||
/// Merge the buckets in `from` to `to`.
|
||||
pub(crate) fn merge_aggregations(to: &mut Option<Aggregations>, from: Aggregations) {
|
||||
use std::collections::hash_map::Entry;
|
||||
|
||||
if from.is_empty() {
|
||||
return;
|
||||
}
|
||||
|
||||
match to {
|
||||
None => {
|
||||
*to = Some(from);
|
||||
}
|
||||
Some(to_map) => {
|
||||
for (agg_name, agg) in from {
|
||||
match to_map.entry(agg_name) {
|
||||
Entry::Occupied(mut occ) => {
|
||||
let to_agg = occ.get_mut();
|
||||
|
||||
if let Some(from_buckets) = agg.buckets {
|
||||
match &mut to_agg.buckets {
|
||||
Some(to_buckets) => {
|
||||
for bucket in from_buckets {
|
||||
if let Some(existing) = to_buckets
|
||||
.iter_mut()
|
||||
.find(|existing| existing.key == bucket.key)
|
||||
{
|
||||
existing.doc_count += bucket.doc_count;
|
||||
} else {
|
||||
to_buckets.push(bucket);
|
||||
}
|
||||
}
|
||||
}
|
||||
None => {
|
||||
to_agg.buckets = Some(from_buckets);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Entry::Vacant(vacant) => {
|
||||
vacant.insert(agg);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, Serialize)]
|
||||
pub struct QueryResponse {
|
||||
pub source: QuerySource,
|
||||
pub hits: Vec<(Document, f64)>,
|
||||
pub total_hits: usize,
|
||||
pub aggregations: Option<Aggregations>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, Serialize)]
|
||||
@@ -134,4 +287,121 @@ pub struct MultiSourceQueryResponse {
|
||||
pub failed: Vec<FailedRequest>,
|
||||
pub hits: Vec<QueryHits>,
|
||||
pub total_hits: usize,
|
||||
pub aggregations: Option<Aggregations>,
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
use serde_json;
|
||||
|
||||
/// Helper function to create an `AggBucket`, used in tests.
|
||||
fn bucket(key: &str, doc_count: usize) -> AggBucket {
|
||||
AggBucket {
|
||||
key: key.to_string(),
|
||||
doc_count,
|
||||
label: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Helper function to create an `Aggregation`, used in tests.
|
||||
fn agg_with_buckets(buckets: Vec<AggBucket>) -> Aggregation {
|
||||
Aggregation {
|
||||
buckets: Some(buckets),
|
||||
}
|
||||
}
|
||||
|
||||
/// Helper to get `doc_count` from the bucket specified by `key`.
|
||||
/// Returns `None` when buckets are absent or the key is missing.
|
||||
fn get_doc_count(agg: &Aggregation, key: &str) -> Option<usize> {
|
||||
agg.buckets
|
||||
.as_ref()
|
||||
.and_then(|buckets| buckets.iter().find(|b| b.key == key))
|
||||
.map(|b| b.doc_count)
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn merge_into_none_initializes() {
|
||||
let mut to: Option<Aggregations> = None;
|
||||
let mut from = Aggregations::new();
|
||||
from.insert("terms".to_string(), agg_with_buckets(vec![bucket("a", 2)]));
|
||||
|
||||
merge_aggregations(&mut to, from);
|
||||
|
||||
let terms = to.unwrap().get("terms").cloned().unwrap();
|
||||
assert_eq!(get_doc_count(&terms, "a"), Some(2));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn merge_sums_and_appends_buckets() {
|
||||
let mut to_inner = Aggregations::new();
|
||||
to_inner.insert(
|
||||
"terms".to_string(),
|
||||
agg_with_buckets(vec![bucket("a", 1), bucket("b", 2)]),
|
||||
);
|
||||
let mut to = Some(to_inner);
|
||||
|
||||
let mut from = Aggregations::new();
|
||||
from.insert(
|
||||
"terms".to_string(),
|
||||
agg_with_buckets(vec![bucket("a", 3), bucket("c", 5)]),
|
||||
);
|
||||
from.insert(
|
||||
"lang".to_string(),
|
||||
agg_with_buckets(vec![bucket("zh", 3), bucket("en", 5)]),
|
||||
);
|
||||
|
||||
merge_aggregations(&mut to, from);
|
||||
|
||||
let terms = to.as_ref().unwrap().get("terms").unwrap();
|
||||
assert_eq!(get_doc_count(terms, "a"), Some(4));
|
||||
assert_eq!(get_doc_count(terms, "b"), Some(2));
|
||||
assert_eq!(get_doc_count(terms, "c"), Some(5));
|
||||
let lang = to.as_ref().unwrap().get("lang").unwrap();
|
||||
assert_eq!(get_doc_count(lang, "zh"), Some(3));
|
||||
assert_eq!(get_doc_count(lang, "en"), Some(5));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn deserialize_bucket_with_label() {
|
||||
let json = r#"
|
||||
{
|
||||
"doc_count": 251,
|
||||
"key": "d23ek9gqlqbcd9e3uiig",
|
||||
"top": {
|
||||
"hits": {
|
||||
"hits": [
|
||||
{
|
||||
"_source": {
|
||||
"source": {
|
||||
"name": "INFINI Easysearch"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
"#;
|
||||
|
||||
let bucket: AggBucket = serde_json::from_str(json).unwrap();
|
||||
assert_eq!(bucket.doc_count, 251);
|
||||
assert_eq!(bucket.key, "d23ek9gqlqbcd9e3uiig");
|
||||
assert_eq!(bucket.label.as_deref(), Some("INFINI Easysearch"));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn deserialize_bucket_without_top_sets_label_none() {
|
||||
let json = r#"
|
||||
{
|
||||
"doc_count": 10,
|
||||
"key": "no-top"
|
||||
}
|
||||
"#;
|
||||
|
||||
let bucket: AggBucket = serde_json::from_str(json).unwrap();
|
||||
assert_eq!(bucket.doc_count, 10);
|
||||
assert_eq!(bucket.key, "no-top");
|
||||
assert_eq!(bucket.label, None);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -654,6 +654,8 @@ impl SearchSource for ApplicationSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -689,6 +691,8 @@ impl SearchSource for ApplicationSearchSource {
|
||||
source,
|
||||
hits,
|
||||
total_hits,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,6 +39,8 @@ impl SearchSource for ApplicationSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,6 +131,8 @@ impl SearchSource for CalculatorSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -143,6 +145,8 @@ impl SearchSource for CalculatorSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -156,6 +160,8 @@ impl SearchSource for CalculatorSource {
|
||||
source: query_source,
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
};
|
||||
};
|
||||
// If it is only a number, no need to evaluate it as the result is
|
||||
@@ -167,6 +173,8 @@ impl SearchSource for CalculatorSource {
|
||||
source: query_source,
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -199,12 +207,16 @@ impl SearchSource for CalculatorSource {
|
||||
source: query_source,
|
||||
hits: vec![(doc, base_score)],
|
||||
total_hits: 1,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
}
|
||||
}
|
||||
Err(_) => QueryResponse {
|
||||
source: query_source,
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@@ -51,6 +51,8 @@ impl SearchSource for FileSearchExtensionSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
});
|
||||
};
|
||||
let from = usize::try_from(query.from).expect("from too big");
|
||||
@@ -62,6 +64,8 @@ impl SearchSource for FileSearchExtensionSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -77,6 +81,8 @@ impl SearchSource for FileSearchExtensionSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -92,6 +98,8 @@ impl SearchSource for FileSearchExtensionSearchSource {
|
||||
source: query_source,
|
||||
hits,
|
||||
total_hits,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,6 +38,8 @@ impl SearchSource for WindowManagementSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregation
|
||||
aggregations: None,
|
||||
});
|
||||
};
|
||||
let from = usize::try_from(query.from).expect("from too big");
|
||||
@@ -49,6 +51,8 @@ impl SearchSource for WindowManagementSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregation
|
||||
aggregations: None,
|
||||
});
|
||||
}
|
||||
let query_string_lowercase = query_string.to_lowercase();
|
||||
@@ -133,6 +137,8 @@ impl SearchSource for WindowManagementSearchSource {
|
||||
source: self.get_type(),
|
||||
hits: from_size_applied,
|
||||
total_hits,
|
||||
// Local search source does not support aggregation
|
||||
aggregations: None,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,6 +69,8 @@ impl SearchSource for ExtensionStore {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -94,12 +96,16 @@ impl SearchSource for ExtensionStore {
|
||||
source: self.get_type(),
|
||||
hits: vec![(doc, SCORE)],
|
||||
total_hits: 1,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
})
|
||||
} else {
|
||||
Ok(QueryResponse {
|
||||
source: self.get_type(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
2
src-tauri/src/extension/third_party/mod.rs
vendored
2
src-tauri/src/extension/third_party/mod.rs
vendored
@@ -1110,6 +1110,8 @@ impl SearchSource for ThirdPartyExtensionsSearchSource {
|
||||
source: self.get_type(),
|
||||
hits,
|
||||
total_hits,
|
||||
// Local search source does not support aggregations
|
||||
aggregations: None,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
use crate::common::error::{ReportErrorStyle, SearchError, report_error};
|
||||
use crate::common::register::SearchSourceRegistry;
|
||||
use crate::common::search::{
|
||||
FailedRequest, MultiSourceQueryResponse, QueryHits, QuerySource, SearchQuery,
|
||||
Aggregations, FailedRequest, MultiSourceQueryResponse, QueryHits, QuerySource, SearchQuery,
|
||||
merge_aggregations,
|
||||
};
|
||||
use crate::common::traits::SearchSource;
|
||||
use crate::extension::LOCAL_QUERY_SOURCE_TYPE;
|
||||
@@ -18,6 +19,20 @@ use std::sync::Arc;
|
||||
use tauri::{AppHandle, Manager};
|
||||
use tokio::time::{Duration, timeout};
|
||||
|
||||
/// Helper function to drop empty aggregations and normalize `Option` state.
|
||||
fn clean_aggregations(aggs: &mut Option<Aggregations>) {
|
||||
if let Some(map) = aggs {
|
||||
map.retain(|_, agg| match &agg.buckets {
|
||||
Some(buckets) => !buckets.is_empty(),
|
||||
None => false,
|
||||
});
|
||||
|
||||
if map.is_empty() {
|
||||
*aggs = None;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Available `query_strings`:
|
||||
///
|
||||
/// * "querysource": the query/search source to search
|
||||
@@ -40,6 +55,8 @@ pub async fn query_coco_fusion(
|
||||
query_strings: HashMap<String, String>,
|
||||
query_timeout: u64,
|
||||
) -> Result<MultiSourceQueryResponse, SearchError> {
|
||||
println!("DBG: querystrings {:?}", query_strings);
|
||||
|
||||
if query_strings.contains_key("datasource") && !query_strings.contains_key("querysource") {
|
||||
panic!("[querysource] has to be provided if [datasource] is set")
|
||||
}
|
||||
@@ -60,7 +77,7 @@ pub async fn query_coco_fusion(
|
||||
);
|
||||
|
||||
// Dispatch to different `query_coco_fusion_xxx()` functions.
|
||||
if let Some(query_source_id) = opt_query_source_id {
|
||||
let mut res_response = if let Some(query_source_id) = opt_query_source_id {
|
||||
query_coco_fusion_single_query_source(
|
||||
tauri_app_handle,
|
||||
query_source_list,
|
||||
@@ -77,7 +94,13 @@ pub async fn query_coco_fusion(
|
||||
search_query,
|
||||
)
|
||||
.await
|
||||
};
|
||||
|
||||
if let Ok(ref mut response) = res_response {
|
||||
clean_aggregations(&mut response.aggregations);
|
||||
}
|
||||
|
||||
res_response
|
||||
}
|
||||
|
||||
/// Query only 1 query source.
|
||||
@@ -121,6 +144,7 @@ async fn query_coco_fusion_single_query_source(
|
||||
failed: Vec::new(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
aggregations: None,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -132,6 +156,7 @@ async fn query_coco_fusion_single_query_source(
|
||||
let mut failed_requests: Vec<FailedRequest> = Vec::new();
|
||||
let mut hits = Vec::new();
|
||||
let mut total_hits = 0;
|
||||
let mut aggregations = None;
|
||||
|
||||
match timeout_result {
|
||||
// Ignore the `_timeout` variable as it won't provide any useful debugging information.
|
||||
@@ -144,6 +169,7 @@ async fn query_coco_fusion_single_query_source(
|
||||
Ok(query_result) => match query_result {
|
||||
Ok(response) => {
|
||||
total_hits = response.total_hits;
|
||||
aggregations = response.aggregations;
|
||||
|
||||
for (document, score) in response.hits {
|
||||
log::debug!(
|
||||
@@ -179,6 +205,7 @@ async fn query_coco_fusion_single_query_source(
|
||||
failed: failed_requests,
|
||||
hits,
|
||||
total_hits,
|
||||
aggregations,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -227,6 +254,7 @@ async fn query_coco_fusion_multi_query_sources(
|
||||
let mut total_hits = 0;
|
||||
let mut failed_requests = Vec::new();
|
||||
let mut all_hits_grouped_by_query_source: HashMap<QuerySource, Vec<QueryHits>> = HashMap::new();
|
||||
let mut aggregations = None;
|
||||
|
||||
while let Some((query_source, timeout_result)) = futures.next().await {
|
||||
match timeout_result {
|
||||
@@ -240,6 +268,9 @@ async fn query_coco_fusion_multi_query_sources(
|
||||
Ok(query_result) => match query_result {
|
||||
Ok(response) => {
|
||||
total_hits += response.total_hits;
|
||||
if let Some(from) = response.aggregations {
|
||||
merge_aggregations(&mut aggregations, from);
|
||||
}
|
||||
|
||||
for (document, score) in response.hits {
|
||||
log::debug!(
|
||||
@@ -282,6 +313,7 @@ async fn query_coco_fusion_multi_query_sources(
|
||||
failed: Vec::new(),
|
||||
hits: Vec::new(),
|
||||
total_hits: 0,
|
||||
aggregations: None,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -423,6 +455,7 @@ async fn query_coco_fusion_multi_query_sources(
|
||||
failed: failed_requests,
|
||||
hits: final_hits,
|
||||
total_hits,
|
||||
aggregations,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -75,6 +75,31 @@ pub struct CocoSearchSource {
|
||||
server: Server,
|
||||
}
|
||||
|
||||
/// Convert frontend query string key/value into coco server query param.
|
||||
/// Returns `None` when the key is not recognized.
|
||||
fn convert_query_string(key: &str, value: &str) -> Option<String> {
|
||||
match key {
|
||||
// existing single-value params
|
||||
"querysource" | "datasource" | "query" | "fuzziness" => Some(format!("{}={}", key, value)),
|
||||
|
||||
// time range filters (single value)
|
||||
"update_time_start" => Some(format!("filter=updated>={}", value)),
|
||||
"update_time_end" => Some(format!("filter=updated<={}", value)),
|
||||
"create_time_start" => Some(format!("filter=created>={}", value)),
|
||||
"create_time_end" => Some(format!("filter=created<={}", value)),
|
||||
|
||||
// multi-value filters (value string may already contain any(...))
|
||||
"type" => Some(format!("filter=type:{}", value)),
|
||||
"source.id" => Some(format!("filter=source.id:{}", value)),
|
||||
"category" => Some(format!("filter=category:{}", value)),
|
||||
"subcategory" => Some(format!("filter=subcategory:{}", value)),
|
||||
"lang" => Some(format!("filter=lang:{}", value)),
|
||||
"tag" => Some(format!("filter=tag:{}", value)),
|
||||
|
||||
_ => None,
|
||||
}
|
||||
}
|
||||
|
||||
impl CocoSearchSource {
|
||||
pub fn new(server: Server) -> Self {
|
||||
CocoSearchSource { server }
|
||||
@@ -99,6 +124,7 @@ impl SearchSource for CocoSearchSource {
|
||||
let url = "/query/_search";
|
||||
let mut total_hits = 0;
|
||||
let mut hits: Vec<(Document, f64)> = Vec::new();
|
||||
let mut aggregations = None;
|
||||
|
||||
let mut query_params = Vec::new();
|
||||
|
||||
@@ -108,12 +134,55 @@ impl SearchSource for CocoSearchSource {
|
||||
|
||||
// Add query strings
|
||||
for (key, value) in query.query_strings {
|
||||
query_params.push(format!("{}={}", key, value));
|
||||
if let Some(param) = convert_query_string(&key, &value) {
|
||||
query_params.push(param);
|
||||
}
|
||||
}
|
||||
println!("DBG: query params\n{:?}", query_params);
|
||||
|
||||
let response = HttpClient::get(&self.server.id, &url, Some(query_params))
|
||||
.await
|
||||
.context(HttpSnafu)?;
|
||||
let request_body = r#"
|
||||
{
|
||||
"aggs": {
|
||||
"category": {
|
||||
"terms": {
|
||||
"field": "category"
|
||||
}
|
||||
},
|
||||
"lang": {
|
||||
"terms": {
|
||||
"field": "lang"
|
||||
}
|
||||
},
|
||||
"source.id": {
|
||||
"terms": {
|
||||
"field": "source.id"
|
||||
},
|
||||
"aggs": {
|
||||
"top": {
|
||||
"top_hits": {
|
||||
"size": 1,
|
||||
"_source": [
|
||||
"source.name"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"type": {
|
||||
"terms": {
|
||||
"field": "type"
|
||||
}
|
||||
}
|
||||
}
|
||||
}"#;
|
||||
let response = HttpClient::post(
|
||||
&self.server.id,
|
||||
url,
|
||||
Some(query_params),
|
||||
Some(request_body.into()),
|
||||
)
|
||||
.await
|
||||
.context(HttpSnafu)?;
|
||||
let status_code = response.status();
|
||||
|
||||
if ![StatusCode::OK, StatusCode::CREATED].contains(&status_code) {
|
||||
@@ -156,6 +225,8 @@ impl SearchSource for CocoSearchSource {
|
||||
hits.push((document, score));
|
||||
}
|
||||
}
|
||||
|
||||
aggregations = parsed.aggregations;
|
||||
}
|
||||
|
||||
// Return the final result
|
||||
@@ -163,6 +234,7 @@ impl SearchSource for CocoSearchSource {
|
||||
source: self.get_type(),
|
||||
hits,
|
||||
total_hits,
|
||||
aggregations,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { User, LogOut } from "lucide-react";
|
||||
|
||||
import { UserProfile as UserInfo } from "@/types/server";
|
||||
import { useState } from "react";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
interface UserProfileProps {
|
||||
server: string; //server's id
|
||||
@@ -38,12 +39,14 @@ export function UserProfile({ server, userInfo, onLogout }: UserProfileProps) {
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{userInfo?.name || "-"}
|
||||
</span>
|
||||
<button
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleLogout}
|
||||
className="flex items-center p-1 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300 border border-[rgba(228,229,239,1)] dark:border-gray-700"
|
||||
className="size-7 text-red-500!"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
<LogOut className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{userInfo?.email || "-"}
|
||||
|
||||
@@ -5,6 +5,7 @@ import clsx from "clsx";
|
||||
import { useStreamChat } from "@/hooks/useStreamChat";
|
||||
import { useExtensionsStore } from "@/stores/extensionsStore";
|
||||
import { ChatMessage } from "../ChatMessage";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
interface AiSummaryProps {
|
||||
message: string;
|
||||
@@ -33,20 +34,22 @@ const AiOverview: FC<AiSummaryProps> = (props) => {
|
||||
<div className={clsx({ "p-2": visible })}>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col gap-2 relative max-h-[210px] px-4 py-3 rounded-[4px] text-[#333] dark:text-[#D8D8D8] bg-white dark:bg-[#141414] shadow-[0_4px_8px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_20px_rgba(255,255,255,0.2)]",
|
||||
"flex flex-col gap-2 relative max-h-[210px] px-4 py-3 rounded text-[#333] dark:text-[#D8D8D8] bg-white dark:bg-[#141414] shadow-[0_4px_8px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_20px_rgba(255,255,255,0.2)]",
|
||||
{
|
||||
hidden: !visible,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="absolute top-2 right-2 flex items-center justify-center size-[20px] border rounded-md cursor-pointer dark:border-[#282828]"
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="absolute top-2 right-2 size-5"
|
||||
onClick={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</div>
|
||||
<X className="size-3" />
|
||||
</Button>
|
||||
|
||||
<div className="flex item-center gap-1">
|
||||
<Sparkles className="size-4 text-[#881c94]" />
|
||||
@@ -77,7 +80,7 @@ const AiOverview: FC<AiSummaryProps> = (props) => {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={clsx("min-h-[20px]", {
|
||||
className={clsx("min-h-5", {
|
||||
hidden: isTyping,
|
||||
})}
|
||||
/>
|
||||
|
||||
@@ -332,7 +332,7 @@ const ExtensionStore = ({
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 overflow-hidden">
|
||||
<img src={icon} className="size-[20px]" />
|
||||
<img src={icon} className="size-5" />
|
||||
<span className="whitespace-nowrap">{name}</span>
|
||||
<span className="truncate text-[#999]">{description}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { Brain, Sparkles } from "lucide-react";
|
||||
import { Brain, RotateCcw, ScanSearch, Sparkles } from "lucide-react";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
@@ -12,11 +12,13 @@ import { useConnectStore } from "@/stores/connectStore";
|
||||
import VisibleKey from "@/components/Common/VisibleKey";
|
||||
import { useShortcutsStore } from "@/stores/shortcutsStore";
|
||||
import { useAppStore } from "@/stores/appStore";
|
||||
import { useSearchStore } from "@/stores/searchStore";
|
||||
import { DEFAULT_FUZZINESS, useSearchStore } from "@/stores/searchStore";
|
||||
import { useExtensionsStore } from "@/stores/extensionsStore";
|
||||
import { parseSearchQuery, SearchQuery } from "@/utils";
|
||||
import InputUpload from "./InputUpload";
|
||||
import Copyright from "../Common/Copyright";
|
||||
import TimeFilter from "./TimeFilter";
|
||||
import { Slider } from "../ui/slider";
|
||||
|
||||
interface InputControlsProps {
|
||||
isChatMode: boolean;
|
||||
@@ -161,7 +163,13 @@ const InputControls = ({
|
||||
return state.aiOverviewAssistant;
|
||||
});
|
||||
const aiOverviewShortcut = useShortcutsStore((state) => state.aiOverview);
|
||||
const { visibleExtensionStore } = useSearchStore();
|
||||
const {
|
||||
visibleExtensionStore,
|
||||
enabledFuzzyMatch,
|
||||
setEnabledFuzzyMatch,
|
||||
fuzziness,
|
||||
setFuzziness,
|
||||
} = useSearchStore();
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -242,7 +250,10 @@ const InputControls = ({
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div data-tauri-drag-region className="w-28 flex gap-2 relative">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="w-28 flex gap-2 items-center relative"
|
||||
>
|
||||
{!disabledExtensions.includes("AIOverview") &&
|
||||
isTauri &&
|
||||
aiOverviewServer &&
|
||||
@@ -274,12 +285,74 @@ const InputControls = ({
|
||||
</VisibleKey>
|
||||
|
||||
<span
|
||||
className={clsx("text-xs", { hidden: !enabledAiOverview })}
|
||||
className={clsx("text-xs truncate", {
|
||||
hidden: !enabledAiOverview,
|
||||
})}
|
||||
>
|
||||
AI Overview
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* app search filter */}
|
||||
{isTauri && (
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
"inline-flex items-center gap-1 h-5 px-1 rounded-full hover:text-[#881c94]! cursor-pointer transition",
|
||||
[
|
||||
enabledFuzzyMatch
|
||||
? "text-[#881c94]"
|
||||
: "text-[#333] dark:text-[#d8d8d8]",
|
||||
],
|
||||
{
|
||||
"bg-[#881C94]/20 dark:bg-[#202126]": enabledFuzzyMatch,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
setEnabledFuzzyMatch(!enabledFuzzyMatch);
|
||||
}}
|
||||
>
|
||||
<ScanSearch className="size-3" />
|
||||
|
||||
{enabledFuzzyMatch && (
|
||||
<>
|
||||
<span className={clsx("text-xs truncate")}>
|
||||
{t("search.fuzziness.fuzzyMatch")}
|
||||
</span>
|
||||
|
||||
<Slider
|
||||
value={[fuzziness]}
|
||||
max={5}
|
||||
className="w-20"
|
||||
classNames={{
|
||||
range: "bg-[#881C94]",
|
||||
thumb:
|
||||
"border-[#881C94] focus-visible:ring-0 focus-visible:ring-offset-0",
|
||||
}}
|
||||
onValueChange={(value) => {
|
||||
setFuzziness(value[0]);
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
|
||||
<RotateCcw
|
||||
className="size-3"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
setFuzziness(DEFAULT_FUZZINESS);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<TimeFilter />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
207
src/components/Search/TimeFilter.tsx
Normal file
207
src/components/Search/TimeFilter.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import { useState, Fragment, useMemo } from "react";
|
||||
import { ListFilter, ChevronRight, BrushCleaning } from "lucide-react";
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
|
||||
import { useSearchStore } from "@/stores/searchStore";
|
||||
import MultiSelect from "../ui/multi-select";
|
||||
import DatePickerRange from "../ui/date-picker-range";
|
||||
import { camelCase, upperFirst } from "lodash-es";
|
||||
import dayjs from "dayjs";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "../ui/button";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const TimeFilter = () => {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [popoverOpen, setPopoverOpen] = useState(false);
|
||||
const {
|
||||
filterDateRange,
|
||||
setFilterDateRange,
|
||||
aggregateFilter,
|
||||
setAggregateFilter,
|
||||
aggregations,
|
||||
} = useSearchStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const dropdownMenuItems = [
|
||||
{
|
||||
key: "all-time",
|
||||
label: t("search.filers.allTime"),
|
||||
value: void 0,
|
||||
},
|
||||
{
|
||||
key: "7-day",
|
||||
label: t("search.filers.past7Days"),
|
||||
value: {
|
||||
from: dayjs().subtract(7, "day").toDate(),
|
||||
to: dayjs().toDate(),
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "90-day",
|
||||
label: t("search.filers.past90Days"),
|
||||
value: {
|
||||
from: dayjs().subtract(90, "day").toDate(),
|
||||
to: dayjs().toDate(),
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "1-year",
|
||||
label: t("search.filers.past1year"),
|
||||
value: {
|
||||
from: dayjs().subtract(1, "year").toDate(),
|
||||
to: dayjs().toDate(),
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "more",
|
||||
label: t("search.filers.more"),
|
||||
onClick: () => {
|
||||
setPopoverOpen(true);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const filterCount = useMemo(() => {
|
||||
let count = 0;
|
||||
|
||||
if (filterDateRange) {
|
||||
count += 1;
|
||||
}
|
||||
|
||||
if (aggregateFilter) {
|
||||
for (const item of Object.values(aggregateFilter)) {
|
||||
if (item.length === 0) continue;
|
||||
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
|
||||
return count;
|
||||
}, [filterDateRange, aggregateFilter]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 h-5 px-1 text-xs rounded-full hover:text-[#881c94]! cursor-pointer transition",
|
||||
{
|
||||
"bg-[#881C94]/20 dark:bg-[#202126] text-[#881c94]":
|
||||
filterCount > 0,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<ListFilter className="size-3" />
|
||||
|
||||
{filterCount > 0 && (
|
||||
<>
|
||||
<div className="whitespace-nowrap">
|
||||
{t("search.filers.filters")}
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center justify-center size-4 rounded-full text-white bg-[#881c94]">
|
||||
{filterCount}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent>
|
||||
{dropdownMenuItems.map((item) => {
|
||||
const { key, label, value, onClick } = item;
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={key}
|
||||
className="flex justify-between"
|
||||
onClick={() => {
|
||||
if (onClick) {
|
||||
onClick();
|
||||
} else {
|
||||
setFilterDateRange(value);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span>{label}</span>
|
||||
|
||||
{key === "more" && (
|
||||
<ChevronRight className="size-4 text-muted-foreground" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<div />
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent className="w-100 p-4 text-sm">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-bold">{t("search.filers.filters")}</span>
|
||||
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="size-6"
|
||||
onClick={() => {
|
||||
setFilterDateRange(void 0);
|
||||
|
||||
setAggregateFilter(void 0);
|
||||
}}
|
||||
>
|
||||
<BrushCleaning className="size-3 text-[#6000FF]" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 pb-2 text-[#999]">
|
||||
{t("search.filers.dateRange")}
|
||||
</div>
|
||||
<DatePickerRange
|
||||
selected={filterDateRange}
|
||||
onSelect={setFilterDateRange}
|
||||
/>
|
||||
|
||||
{aggregations &&
|
||||
Object.entries(aggregations).map(([key, value]) => {
|
||||
return (
|
||||
<Fragment key={key}>
|
||||
<div className="pt-4 pb-2 text-[#999]">
|
||||
{upperFirst(camelCase(key))}
|
||||
</div>
|
||||
|
||||
<MultiSelect
|
||||
value={aggregateFilter?.[key] ?? []}
|
||||
placeholder={`Please select ${key}`}
|
||||
options={value.buckets.map((bucket) => ({
|
||||
label: bucket.label ?? bucket.key,
|
||||
value: bucket.key,
|
||||
}))}
|
||||
onChange={(value) => {
|
||||
setAggregateFilter({
|
||||
...aggregateFilter,
|
||||
[key]: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimeFilter;
|
||||
212
src/components/ui/calendar.tsx
Normal file
212
src/components/ui/calendar.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "lucide-react";
|
||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
showOutsideDays={showOutsideDays}
|
||||
style={{
|
||||
// @ts-ignore
|
||||
"--cell-size": "2rem",
|
||||
}}
|
||||
className={cn(
|
||||
"bg-background group/calendar p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString("default", { month: "short" }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn("relative flex gap-4", defaultClassNames.months),
|
||||
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[var(--cell-size)] w-[var(--cell-size)] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"bg-popover absolute inset-0 opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"select-none font-medium",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
table: "w-full border-collapse",
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"w-[var(--cell-size)] select-none",
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-muted-foreground select-none text-[0.8rem]",
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"bg-accent rounded-l-md",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||
range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
|
||||
today: cn(
|
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="calendar"
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
if (orientation === "right") {
|
||||
return (
|
||||
<ChevronRightIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||
);
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className="flex size-[var(--cell-size)] items-center justify-center text-center">
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton>) {
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null);
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus();
|
||||
}, [modifiers.focused]);
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[var(--cell-size)] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton };
|
||||
43
src/components/ui/date-picker-range.tsx
Normal file
43
src/components/ui/date-picker-range.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { FC, memo } from "react";
|
||||
import { PropsRange } from "react-day-picker";
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
|
||||
import { Calendar } from "./calendar";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import dayjs from "dayjs";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const DatePickerRange: FC<Partial<PropsRange>> = (props) => {
|
||||
const { selected } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<div className="h-8 flex items-center justify-between px-2 border border-border rounded-lg">
|
||||
{selected ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{dayjs(selected.from).format("YYYY-MM-DD")}</span>
|
||||
<span className="text-muted-foreground">-</span>
|
||||
<span>{dayjs(selected.to).format("YYYY-MM-DD")}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-muted-foreground">
|
||||
{t("search.filers.selectDateRange")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CalendarIcon className="size-4 text-muted-foreground" />
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent>
|
||||
<div>
|
||||
<Calendar mode="range" numberOfMonths={2} {...props} />
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(DatePickerRange);
|
||||
@@ -1,97 +1,94 @@
|
||||
import * as React from "react";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import { FC, useState } from "react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "./dropdown-menu";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
|
||||
type Option = { value: string; label: string };
|
||||
|
||||
export interface MultiSelectProps {
|
||||
options: Option[];
|
||||
value: string[];
|
||||
onChange?: (next: string[]) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
export interface Option {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const MultiSelect: React.FC<MultiSelectProps> = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "",
|
||||
className,
|
||||
disabled,
|
||||
}) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const values = React.useMemo(() => new Set(value), [value]);
|
||||
export interface MultiSelectProps {
|
||||
value: string[];
|
||||
options: Option[];
|
||||
placeholder?: string;
|
||||
onChange?: (value: string[]) => void;
|
||||
}
|
||||
|
||||
const toggle = (v: string) => {
|
||||
const next = new Set(values);
|
||||
if (next.has(v)) next.delete(v);
|
||||
else next.add(v);
|
||||
onChange?.(Array.from(next));
|
||||
const MultiSelect: FC<MultiSelectProps> = (props) => {
|
||||
const { value, options, placeholder, onChange } = props;
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const renderTrigger = () => {
|
||||
if (value.length === 0) {
|
||||
return <div className="text-muted-foreground px-1">{placeholder}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{value.map((item) => (
|
||||
<div className="inline-flex items-center gap-1 h-5.5 px-2 bg-muted rounded-md text-muted-foreground">
|
||||
<span>
|
||||
{options.find((option) => option.value === item)?.label ?? value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const display = React.useMemo(() => {
|
||||
if (values.size === 0) return placeholder;
|
||||
const labels = options
|
||||
.filter((o) => values.has(o.value))
|
||||
.map((o) => o.label);
|
||||
return labels.join(", ");
|
||||
}, [options, values, placeholder]);
|
||||
|
||||
return (
|
||||
<PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
|
||||
<PopoverPrimitive.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className={cn(values.size === 0 && "text-muted-foreground")}>{display}</span>
|
||||
<svg
|
||||
className="h-4 w-4 opacity-70"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
</PopoverPrimitive.Trigger>
|
||||
<PopoverPrimitive.Content
|
||||
sideOffset={4}
|
||||
className={cn(
|
||||
"z-50 w-(--radix-popover-trigger-width) min-w-[220px] rounded-md border border-input bg-popover p-2 text-popover-foreground shadow-md outline-none",
|
||||
"ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
)}
|
||||
>
|
||||
<div className="max-h-48 overflow-y-auto space-y-1">
|
||||
{options.map((opt) => {
|
||||
const checked = values.has(opt.value) ? "checked" : "unchecked";
|
||||
return (
|
||||
<label
|
||||
key={opt.value}
|
||||
className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1 hover:bg-accent hover:text-accent-foreground"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
toggle(opt.value);
|
||||
}}
|
||||
>
|
||||
<Checkbox checked={checked === "checked"} className="h-4 w-4" />
|
||||
<span className="text-sm">{opt.label}</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
<DropdownMenu onOpenChange={setOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="flex items-center justify-between border border-border min-h-8 rounded-lg p-1">
|
||||
{renderTrigger()}
|
||||
|
||||
<ChevronDown
|
||||
className={cn("size-4 min-w-4 text-muted-foreground transition", {
|
||||
"rotate-180": open,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</PopoverPrimitive.Content>
|
||||
</PopoverPrimitive.Root>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent>
|
||||
{options.map((item) => {
|
||||
const { label, value: itemValue } = item;
|
||||
|
||||
const included = value.includes(itemValue);
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={itemValue}
|
||||
className={"flex items-center justify-between gap-2"}
|
||||
onSelect={(event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (included) {
|
||||
onChange?.(value.filter((item) => item !== itemValue));
|
||||
} else {
|
||||
onChange?.([...value, itemValue]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span>{label}</span>
|
||||
|
||||
<Check
|
||||
className={cn("size-4 text-muted-foreground", {
|
||||
"opacity-0": !value.includes(itemValue),
|
||||
})}
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
|
||||
export default MultiSelect;
|
||||
|
||||
@@ -2,10 +2,18 @@ import * as React from "react";
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SliderRangeProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
|
||||
classNames?: {
|
||||
range?: string;
|
||||
thumb?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const Slider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
SliderRangeProps
|
||||
>(({ className, classNames, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
@@ -15,13 +23,19 @@ const Slider = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||
<SliderPrimitive.Range
|
||||
className={cn("absolute h-full bg-primary", classNames?.range)}
|
||||
/>
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
||||
<SliderPrimitive.Thumb
|
||||
className={cn(
|
||||
"block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
classNames?.thumb
|
||||
)}
|
||||
/>
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
export { Slider };
|
||||
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { useState, useCallback, useMemo, useRef } from "react";
|
||||
import { debounce, orderBy } from "lodash-es";
|
||||
import { debounce, fromPairs, orderBy, sortBy, toPairs } from "lodash-es";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import timezone from "dayjs/plugin/timezone";
|
||||
import advancedFormat from "dayjs/plugin/advancedFormat";
|
||||
|
||||
import type {
|
||||
QueryHits,
|
||||
@@ -14,6 +18,10 @@ import { useAppStore } from "@/stores/appStore";
|
||||
import { useSearchStore } from "@/stores/searchStore";
|
||||
import { useExtensionsStore } from "@/stores/extensionsStore";
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
dayjs.extend(advancedFormat);
|
||||
|
||||
interface SearchState {
|
||||
isError: FailedRequest[];
|
||||
suggests: QueryHits[];
|
||||
@@ -52,6 +60,7 @@ export function useSearch() {
|
||||
});
|
||||
|
||||
const { querySourceTimeout, searchDelay } = useConnectStore();
|
||||
const { aggregateFilter, filterDateRange, fuzziness } = useSearchStore();
|
||||
|
||||
const [searchState, setSearchState] = useState<SearchState>({
|
||||
isError: [],
|
||||
@@ -61,6 +70,14 @@ export function useSearch() {
|
||||
globalItemIndexMap: {},
|
||||
});
|
||||
|
||||
const toEasySearchTime = (date: Date) => {
|
||||
return (
|
||||
dayjs(date).format("YYYY-MM-DDTHH:mm:ss.SSS") +
|
||||
"000" +
|
||||
dayjs(date).format("Z")
|
||||
);
|
||||
};
|
||||
|
||||
const handleSearchResponse = (
|
||||
response: MultiSourceQueryResponse,
|
||||
searchInput: string
|
||||
@@ -160,16 +177,51 @@ export function useSearch() {
|
||||
const performSearch = useCallback(
|
||||
async (searchInput: string) => {
|
||||
if (!searchInput) {
|
||||
setSearchState((prev) => ({ ...prev, suggests: [] }));
|
||||
return;
|
||||
const { setAggregations, setAggregateFilter } =
|
||||
useSearchStore.getState();
|
||||
|
||||
setAggregations(void 0);
|
||||
setAggregateFilter(void 0);
|
||||
|
||||
return setSearchState((prev) => ({ ...prev, suggests: [] }));
|
||||
}
|
||||
|
||||
let response: MultiSourceQueryResponse;
|
||||
if (isTauri) {
|
||||
const { fuzziness, aggregateFilter, filterDateRange } =
|
||||
useSearchStore.getState();
|
||||
|
||||
const queryStrings: Record<string, string> = {
|
||||
fuzziness: String(fuzziness),
|
||||
query: searchInput,
|
||||
};
|
||||
|
||||
if (filterDateRange) {
|
||||
const { from, to } = filterDateRange;
|
||||
|
||||
if (from) {
|
||||
queryStrings["update_time_start"] = toEasySearchTime(from);
|
||||
}
|
||||
|
||||
if (to) {
|
||||
queryStrings["update_time_end"] = toEasySearchTime(to);
|
||||
}
|
||||
}
|
||||
|
||||
if (aggregateFilter) {
|
||||
for (const [key, value] of Object.entries(aggregateFilter)) {
|
||||
if (value.length === 0) continue;
|
||||
|
||||
queryStrings[key] = `any(${value.join(",")})`;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("queryStrings", queryStrings);
|
||||
|
||||
response = await platformAdapter.commands("query_coco_fusion", {
|
||||
from: 0,
|
||||
size: 10,
|
||||
queryStrings: { query: searchInput },
|
||||
queryStrings,
|
||||
queryTimeout: querySourceTimeout,
|
||||
});
|
||||
} else {
|
||||
@@ -198,7 +250,23 @@ export function useSearch() {
|
||||
}
|
||||
}
|
||||
|
||||
//console.log("_suggest", searchInput, response);
|
||||
console.log("_suggest", searchInput, response);
|
||||
|
||||
if (isTauri) {
|
||||
const { setAggregations, setAggregateFilter } =
|
||||
useSearchStore.getState();
|
||||
|
||||
if (response?.aggregations) {
|
||||
const sortedAggregations = fromPairs(
|
||||
sortBy(toPairs(response.aggregations), ([key]) => key)
|
||||
);
|
||||
|
||||
setAggregations(sortedAggregations);
|
||||
} else {
|
||||
setAggregations(void 0);
|
||||
setAggregateFilter(void 0);
|
||||
}
|
||||
}
|
||||
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
@@ -216,6 +284,9 @@ export function useSearch() {
|
||||
aiOverviewCharLen,
|
||||
aiOverviewDelay,
|
||||
aiOverviewMinQuantity,
|
||||
aggregateFilter,
|
||||
filterDateRange,
|
||||
fuzziness,
|
||||
]
|
||||
);
|
||||
|
||||
|
||||
@@ -442,6 +442,19 @@
|
||||
"placeholder": "Ask More",
|
||||
"continueInChat": "Continue in chat",
|
||||
"copy": "Copy"
|
||||
},
|
||||
"fuzziness": {
|
||||
"fuzzyMatch": "Fuzzy Match"
|
||||
},
|
||||
"filers": {
|
||||
"allTime": "All Time",
|
||||
"past7Days": "Past 7 Days",
|
||||
"past90Days": "Past 90 Days",
|
||||
"past1year": "Past 1 Year",
|
||||
"more": "More",
|
||||
"dateRange": "Date Range",
|
||||
"selectDateRange": "Select Date Range",
|
||||
"filters": "Filters"
|
||||
}
|
||||
},
|
||||
"assistant": {
|
||||
|
||||
@@ -442,6 +442,19 @@
|
||||
"placeholder": "问更多",
|
||||
"continueInChat": "继续聊天",
|
||||
"copy": "复制"
|
||||
},
|
||||
"fuzziness": {
|
||||
"fuzzyMatch": "模糊匹配"
|
||||
},
|
||||
"filers": {
|
||||
"allTime": "全部时间",
|
||||
"past7Days": "过去 7 天",
|
||||
"past90Days": "过去 90 天",
|
||||
"past1year": "过去 1 年",
|
||||
"more": "更多",
|
||||
"dateRange": "日期范围",
|
||||
"selectDateRange": "选择日期范围",
|
||||
"filters": "筛选"
|
||||
}
|
||||
},
|
||||
"assistant": {
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { MultiSelect } from "@/components/ui/multi-select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
const ShadcnDemo = () => {
|
||||
const [checked, setChecked] = useState(false);
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
const [sliderValue, setSliderValue] = useState<number[]>([50]);
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
const options = [
|
||||
{ value: "a", label: "选项 A" },
|
||||
{ value: "b", label: "选项 B" },
|
||||
{ value: "c", label: "选项 C" },
|
||||
{ value: "d", label: "选项 D" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<h2 className="text-xl font-semibold">Shadcn 组件演示</h2>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">名称</Label>
|
||||
<Input id="name" placeholder="输入名称" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>选择</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="a">选项 A</SelectItem>
|
||||
<SelectItem value="b">选项 B</SelectItem>
|
||||
<SelectItem value="c">选项 C</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>多选框</Label>
|
||||
<MultiSelect options={options} value={selected} onChange={setSelected} />
|
||||
<div className="text-sm text-muted-foreground">当前选择:{selected.length ? selected.join(", ") : "无"}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>滑块(值:{sliderValue[0]})</Label>
|
||||
<Slider value={sliderValue} onValueChange={setSliderValue} max={100} step={1} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox checked={checked} onCheckedChange={(v) => setChecked(Boolean(v))} />
|
||||
<span>复选框:{checked ? "已选" : "未选"}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch checked={enabled} onCheckedChange={setEnabled} />
|
||||
<span>开关:{enabled ? "开启" : "关闭"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button>默认按钮</Button>
|
||||
<Button variant="secondary">次级按钮</Button>
|
||||
<Button variant="outline">描边按钮</Button>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost">打开对话框</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>示例对话框</DialogTitle>
|
||||
<DialogDescription>这是一个 Shadcn Dialog 示例。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="secondary">取消</Button>
|
||||
<Button>确认</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShadcnDemo;
|
||||
@@ -3,6 +3,8 @@ import {
|
||||
ExtensionPermission,
|
||||
ViewExtensionUISettings,
|
||||
} from "@/components/Settings/Extensions";
|
||||
import { Aggregations } from "@/types/search";
|
||||
import { DateRange } from "react-day-picker";
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
@@ -14,9 +16,13 @@ export type ViewExtensionOpened = [
|
||||
// HTML file URL
|
||||
string,
|
||||
ExtensionPermission | null,
|
||||
ViewExtensionUISettings | null,
|
||||
ViewExtensionUISettings | null
|
||||
];
|
||||
|
||||
export interface AggregateFilter {
|
||||
[key: string]: string[];
|
||||
}
|
||||
|
||||
export type ISearchStore = {
|
||||
sourceData: any;
|
||||
setSourceData: (sourceData: any) => void;
|
||||
@@ -64,8 +70,25 @@ export type ISearchStore = {
|
||||
// When we open a View extension, we set this to a non-null value.
|
||||
viewExtensionOpened?: ViewExtensionOpened;
|
||||
setViewExtensionOpened: (showViewExtension?: ViewExtensionOpened) => void;
|
||||
|
||||
enabledFuzzyMatch: boolean;
|
||||
setEnabledFuzzyMatch: (enabledFuzzyMatch: boolean) => void;
|
||||
|
||||
fuzziness: number;
|
||||
setFuzziness: (fuzziness: number) => void;
|
||||
|
||||
filterDateRange?: DateRange;
|
||||
setFilterDateRange: (filterDateRange?: DateRange) => void;
|
||||
|
||||
aggregateFilter?: AggregateFilter;
|
||||
setAggregateFilter: (aggregateFilter?: AggregateFilter) => void;
|
||||
|
||||
aggregations?: Aggregations;
|
||||
setAggregations: (aggregations?: Aggregations) => void;
|
||||
};
|
||||
|
||||
export const DEFAULT_FUZZINESS = 5;
|
||||
|
||||
export const useSearchStore = create<ISearchStore>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
@@ -138,11 +161,29 @@ export const useSearchStore = create<ISearchStore>()(
|
||||
setViewExtensionOpened: (viewExtensionOpened) => {
|
||||
return set({ viewExtensionOpened });
|
||||
},
|
||||
enabledFuzzyMatch: false,
|
||||
setEnabledFuzzyMatch: (enabledFuzzyMatch) => {
|
||||
return set({ enabledFuzzyMatch });
|
||||
},
|
||||
fuzziness: DEFAULT_FUZZINESS,
|
||||
setFuzziness: (fuzziness) => {
|
||||
return set({ fuzziness });
|
||||
},
|
||||
setFilterDateRange(filterDateRange) {
|
||||
return set({ filterDateRange });
|
||||
},
|
||||
setAggregateFilter: (aggregateFilter) => {
|
||||
return set({ aggregateFilter });
|
||||
},
|
||||
setAggregations: (aggregations) => {
|
||||
return set({ aggregations });
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: "search-store",
|
||||
partialize: (state) => ({
|
||||
sourceData: state.sourceData,
|
||||
fuzziness: state.fuzziness,
|
||||
}),
|
||||
}
|
||||
)
|
||||
|
||||
@@ -71,8 +71,21 @@ export interface FailedRequest {
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
export interface Aggregation {
|
||||
buckets: Array<{
|
||||
key: string;
|
||||
label?: string;
|
||||
doc_count: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface Aggregations {
|
||||
[key: string]: Aggregation;
|
||||
}
|
||||
|
||||
export interface MultiSourceQueryResponse {
|
||||
failed: FailedRequest[];
|
||||
hits: QueryHits[];
|
||||
total_hits: number;
|
||||
aggregations?: Aggregations;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user