Skip to content

Commit 7c207a9

Browse files
SaraVieiracdxker
SaraVieira
authored and
cdxker
committed
feat: update modal in data explorer
1 parent 7ad2d4d commit 7c207a9

File tree

5 files changed

+277
-61
lines changed

5 files changed

+277
-61
lines changed

‎frontends/analytics/src/components/SingleQueryInfo.tsx‎

Lines changed: 55 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import { createQuery, useQueryClient } from "@tanstack/solid-query";
22
import { getSearchQuery } from "../api/analytics";
33
import { createMemo, createSignal, For, Show, useContext } from "solid-js";
44
import { DatasetContext } from "../layouts/TopBarLayout";
5-
import { FullScreenModal, JSONMetadata } from "shared/ui";
5+
import { FullScreenModal, JsonInput } from "shared/ui";
66
import { format } from "date-fns";
77
import { parseCustomDateString } from "../utils/formatDate";
88
import { OrgContext } from "../contexts/OrgContext";
99
import { DatasetAndUsage, SearchQueryEvent } from "shared/types";
1010
import { z } from "zod";
11-
import { VsJson } from "solid-icons/vs";
1211
import { QueryStringDisplay } from "./QueryStringDisplay";
12+
import { Card } from "./charts/Card";
13+
import { IoCode } from "solid-icons/io";
1314

1415
interface SingleQueryProps {
1516
queryId: string;
@@ -41,24 +42,20 @@ export const SingleQuery = (props: SingleQueryProps) => {
4142

4243
return (
4344
<div>
44-
<div class="text-xl">
45-
<QueryStringDisplay size="large">
46-
{props.data.query}
47-
</QueryStringDisplay>
48-
</div>
49-
<div class="opacity-80">
50-
Searched on{" "}
51-
{format(
52-
parseCustomDateString(props.data.created_at),
53-
"M/d/yy h:mm a",
54-
)}
55-
</div>
56-
<div class="h-2" />
5745
<div>
5846
<h3 class="text-base font-semibold leading-6 text-gray-900">
59-
Last 30 days
47+
<QueryStringDisplay size="large">
48+
{props.data.query}
49+
</QueryStringDisplay>
6050
</h3>
61-
<dl class="m-auto mt-5 grid max-w-4xl grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow md:grid-cols-5 md:divide-x md:divide-y-0">
51+
<span class="text-sm text-zinc-600">
52+
Searched on{" "}
53+
{format(
54+
parseCustomDateString(props.data.created_at),
55+
"M/d/yy h:mm a",
56+
)}
57+
</span>
58+
<dl class="m-auto mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow md:grid-cols-5 md:divide-x md:divide-y-0">
6259
<DataSquare label="Search Type" value={props.data.search_type} />
6360
<DataSquare
6461
label="Dataset"
@@ -72,24 +69,30 @@ export const SingleQuery = (props: SingleQueryProps) => {
7269
/>
7370
</dl>
7471
</div>
75-
<div class="h-4" />
76-
<div class="text-bold mb-2 h-2 w-full border-t-2 border-t-neutral-300/80 text-neutral-800 outline-neutral-500" />
77-
<div class="grid grid-cols-2 gap-4">
78-
<div>
79-
<div>Request Parameters</div>
80-
<div class="rounded-md border border-neutral-200 bg-white p-2 shadow-md">
81-
<JSONMetadata class="text-sm" data={props.data.request_params} />
82-
</div>
83-
</div>
84-
<div>
85-
<div>Results</div>
86-
<div class="flex flex-col gap-2">
87-
<For each={props.data.results}>
88-
{(result) => <ResultCard result={result} />}
89-
</For>
90-
</div>
72+
<div class="text-bold mb-2 h-2 w-full text-zinc-800 outline-zinc-500" />
73+
<Card title="Request Parameters">
74+
<ul>
75+
<For
76+
each={Object.keys(props.data.request_params).filter(
77+
(key) => props.data.request_params[key],
78+
)}
79+
>
80+
{(key) => (
81+
<li class="font-mono text-sm">
82+
<span class="font-medium">{key}: </span>
83+
{props.data.request_params[key] as string}{" "}
84+
</li>
85+
)}
86+
</For>
87+
</ul>
88+
</Card>
89+
<Card class="mt-8" title="Results">
90+
<div class="grid grid-cols-2 gap-4">
91+
<For each={props.data.results}>
92+
{(result) => <ResultCard result={result} />}
93+
</For>
9194
</div>
92-
</div>
95+
</Card>
9396
</div>
9497
);
9598
};
@@ -146,32 +149,36 @@ const ResultCard = (props: ResultCardProps) => {
146149

147150
return (
148151
<Show when={props.result}>
149-
<div class="rounded-md border border-neutral-200 bg-white p-2 shadow-md">
152+
<><button onClick={() => setShowingJson(!showingJson())} class="text-left">
150153
<div class="flex justify-between text-sm">
151-
<div>{metadata()?.id}</div>
152-
<button onClick={() => setShowingJson(!showingJson())}>
153-
<VsJson />
154-
</button>
154+
<span class="font-medium">{metadata()?.id}</span>
155+
156+
<IoCode />
157+
</div>
158+
<div class="text-xs font-normal opacity-60">
159+
Score: {props?.result?.score}
155160
</div>
156-
<div class="text-sm opacity-60">Score: {props?.result?.score}</div>
157161
<Show when={metadata()}>
158162
{(metadata) => (
159-
<div>
160-
<div class="line-clamp-4">{metadata().chunk_html}</div>
163+
<div class="line-clamp-1 text-sm text-zinc-900">
164+
{metadata().chunk_html}
161165
</div>
162166
)}
163167
</Show>
164-
<FullScreenModal
168+
</button>
169+
<FullScreenModal
170+
title="Metadata"
165171
class="max-h-[80vh] max-w-[80vw] overflow-y-auto p-3"
166172
show={showingJson}
167173
setShow={setShowingJson}
168174
>
169-
<div>
170-
<div class="text-lg">Metadata</div>
171-
<JSONMetadata copyJSONButton data={props.result.metadata[0]} />
172-
</div>
175+
<JsonInput
176+
value={() => props.result.metadata[0]}
177+
class="min-w-[60vw]"
178+
readonly
179+
/>
173180
</FullScreenModal>
174-
</div>
181+
</>
175182
</Show>
176183
);
177184
};

‎frontends/analytics/src/components/charts/Card.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ export const Card = (props: CardProps) => {
2121
<div class="mb-4 flex items-center justify-between">
2222
<div>
2323
<Show when={props.title}>
24-
{(title) => <div class="text-lg leading-none">{title()}</div>}
24+
{(title) => (
25+
<div class="text-lg font-medium leading-none">{title()}</div>
26+
)}
2527
</Show>
2628
<Show when={props.subtitle}>
2729
{(subtitle) => (

‎frontends/analytics/src/index.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,27 @@
55
.debug {
66
outline: 1px solid red;
77
}
8+
9+
.jsoneditor.jsoneditor-mode-view {
10+
@apply border-none text-zinc-900;
11+
12+
.jsoneditor-field {
13+
color: #E45649;
14+
@apply min-w-max
15+
}
16+
17+
div.jsoneditor-value.jsoneditor-null {
18+
color: #0184BC;
19+
}
20+
21+
div.jsoneditor-value.jsoneditor-string {
22+
color: #50A14F;
23+
}
24+
div.jsoneditor-value.jsoneditor-number {
25+
color: #986801;
26+
}
27+
28+
div.jsoneditor-value.jsoneditor-object {
29+
@apply text-zinc-600;
30+
}
31+
}

‎frontends/shared/ui/AceTheme.ts‎

Lines changed: 178 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,180 @@
1+
(window as any).ace.define(
2+
"ace/theme/github-light",
3+
["require", "exports", "module", "ace/lib/dom"],
4+
(acequire: any, exports: any, _module: any) => {
5+
exports.isDark = true;
6+
exports.cssClass = "ace-jsoneditor";
7+
exports.cssText = `
8+
.ace-jsoneditor .ace_gutter {
9+
background: #ffffff;
10+
color: rgba(27, 31, 35, 0.3);
11+
}
12+
13+
.ace-jsoneditor .ace_print-margin {
14+
width: 1px;
15+
background: #e8e8e8;
16+
}
17+
18+
.ace-jsoneditor {
19+
background-color: #FFFFFF;
20+
color: #24292E;
21+
}
22+
23+
.ace-jsoneditor .ace_cursor {
24+
color: #044289;
25+
background: none;
26+
}
27+
28+
.ace-jsoneditor .ace_marker-layer .ace_selection {
29+
background: rgba(3, 102, 214, 0.14);
30+
}
31+
32+
.ace-jsoneditor.ace_multiselect .ace_selection.ace_start {
33+
box-shadow: 0 0 3px 0px #FFFFFF;
34+
border-radius: 2px;
35+
}
36+
37+
.ace-jsoneditor .ace_marker-layer .ace_step {
38+
background: rgb(198, 219, 174);
39+
}
40+
41+
.ace-jsoneditor .ace_marker-layer .ace_bracket {
42+
margin: -1px 0 0 -1px;
43+
border: 1px solid rgba(52, 208, 88, 0);
44+
background: rgba(52, 208, 88, 0.25);
45+
}
46+
47+
.ace-jsoneditor .ace_marker-layer .ace_active-line {
48+
background: #f6f8fa;
49+
border: 2px solid #eeeeee;
50+
}
51+
52+
.ace-jsoneditor .ace_gutter-active-line {
53+
background-color: #f6f8fa;
54+
color: #24292e
55+
}
56+
57+
.ace-jsoneditor .ace_marker-layer .ace_selected-word {
58+
border: 1px solid rgba(3, 102, 214, 0.14);
59+
}
60+
61+
.ace-jsoneditor .ace_fold {
62+
background-color: #D73A49;
63+
border-color: #24292E;
64+
}
65+
66+
.ace_tooltip.ace-jsoneditor {
67+
background-color: #f6f8fa !important;
68+
color: #444d56 !important;
69+
border: 1px solid #444d56
70+
}
71+
72+
.ace-jsoneditor .language_highlight_error {
73+
border-bottom: dotted 1px #cb2431;
74+
background: none;
75+
}
76+
77+
.ace-jsoneditor .language_highlight_warning {
78+
border-bottom: solid 1px #f9c513;
79+
background: none;
80+
}
81+
82+
.ace-jsoneditor .language_highlight_info {
83+
border-bottom: dotted 1px #1a85ff;
84+
background: none;
85+
}
86+
87+
.ace-jsoneditor .ace_keyword {
88+
color: #D73A49;
89+
}
90+
91+
.ace-jsoneditor .ace_constant {
92+
color: #005CC5;
93+
}
94+
95+
.ace-jsoneditor .ace_support {
96+
color: #005CC5;
97+
}
98+
99+
.ace-jsoneditor .ace_support.ace_constant {
100+
color: #005CC5;
101+
}
102+
103+
.ace-jsoneditor .ace_support.ace_type {
104+
color: #D73A49;
105+
}
106+
107+
.ace-jsoneditor .ace_storage {
108+
color: #D73A49;
109+
}
110+
111+
.ace-jsoneditor .ace_storage.ace_type {
112+
color: #D73A49;
113+
}
114+
115+
.ace-jsoneditor .ace_invalid.ace_illegal {
116+
font-style: italic;
117+
color: #B31D28;
118+
}
119+
120+
.ace-jsoneditor .ace_invalid.ace_deprecated {
121+
font-style: italic;
122+
color: #B31D28;
123+
}
124+
125+
.ace-jsoneditor .ace_string {
126+
color: #032F62;
127+
}
128+
129+
.ace-jsoneditor .ace_string.ace_regexp {
130+
color: #032F62;
131+
}
132+
133+
.ace-jsoneditor .ace_comment {
134+
color: #6A737D;
135+
}
136+
137+
.ace-jsoneditor .ace_variable {
138+
color: #E36209;
139+
}
140+
141+
.ace-jsoneditor .ace_variable.ace_language {
142+
color: #005CC5;
143+
}
144+
145+
.ace-jsoneditor .ace_entity.ace_name {
146+
color: #6F42C1;
147+
}
148+
149+
.ace-jsoneditor .ace_entity {
150+
color: #6F42C1;
151+
}
152+
153+
.ace-jsoneditor .ace_entity.ace_name.ace_tag {
154+
color: #22863A;
155+
}
156+
157+
.ace-jsoneditor .ace_meta.ace_tag {
158+
color: #22863A;
159+
}
160+
161+
.ace-jsoneditor .ace_markup.ace_heading {
162+
color: #005CC5;
163+
}
164+
165+
.ace-jsoneditor .ace_indent-guide {
166+
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
167+
}
168+
169+
.ace-jsoneditor .ace_indent-guide-active {
170+
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAZSURBVHjaYvj///9/hivKyv8BAAAA//8DACLqBhbvk+/eAAAAAElFTkSuQmCC") right repeat-y;
171+
}`;
172+
173+
var dom = acequire("../lib/dom");
174+
dom.importCssString(exports.cssText, exports.cssClass);
175+
}
176+
);
177+
1178
(window as any).ace.define(
2179
"ace/theme/trieve",
3180
["require", "exports", "module", "ace/lib/dom"],
@@ -142,5 +319,5 @@
142319

143320
const dom = acequire("../lib/dom");
144321
dom.importCssString(exports.cssText, exports.cssClass);
145-
},
322+
}
146323
);

0 commit comments

Comments
 (0)