Merge pull request #19 from cophilot/adapt-new-changes

Adapt new changes

package.json

@@ -18,7 +18,6 @@
 		"prepare": "husky install",
 		"generate": "python scripts/generate.py",
 		"g": "python scripts/generate.py",
-		"todo": "python scripts/todo.py",
 		"comment:check": "python scripts/check_comment.py",
 		"backend:check": "python scripts/check_backend.py",
 		"backend:create": "npm run backend:create:tables",

src/components/DocBaseOverview/DocBaseOverview.tsx

@@ -5,7 +5,10 @@ import './DocBaseOverview.scss';
 import APIService from '../../utils/ApiService';
 import MyDocument from '../../types/MyDocument';
 import { Link } from 'react-router-dom';
-import { useLoadDocbaseTask } from '../../providers/DocBaseTaskProvider';
+import {
+	useLoadDocbaseTask,
+	useStartInteractiveTablePopulation,
+} from '../../providers/DocBaseTaskProvider';
 import {
 	useShowChoiceNotification,
 	useShowNotification,
@@ -29,6 +32,8 @@ function DocBaseOverview({ organizationProp }: Props) {
 	const showNotification = useShowNotification();
 	const getOrganizations = useGetOrganizations();
 	const loadDocbaseTask = useLoadDocbaseTask();
+	const startDocBaseInteractiveTablePopulation =
+		useStartInteractiveTablePopulation();
 
 	useEffect(() => {
 		APIService.getOrganizationNames().then((orgs) => {
@@ -66,6 +71,10 @@ function DocBaseOverview({ organizationProp }: Props) {
 		loadDocbaseTask(selectedOrgID, document.name);
 	};
 
+	const startInteractiveTablePopulation = (document: MyDocument) => {
+		startDocBaseInteractiveTablePopulation(selectedOrgID, document.name);
+	};
+
 	const removeDocument = (document: MyDocument) => {
 		showChoiceNotification(
 			'Delete DocBase',
@@ -168,6 +177,14 @@ function DocBaseOverview({ organizationProp }: Props) {
 							>
 								View DocBase
 							</Icon>
+							<Icon
+								cls="bi bi-check-square icon"
+								onClicked={() => {
+									startInteractiveTablePopulation(docBase);
+								}}
+							>
+								Start interactive table population
+							</Icon>
 							<Icon
 								cls="bi bi-x-circle"
 								onClicked={() => {

src/components/DocbaseViewer/DocbaseViewer.tsx

@@ -47,18 +47,15 @@ function DocbaseViewer({ docBase, onClose }: Props) {
 						onClose();
 					}}
 				></AttributeAdder>
-				{/* <ul className="ver">
-					{docBase.attributes.map((attribute, index) => {
-						return (
-							<li key={index}>
-								<b>{attribute}</b>
-							</li>
-						);
-					})}
-				</ul> */}
 				<h2>Documents</h2>
 				{docBase.docs.map((doc, index) => {
-					return <NuggetDocumentViewer key={index} doc={doc} />;
+					return (
+						<NuggetDocumentViewer
+							key={index}
+							doc={doc}
+							docBase={docBase}
+						/>
+					);
 				})}
 				<button className="btn mb ml mt" onClick={onClose}>
 					Close

src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.scss

@@ -0,0 +1,53 @@
+.InteractiveDocBaseViewer {
+	width: 90%;
+	height: 80%;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: var(--bg-color);
+	overflow-y: scroll;
+	border-radius: 15px;
+	border: 2px solid var(--text-color);
+	z-index: 999;
+	padding: 40px;
+	.buffer {
+		height: 150px;
+		width: 10px;
+	}
+}
+
+.closeBtn {
+	position: fixed;
+	top: 9%;
+	right: 5%;
+	cursor: pointer;
+	z-index: 1000;
+	font-size: 30px;
+	cursor: pointer;
+	color: var(--text-color);
+	font-weight: bold;
+	&:hover {
+		scale: 1.15;
+	}
+}
+
+.infobar {
+	position: fixed;
+	left: 50%;
+	top: 85%;
+
+	transform: translateX(-50%);
+	background-color: var(--btn-color);
+	z-index: 1000;
+	width: 90%;
+	border-radius: 15px;
+	border: 2px solid var(--text-color);
+	padding-left: 20px;
+	padding-right: 20px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-shadow: 0px 0px 10px 10px #00000079;
+	font-size: 20px;
+}

src/components/InteractiveDocBaseViewer/InteractiveDocBaseViewer.tsx

@@ -0,0 +1,51 @@
+import DocBase from '../../types/DocBase';
+import NuggetDocumentViewer from '../NuggetViewer/NuggetDocumentViewer';
+import './InteractiveDocBaseViewer.scss';
+
+interface Props {
+	docBase: DocBase;
+	onClose: () => void;
+}
+
+/**
+ * A popup that displays a DocBases
+ * @param docBase The docbase to view
+ */
+function InteractiveDocBaseViewer({ docBase }: Props) {
+	return (
+		<>
+			<div
+				className="background"
+				style={{
+					zIndex: 100,
+				}}
+			></div>
+
+			<div className="InteractiveDocBaseViewer">
+				<h1>Interactive Table Population Editor</h1>
+				<h2>
+					DocBase: <i>{docBase.name}</i>
+				</h2>
+
+				<h2>Documents</h2>
+				{docBase.docs.map((doc, index) => {
+					return (
+						<NuggetDocumentViewer
+							key={index}
+							doc={doc}
+							interactive={true}
+							docBase={docBase}
+						/>
+					);
+				})}
+				<div className="buffer"></div>
+			</div>
+			<div className="infobar">
+				<p>
+					<i>Attribute</i>: <b>{docBase.attributes.join(', ')}</b>
+				</p>
+			</div>
+		</>
+	);
+}
+export default InteractiveDocBaseViewer;

src/components/NuggetText/NuggetText.scss

@@ -5,7 +5,7 @@
 }
 
 .highlighted-unselected {
-	background-color: rgba(255, 255, 0, 0.4);
+	background-color: rgba(255, 255, 0, 0.2);
 	color: black;
 	border-radius: 5px;
 }
@@ -14,7 +14,7 @@
 	overflow-x: scroll;
 }
 .nugget {
-	background-color: rgba(255, 255, 0, 0.4);
+	background-color: rgba(255, 255, 0, 0.2);
 	color: black;
 	border-radius: 5px;
 	padding: 5px;
@@ -30,8 +30,21 @@
 	background-color: rgb(255, 255, 0);
 }
 
+.attribute-label {
+	order: 1;
+	font-size: 0.8rem;
+	font-weight: bold;
+	background-color: red;
+}
+
+.ghf {
+	order: 2;
+	align-self: baseline; // Add this line
+}
+
 pre {
-	font-size: 1rem;
+	font-size: 1.2rem;
+	line-height: 2;
 	padding-left: 20px;
 	padding-right: 20px;
 	padding-top: 10px;

src/components/NuggetText/NuggetText.tsx

@@ -2,17 +2,20 @@ import React from 'react';
 import NuggetDocument from '../../types/NuggetDocument';
 import './NuggetText.scss';
 import Nugget from '../../types/Nugget';
+import Icon from '../Icon/Icon';
+import Logger from '../../utils/Logger';
 
 interface Props {
 	doc: NuggetDocument;
+	interactive?: boolean;
 }
 
 /**
  * Displays a NuggetDocuments content and highlights the nuggets
  * @param param0 The nuggget document to display
  * @returns
  */
-function NuggetText({ doc }: Props) {
+function NuggetText({ doc, interactive = false }: Props) {
 	const [selectedNugget, setSelectedNugget] = React.useState<
 		Nugget | undefined
 	>(undefined);
@@ -44,17 +47,53 @@ function NuggetText({ doc }: Props) {
 					index > 0 ? normalizedIntervals[index - 1].end : 0,
 					start
 				)}
-				<span
-					className={
-						selectedNugget === undefined
-							? 'highlighted'
-							: selectedNugget.startChar == start &&
-							    selectedNugget.endChar == end
-							  ? 'highlighted'
-							  : 'highlighted-unselected'
-					}
-				>
-					{text.substring(start, end)}
+				<span className="box">
+					{/* 					<span className="attribute-label">att</span>
+					 */}
+					<span
+						className={
+							selectedNugget === undefined
+								? 'ghf highlighted'
+								: selectedNugget.startChar == start &&
+								    selectedNugget.endChar == end
+								  ? 'ghf highlighted'
+								  : 'ghf highlighted-unselected'
+						}
+					>
+						<span>{text.substring(start, end)}</span>
+						{interactive && (
+							<>
+								<Icon
+									style={{
+										color: 'black',
+										fontSize: '1.2rem',
+										marginRight: '5px',
+										paddingRight: '10px',
+									}}
+									cls="bi bi-hand-thumbs-up icon ml"
+									onClicked={() => {
+										Logger.log('Confirm Nugget');
+										alert('Not implemented');
+									}}
+								>
+									Confirm Nugget
+								</Icon>
+								{/* <Icon
+									style={{
+										color: 'black',
+										fontSize: '1.2rem',
+										paddingRight: '10px',
+									}}
+									cls="bi bi-hand-thumbs-down icon"
+									onClicked={() => {
+										Logger.log('Decline Nugget');
+									}}
+								>
+									Decline Nugget
+								</Icon> */}
+							</>
+						)}
+					</span>
 				</span>
 			</React.Fragment>
 		))

src/components/NuggetViewer/NuggetDocumentViewer.tsx

@@ -1,24 +1,50 @@
 import NuggetDocument from '../../types/NuggetDocument';
+import Icon from '../Icon/Icon';
 import NuggetText from '../NuggetText/NuggetText';
 import './NuggetDocumentViewer.scss';
+import { useGetOrderedNuggets } from '../../providers/DocBaseTaskProvider';
+import DocBase from '../../types/DocBase';
 
 interface Props {
+	docBase: DocBase;
 	doc: NuggetDocument;
+	interactive?: boolean;
 }
 
 /**
  * This displays a NuggetDocument
  * @param doc The NuggetDocument to display
  */
-function NuggetDocumentViewer({ doc }: Props) {
+function NuggetDocumentViewer({ docBase, doc, interactive = false }: Props) {
+	const getOrderedNuggets = useGetOrderedNuggets();
+
 	return (
 		<div className="ver">
 			<p>
 				<b>
 					Document: <i>{doc.name}</i>
 				</b>
+				{!interactive && (
+					<Icon
+						cls="bi bi-info-circle ml"
+						style={{
+							//TODO
+							display: 'none',
+						}}
+						onClicked={() => {
+							getOrderedNuggets(
+								docBase.organizationId,
+								docBase.name,
+								doc.name,
+								doc.content
+							);
+						}}
+					>
+						Get more information about this document
+					</Icon>
+				)}
 			</p>
-			<NuggetText doc={doc} />
+			<NuggetText doc={doc} interactive={interactive} />
 		</div>
 	);
 }