jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Passed Table props to page

Browse source
This commit is contained in:
Lucas Oliveira 2024-04-30 00:10:33 +02:00
commit ac46b2b6c9
4 changed files with 84 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/package-lock.json generated
View file

@ -48,10 +48,10 @@
"million": "^3.0.6",
"moment": "^2.29.4",
"playwright": "^1.42.0",
"react": "^18.2.0",
"react": "^18.2.21",
"react-ace": "^10.1.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-dom": "^18.2.21",
"react-error-boundary": "^4.0.11",
"react-icons": "^5.0.1",
"react-laag": "^2.0.5",

4
src/frontend/package.json
View file

@ -43,10 +43,10 @@
"million": "^3.0.6",
"moment": "^2.29.4",
"playwright": "^1.42.0",
"react": "^18.2.0",
"react": "^18.2.21",
"react-ace": "^10.1.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-dom": "^18.2.21",
"react-error-boundary": "^4.0.11",
"react-icons": "^5.0.1",
"react-laag": "^2.0.5",

92
src/frontend/src/components/tableComponent/index.tsx
View file

@ -1,89 +1,29 @@
import { ColDef, ColGroupDef } from "ag-grid-community";
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
import { AgGridReact } from "ag-grid-react";
import { ColDef,ColGroupDef } from 'ag-grid-community';
import { useState } from "react";
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
import { useDarkStore } from "../../stores/darkStore";
import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
import { cn } from "../../utils/utils";
import { Button } from "../ui/button";
export default function TableComponent() {
// Column Definitions: Defines the columns to be displayed.
const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
{ headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
{
field: "type",
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: ["Prompt", "Credential"],
valueListGap: 10,
},
flex: 1,
editable: true,
},
{
field: "value",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
flex: 2,
editable: true,
},
{
headerName: "Apply To Fields",
field: "defaultFields",
flex: 1,
editable: true,
},
]);
const [rowData, setRowData] = useState([
{
name: "OpenAI Key",
type: "Credential",
value: "apijpioj09u302j0982ejf",
defaultFields: "Open AI API Key",
},
{
name: "Prompt",
type: "Prompt",
value: `Answer user's questions based on the document below:
---
{Document}
---
Question:
{Question}
Answer:
`,
defaultFields: ["Prompt"],
},
{
name: "Azure Key",
type: "Credential",
value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
defaultFields: ["Azure API Key"],
},
]);
const TableComponent = forwardRef<
ElementRef<typeof AgGridReact>,
ComponentPropsWithoutRef<typeof AgGridReact>
>(({ ...props }, ref) => {
const dark = useDarkStore((state) => state.dark);
return (
<div className="flex h-full flex-col">
<div
className={cn(
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
"ag-theme-shadcn flex h-full flex-col pb-8"
)} // applying the grid theme
>
<AgGridReact pagination={true} columnDefs={colDefs} rowData={rowData} />
</div>
<div
className={cn(
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
"ag-theme-shadcn flex h-full flex-col pb-8"
)} // applying the grid theme
>
<AgGridReact ref={ref} pagination={true} {...props} />
</div>
</div>
);
}
});
export default TableComponent;

65
src/frontend/src/pages/GlobalVariablesPage/index.tsx
View file

@ -4,8 +4,71 @@ import { Button } from "../../components/ui/button";
import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
import ForwardedIconComponent from "../../components/genericIconComponent";
import TableComponent from "../../components/tableComponent";
import { useState } from "react";
import { ColDef, ColGroupDef } from "ag-grid-community";
export default function GlobalVariablesPage() {
// Column Definitions: Defines the columns to be displayed.
const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
{ headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
{
field: "type",
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: ["Prompt", "Credential"],
valueListGap: 10,
},
flex: 1,
editable: true,
},
{
field: "value",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
flex: 2,
editable: true,
},
{
headerName: "Apply To Fields",
field: "defaultFields",
flex: 1,
editable: true,
},
]);
const [rowData, setRowData] = useState([
{
name: "OpenAI Key",
type: "Credential",
value: "apijpioj09u302j0982ejf",
defaultFields: "Open AI API Key",
},
{
name: "Prompt",
type: "Prompt",
value: `Answer user's questions based on the document below:
---
{Document}
---
Question:
{Question}
Answer:
`,
defaultFields: ["Prompt"],
},
{
name: "Azure Key",
type: "Credential",
value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
defaultFields: ["Azure API Key"],
},
]);
return (
<div className="flex h-full w-full flex-col justify-between gap-6">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@ -33,7 +96,7 @@ export default function GlobalVariablesPage() {
</div>
<div className="flex h-full w-full flex-col justify-between">
<TableComponent />
<TableComponent columnDefs={colDefs} rowData={rowData} />
</div>
</div>
);