Skip to content

Commit 888555c

Browse files
Francesca-BitKittyJose
Francesca-Bit
and
KittyJose
authored
Open ai UI (#257)
* review * change color of button * add package-lock * open AI help message * ui styling * review dash * add hasKey * changes * merge indexing * ai changes ... * progress ... * review css * add message * fix the look and feel * fix the look and feel * review css --------- Co-authored-by: Francesca-Bit <[email protected]> Co-authored-by: Kitty Jose <[email protected]>
1 parent 18e4ba2 commit 888555c

File tree

9 files changed

+1471
-515
lines changed

9 files changed

+1471
-515
lines changed

‎package-lock.json‎

Lines changed: 1403 additions & 419 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/tdb-dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"codemirror-graphql": "^2.0.2",
6464
"console-browserify": "^1.2.0",
6565
"date-fns": "^2.27.0",
66-
"graphiql": "^2.2.0",
66+
"graphiql": "^3.0.0",
6767
"graphql": "^15.8.0",
6868
"graphql-formatter": "^1.0.3",
6969
"graphql-react": "^20.0.0",

‎packages/tdb-dashboard/src/App.css‎

Lines changed: 44 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ div.SplitPane .horizontal {
145145

146146
.pro-sidebar-content {
147147
border-right: 1px solid #303030;
148-
background: #000000;
148+
background: #1a1919;
149149
}
150150
/* ---------- Split Pane resizing css ---------- */
151151

@@ -161,7 +161,7 @@ div.progress-bar-container {
161161
}
162162
/* ---------- progress bar css ---------- */
163163

164-
/* ---------- icon bar css ---------- */
164+
/* ---------- icon bar css ---------- */x
165165
.nav-bar-row {
166166
height: -webkit-fill-available;
167167
}
@@ -296,28 +296,6 @@ div.progress-bar-container {
296296
min-width: "33.333333%"
297297
}
298298

299-
/*.table {
300-
border: 0px solid transparent !important;
301-
table-layout: fixed;
302-
margin-left: auto;
303-
margin-right: auto;
304-
background-color: transparent!important;
305-
}
306-
307-
.table td, .table th {
308-
border-top: 0 !important;
309-
310-
word-break: break-all !important;
311-
}
312-
313-
.table thead th, .member-headers {
314-
color: #a3b6ca !important;
315-
}
316-
317-
.table > :not(:first-child) {
318-
border-top: 0 !important;
319-
}*/
320-
321299
.RRT__tab {
322300
background: transparent !important;
323301
border-style: solid;
@@ -1072,14 +1050,19 @@ pre.CodeMirror-line > span > span.cm-string {
10721050
max-width: 100%;
10731051
}
10741052

1053+
.mainGraphIql{
1054+
height : calc(100vh - 80px);
1055+
}
10751056

1076-
.table td{
1077-
white-space: nowrap;
1078-
overflow: hidden;
1079-
text-overflow: ellipsis;
1080-
max-width: 200px;
1057+
.mainGraphIqlCR{
1058+
height : calc(100vh - 150px);
1059+
}
1060+
1061+
.graphiql-container{
1062+
background-color: transparent !important;
10811063
}
10821064

1065+
/*
10831066
.graphiql-container .graphiql-chevron-icon{
10841067
color:white;
10851068
}
@@ -1093,7 +1076,6 @@ button.graphiql-tab-add>svg
10931076
color:white;
10941077
}
10951078
1096-
10971079
.graphiql-query-editor{
10981080
width: 100%;
10991081
height: 100%;
@@ -1107,14 +1089,6 @@ button.graphiql-tab-add>svg
11071089
height: 100%;
11081090
}
11091091
1110-
.mainGraphIql{
1111-
height : calc(100vh - 80px);
1112-
}
1113-
1114-
.mainGraphIqlCR{
1115-
height : calc(100vh - 150px);
1116-
}
1117-
11181092
.graphiql-session{
11191093
height : 100%;
11201094
}
@@ -1144,6 +1118,8 @@ button.graphiql-tab-add>svg
11441118
width: 100%;
11451119
}
11461120
1121+
/* ---- end ---*/
1122+
11471123
#json_type_field-warning-box svg {
11481124
height: 15px;
11491125
width: 15px;
@@ -1201,44 +1177,12 @@ button.graphiql-tab-add>svg
12011177
background-color: #adb5bd !important;
12021178
}
12031179

1204-
/*.MuiButton-contained {
1205-
background-color: #a9a7a5;
1206-
}
1207-
.MuiButton-containedPrimary {
1208-
color: #fff;
1209-
background-color: #3f51b5;
1210-
}
1211-
.MuiButton-containedSecondary {
1212-
color: #fff;
1213-
background-color: #f50057;
1214-
}
1215-
1216-
.group {
1217-
background: transparent !important;
1218-
border: 1px solid #dee2e6 !important;
1219-
}
1220-
1221-
.rule_group{
1222-
background-color: white;
1223-
}
1224-
1225-
.MuiButton-text{
1226-
color: rgb(0, 188, 140)!important;
1227-
margin-right: 20px;
1228-
}
1229-
.MuiInputBase-input{
1230-
min-height: 20px !important;
1231-
}*/
1232-
1233-
/*.qb-lite .group--drag-handler, .qb-lite .group--actions {
1234-
transition: opacity 0.2s;
1235-
}*/
12361180
.qb-lite .group--header:hover .group--header .group--drag-handler, .qb-lite .group--header:hover .group--header .group--actions,
12371181
.qb-lite .group--header:not(:hover) .group--drag-handler,
12381182
.qb-lite .group--header:not(:hover) .group--actions,
12391183
.qb-lite .rule_group:not(:hover) .group--drag-handler,
12401184
.qb-lite .rule_group:not(:hover) .group--actions {
1241-
opacity: 1;https://github.com/terminusdb/terminusdb-dashboard/blob/main/packages/tdb-dashboard/src/App.css
1185+
opacity: 1;
12421186
}
12431187

12441188
.accordion{
@@ -1449,4 +1393,33 @@ button.graphiql-tab-add>svg
14491393
height: "1.5rem"
14501394
}
14511395

1396+
/* table CSS */
1397+
.table td{
1398+
white-space: nowrap;
1399+
overflow: hidden;
1400+
text-overflow: ellipsis;
1401+
max-width: 200px ;
1402+
}
1403+
1404+
.table {
1405+
border: 0px solid transparent !important;
1406+
table-layout: fixed;
1407+
margin-left: auto;
1408+
margin-right: auto;
1409+
background-color: transparent!important;
1410+
}
1411+
1412+
.table td, .table th {
1413+
border-top: 0 !important;
1414+
word-break: break-all !important;
1415+
}
1416+
1417+
.table thead th, .member-headers {
1418+
color: #a3b6ca !important;
1419+
}
1420+
1421+
.table > :not(:first-child) {
1422+
border-top: 0 !important;
1423+
}
1424+
14521425

‎packages/tdb-dashboard/src/components/DisplayNoIndexingAction.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from "react";
2-
import {Container , Card, Button, Col,Row} from "react-bootstrap"
2+
import {Container , Card, Button, Col,Row,Alert} from "react-bootstrap"
33
import Stack from "react-bootstrap/Stack"
44
import { useParams, NavLink} from "react-router-dom";
55
import { RiUserFollowFill } from "react-icons/ri"
@@ -8,6 +8,7 @@ import {SiHandlebarsdotjs} from "react-icons/si"
88
import { useOpenAI } from "../hooks/useOpenAI";
99
import { RxCheckbox } from "react-icons/rx"
1010
import {WOQLClientObj} from '../init-woql-client'
11+
import {FiAlertTriangle} from 'react-icons/fi'
1112

1213
const StepDetail = ({ stepNumber, stepComponent, icon}) => {
1314

@@ -62,6 +63,8 @@ export const DisplayNoIndexingAction = ({ helpDescription }) => {
6263
const connection_type = clientUser.connection_type==="LOCAL" ? "LOCAL" : "REMOTE"
6364

6465
return <div className="text-center justify-content-center">
66+
<Alert variant="primary bg-dark text-warning" className="mx-4 ml-4 mr-4"><span className="d-flex justify-content-center"><FiAlertTriangle size={24} className="mr-3"/><h5>
67+
Experimental Feature</h5></span></Alert>
6568
<h4 className="text-light fw-bold">Get started with Indexing Actions</h4>
6669
<h5 className="text-light fw-bold">{helpDescription}</h5>
6770
<Container className="my-5">

‎packages/tdb-dashboard/src/components/GraphqlEditor.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,13 @@ export function GraphqlEditor(props) {
2323
const client = woqlClient.copy()
2424
const url = client.connectionConfig.branchBase("graphql")
2525

26+
const authorization = woqlClient.localAuth().type === "jwt" ? 'Bearer '+ woqlClient.localAuth().key : 'Basic '+ btoa(`${woqlClient.localAuth().user}:${woqlClient.localAuth().key}`)
27+
28+
2629
const fetcher = createGraphiQLFetcher({
2730
url:url,
2831
headers: {
29-
authorization: 'Bearer '+ woqlClient.localAuth().key
32+
authorization: authorization
3033
}});
3134

3235
/*

‎packages/tdb-dashboard/src/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
<head>
44
<title><%= htmlWebpackPlugin.options.title %></title>
55
<meta charset="UTF-8">
6-
<link href="/assets/graphiql.min.css" rel="stylesheet">
7-
86
<!-- <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
97
-->
108
<link rel="icon" type="image/png" href="https://assets.terminusdb.com/images/terminusx-color.png"/>
@@ -13,7 +11,7 @@
1311
<link href='/assets/leaflet.fullscreenv1.0.1.css' rel='stylesheet' />
1412
</style>
1513
</head>
16-
<body>
14+
<body class="graphiql-dark">
1715
<div id="root" class="h-100">
1816
</div>
1917
<style>

‎packages/tdb-dashboard/src/pages/FreeTextSearch.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ import Alert from "react-bootstrap/Alert";
1616
import { DisplayNoIndexingAction } from "../components/DisplayNoIndexingAction";
1717
import { BsSearch } from "react-icons/bs"
1818
import InputGroup from 'react-bootstrap/InputGroup';
19+
import {FiAlertTriangle} from 'react-icons/fi'
1920

2021

2122
export function FreeTextSearch() {
22-
2323
const {resetSearch,hasOpenAIKEY,
2424
getSearchableCommit, searchableCommit,
2525
searchResult,
@@ -70,13 +70,12 @@ export function FreeTextSearch() {
7070
}
7171
setElements(elementsArr)
7272
}
73-
73+
7474

7575
const changePageCallNext =()=>{
7676
setStart(start+5)
7777
}
7878

79-
8079
const changePageCallPreview =()=>{
8180
setStart(start-5)
8281
}
@@ -88,9 +87,12 @@ export function FreeTextSearch() {
8887

8988
let page = Math.ceil(start/5)
9089

91-
92-
return <Layout showLeftSideBar={true} mainClassName={"h-view mt-4"}>
93-
{commit && <div className="d-flex">
90+
return <Layout showLeftSideBar={true} mainClassName={"mt-4"}>
91+
{commit && <div className="d-flex flex-column">
92+
<Alert variant="primary bg-dark text-warning" className="mx-4 ml-4 mr-4">
93+
<span className="d-flex justify-content-center">
94+
<FiAlertTriangle size={24} className="mr-3"/><h5>Experimental Feature</h5></span></Alert>
95+
9496
<InputGroup className="mb-3">
9597
<Form.Control ref={search} style={{maxWidth:"500px"}} type="text" placeholder="Search" className="ml-auto"/>
9698
<Button onClick={onClickHandler} variant="light" className="mr-auto"><BsSearch/></Button>

‎packages/tdb-dashboard/src/pages/GraphIqlEditor.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ import { GraphiQL } from "graphiql";
66
import { Layout } from "./Layout";
77
import {WOQLClientObj} from '../init-woql-client'
88
require( "graphiql/graphiql.min.css");
9-
require('codemirror/lib/codemirror.css');
10-
require('codemirror/theme/shadowfox.css');
9+
//require('codemirror/lib/codemirror.css');
10+
//require('codemirror/theme/shadowfox.css');
1111

1212
export function GraphIqlEditor({}) {
1313
const {woqlClient,currentChangeRequest} = WOQLClientObj()
1414
if(!woqlClient) return
1515
const client = woqlClient.copy()
1616
const url = client.connectionConfig.branchBase("graphql")
17-
const autorization = woqlClient.localAuth().type === "jwt" ? 'Bearer '+ woqlClient.localAuth().key : 'Basic '+ btoa(`${woqlClient.localAuth().user}:${woqlClient.localAuth().key}`)
17+
const authorization = woqlClient.localAuth().type === "jwt" ? 'Bearer '+ woqlClient.localAuth().key : 'Basic '+ btoa(`${woqlClient.localAuth().user}:${woqlClient.localAuth().key}`)
1818

1919
// TO BE REVIEW!!!!
2020
const fetcher = createGraphiQLFetcher({
2121
url:url,
2222
headers: {
23-
authorization: autorization
23+
authorization: authorization
2424
}
2525
});
2626

@@ -29,14 +29,7 @@ export function GraphIqlEditor({}) {
2929

3030
return (
3131
<Layout mainClassName={layoutClass} showLeftSideBar={false}>
32-
33-
<GraphiQL
34-
editorTheme="shadowfox"
35-
defaultQuery={'query{}'}
36-
fetcher={fetcher}
37-
/>
38-
39-
32+
<GraphiQL defaultQuery={'query{}'} fetcher={fetcher} />
4033
</Layout>
4134
);
4235
}

‎packages/tdb-dashboard/src/pages/IndexingActionMonitor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const IndexingActionMonitor=(props)=>{
3232

3333
return <Layout>
3434
<div className="content mr-3 ml-5">
35-
<div className="mt-5 mb-5 mr-5">
35+
<div className="mb-5">
3636
{!searchableCommit.length && <DisplayNoIndexingAction helpDescription={`You need to index your data before any index actions appear on this page`}/>}
3737
{searchableCommit.length>0 && <Card>
3838
<Card.Header>

0 commit comments

Comments
 (0)