From 16645d19498d4b2596d58c849863df814bce6948 Mon Sep 17 00:00:00 2001 From: elfarsif Date: Fri, 26 Jul 2024 13:23:49 -0400 Subject: [PATCH 1/2] feat : highlight based on suggestionType --- ui/src/components/Layout.tsx | 136 +++++++++++++++++++++++++++++++-- ui/src/components/ui/table.tsx | 117 ++++++++++++++++++++++++++++ 2 files changed, 246 insertions(+), 7 deletions(-) create mode 100644 ui/src/components/ui/table.tsx diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx index ccaf6c8..e9b49a6 100644 --- a/ui/src/components/Layout.tsx +++ b/ui/src/components/Layout.tsx @@ -2,16 +2,138 @@ import { Outlet } from 'react-router-dom' import Navbar from '@/components/Navbar' import PageHeader from '@/components/PageHeader' +import { Textarea } from '@/components/ui/textarea' +import { Separator } from '@/components/ui/separator' + +import { + Table, + TableBody, + TableCaption, + TableCell, + TableFooter, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table" +import { text } from 'stream/consumers' + +const texts = [ + { + editing:"Born in Scranton, Pennsylvania, Biden moved with his family to Delaware in 1953.", + reference:"Joseph Robinette Biden, Jr, commonly known as Joe Biden (/d͡ʒoʊ ˈbaɪ.dən/a), born November 20, 1942 in Scranton, Pennsylvania, is an American statesman. He settled in Delaware after leaving his hometown with his family in 1953.", + suggestedContribution: "Canada has 35 million people", + suggestionType : "change" + }, + { + + editing:"He also oversaw six U.S. Supreme Court confirmation hearings, including the contentious hearings for Robert Bork and Clarence Thomas.", + reference:"", + suggestedContribution: "Canada has 35 million people", + suggestionType : "no change" + }, + { + + editing:"He also oversaw six U.S. Supreme Court confirmation hearings, including the contentious hearings for Robert Bork and Clarence Thomas.", + reference:"", + suggestedContribution: "Canada has 35 million people", + suggestionType : "no change" + }, + { + + editing:"He also oversaw six U.S. Supreme Court confirmation hearings, including the contentious hearings for Robert Bork and Clarence Thomas.", + reference:"", + suggestedContribution: "Canada has 35 million people", + suggestionType : "no change" + }, + { + + editing:"He also oversaw six U.S. Supreme Court confirmation hearings, including the contentious hearings for Robert Bork and Clarence Thomas.", + reference:"", + suggestedContribution: "Canada has 35 million people", + suggestionType : "no change" + }, + { + + editing:"He graduated from the University of Delaware in 1965 before earning his law degree from Syracuse University in 1968.", + reference:"He studied at the University of Delaware before earning a law degree from Syracuse University in 1968.", + suggestedContribution: "Canada has 35 million people", + suggestionType : "change" + }, + { + + editing:"He was elected to the New Castle County Council in 1970 and to the U.S. Senate in 1972.", + reference:"He was elected to the county council from New Castle in 1970. At age 30, Joe Biden becomes the sixth youngest senator in the country's history, having been elected to the United States Senate in 1972.", + suggestedContribution: "Canada has 35 million people", + suggestionType : "change" + }, + { + + editing:"As a senator, Biden drafted and led the effort to pass the Violent Crime Control and Law Enforcement Act and the Violence Against Women Act.", + reference:"Considered a moderate Democrat, he chairs the Judiciary and Criminal Committee of the upper house of Congress from 1987 to 1995 and also chaired the Senate Foreign Affairs Committee twice between 2001 and 2009.", + suggestedContribution: "Canada has 35 million people", + suggestionType : "change" + }, + { + + editing:"He also oversaw six U.S. Supreme Court confirmation hearings, including the contentious hearings for Robert Bork and Clarence Thomas.", + reference:"", + suggestedContribution: "Canada has 35 million people", + suggestionType : "no change" + }, + { + + editing:"He also oversaw six U.S. Supreme Court confirmation hearings, including the contentious hearings for Robert Bork and Clarence Thomas.", + reference:"", + suggestedContribution: "Canada has 35 million people", + suggestionType : "no change" + }, + { + + editing:"", + reference:"He is the oldest president in U.S. history and the first to have a female vice presiden", + suggestedContribution: "Canada has 35 million people", + suggestionType : "addition" + }, + { + + editing:"Biden ran unsuccessfully for the 1988 and 2008 Democratic presidential nominations.", + reference:"Unsuccessful candidate in the Democratic primaries for the presidential election of 1988 and again in 2008,", + suggestedContribution: "Canada has 35 million people", + suggestionType : "change" + }, + +] const Layout = () => { + const getColorClass = (type: any) => { + switch (type) { + case 'change': + return 'bg-green-100'; + case 'addition': + return 'bg-red-100'; + default: + return ''; + } + }; + return ( -
- -
- - -
-
+ + + + Referenced Article + Original Article + + + + {texts.map((text) => ( + + {text.reference} + {text.editing} + + ))} + +
+ ) } diff --git a/ui/src/components/ui/table.tsx b/ui/src/components/ui/table.tsx new file mode 100644 index 0000000..7f3502f --- /dev/null +++ b/ui/src/components/ui/table.tsx @@ -0,0 +1,117 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)) +Table.displayName = "Table" + +const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableHeader.displayName = "TableHeader" + +const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableBody.displayName = "TableBody" + +const TableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:border-b-0", + className + )} + {...props} + /> +)) +TableFooter.displayName = "TableFooter" + +const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableRow.displayName = "TableRow" + +const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableHead.displayName = "TableHead" + +const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableCell.displayName = "TableCell" + +const TableCaption = React.forwardRef< + HTMLTableCaptionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableCaption.displayName = "TableCaption" + +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableHead, + TableRow, + TableCell, + TableCaption, +} From 7a7cdd7d08aa6b0c669a3bd2683dd25676e645ca Mon Sep 17 00:00:00 2001 From: elfarsif Date: Sat, 17 Aug 2024 13:30:10 -0400 Subject: [PATCH 2/2] feat : diff table demo --- ui/forge.config.js | 2 +- ui/package.json | 2 +- ui/src/components/Layout.tsx | 33 ++++++++++++++++++--------------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/ui/forge.config.js b/ui/forge.config.js index 6c7f31c..49e17b5 100644 --- a/ui/forge.config.js +++ b/ui/forge.config.js @@ -5,7 +5,7 @@ module.exports = { config: { repository: { owner: 'frankfarsi', - name: 'project-symmetry-semantic-comparison-alpha' + name: 'symmetry' }, prerelease: false, draft: true diff --git a/ui/package.json b/ui/package.json index 4d00780..c92ba10 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,6 +1,6 @@ { "name": "project_symmetry", - "productName": "symmetry", + "productName": "project_symmetry", "version": "1.0.5", "author": "Gerybox", "description": "Cross language wikipedia article gap analysis tool", diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx index e9b49a6..ba2e805 100644 --- a/ui/src/components/Layout.tsx +++ b/ui/src/components/Layout.tsx @@ -117,22 +117,25 @@ const Layout = () => { }; return ( - - - - Referenced Article - Original Article +
+
+ + + Referenced Article + Original Article + + + + {texts.map((text) => ( + + {text.reference} + {text.editing} - - - {texts.map((text) => ( - - {text.reference} - {text.editing} - - ))} - -
+ ))} + +
+ +
) }