Skip to content

Commit

Permalink
format
Browse files Browse the repository at this point in the history
  • Loading branch information
@bracesproul
bracesproul committed Mar 18, 2024
1 parent d3b98af commit 79907f0
Show file tree
Hide file tree
Showing 10 changed files with 196 additions and 198 deletions.
110 changes: 55 additions & 55 deletions frontend/app/components/CreateExtractor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,106 +15,106 @@ import {
IconButton,
Input,
Text,
} from '@chakra-ui/react'
import { json } from '@codemirror/lang-json'
import Form from '@rjsf/chakra-ui'
import validator from '@rjsf/validator-ajv8'
import CodeMirror from '@uiw/react-codemirror'
import Ajv from 'ajv'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { suggestExtractor, useCreateExtractor } from '../utils/api'
} from "@chakra-ui/react";
import { json } from "@codemirror/lang-json";
import Form from "@rjsf/chakra-ui";
import validator from "@rjsf/validator-ajv8";
import CodeMirror from "@uiw/react-codemirror";
import Ajv from "ajv";
import React from "react";
import { useNavigate } from "react-router-dom";
import { suggestExtractor, useCreateExtractor } from "../utils/api";

import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline'
import { useMutation } from '@tanstack/react-query'
import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import { useMutation } from "@tanstack/react-query";

const ArrowUpIconImported = (props) => {
return <Icon as={ChatBubbleBottomCenterTextIcon} {...props} />
}
return <Icon as={ChatBubbleBottomCenterTextIcon} {...props} />;
};

const ajc = new Ajv()
const ajc = new Ajv();

/**
* Component to create a new extractor with fields for name, description, schema, and examples
*/
const CreateExtractor = ({}) => {
const startSchema = '{}'
const startSchema = "{}";
// You might use a mutation hook here if you're using something like React Query for state management
const [schema, setSchema] = React.useState(startSchema)
const [schema, setSchema] = React.useState(startSchema);
const [lastValidSchema, setLastValidSchema] = React.useState(
JSON.parse(startSchema)
)
const [currentSchemaValid, setCurrentSchemaValid] = React.useState(true)
const [userInput, setUserInput] = React.useState('')
JSON.parse(startSchema),
);
const [currentSchemaValid, setCurrentSchemaValid] = React.useState(true);
const [userInput, setUserInput] = React.useState("");

const suggestMutation = useMutation({
mutationFn: suggestExtractor,
onSuccess: (data) => {
let prettySchema = data.json_schema
let prettySchema = data.json_schema;

try {
prettySchema = JSON.stringify(JSON.parse(data.json_schema), null, 2)
prettySchema = JSON.stringify(JSON.parse(data.json_schema), null, 2);
} catch (e) {}

setSchema(prettySchema)
setSchema(prettySchema);
},
})
});

const navigate = useNavigate()
const navigate = useNavigate();
const { mutate, isLoading } = useCreateExtractor({
onSuccess: (data) => {
navigate(`/e/${data.uuid}`)
navigate(`/e/${data.uuid}`);
},
})
});

React.useMemo(() => {
try {
const parsedSchema = JSON.parse(schema)
ajc.compile(parsedSchema)
setCurrentSchemaValid(true)
setLastValidSchema(parsedSchema)
const parsedSchema = JSON.parse(schema);
ajc.compile(parsedSchema);
setCurrentSchemaValid(true);
setLastValidSchema(parsedSchema);
} catch (e) {
setCurrentSchemaValid(false)
setCurrentSchemaValid(false);
}
}, [schema])
}, [schema]);

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
const instruction = ''
const objectSchema = JSON.parse(schema)
event.preventDefault();
const instruction = "";
const objectSchema = JSON.parse(schema);
// Extract information from schema like name, and description
const name = objectSchema.title || 'Unnamed'
const description = objectSchema.description || ''
const name = objectSchema.title || "Unnamed";
const description = objectSchema.description || "";
// backend uses varchar(100) for description
const shortDescription =
description.length > 100
? description.substring(0, 95) + '...'
: description
? description.substring(0, 95) + "..."
: description;

mutate({
name,
description: shortDescription,
schema: objectSchema,
instruction,
})
}
});
};

const handleSuggest = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
const description = event.currentTarget.userInput.value
if (description === '') {
return
event.preventDefault();
const description = event.currentTarget.userInput.value;
if (description === "") {
return;
}
console.log(
`Making request with description: ${description} and schema: ${schema}`
)
suggestMutation.mutate({ description, jsonSchema: schema })
setUserInput('')
}
`Making request with description: ${description} and schema: ${schema}`,
);
suggestMutation.mutate({ description, jsonSchema: schema });
setUserInput("");
};

return (
<div className="w-4/5 m-auto">
<Heading size={'md'} className="m-auto w-4/5" textAlign={'center'}>
<Heading size={"md"} className="m-auto w-4/5" textAlign={"center"}>
What would you like to extract today?
</Heading>
<form className="m-auto flex flex gap-2 mt-5" onSubmit={handleSuggest}>
Expand Down Expand Up @@ -199,7 +199,7 @@ const CreateExtractor = ({}) => {
</Button>
</form>
</div>
)
}
);
};

export default CreateExtractor
export default CreateExtractor;
44 changes: 24 additions & 20 deletions frontend/app/components/Extractor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,43 @@
import { Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@chakra-ui/react'
import Form from '@rjsf/chakra-ui'
import validator from '@rjsf/validator-ajv8'
import { useGetExtractor } from '../utils/api'
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import {
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
} from "@chakra-ui/react";
import Form from "@rjsf/chakra-ui";
import validator from "@rjsf/validator-ajv8";
import { useGetExtractor } from "../utils/api";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";

import { VStack } from '@chakra-ui/react'
import SyntaxHighlighter from 'react-syntax-highlighter'
import { VStack } from "@chakra-ui/react";
import SyntaxHighlighter from "react-syntax-highlighter";

export const Extractor = ({ extractorId }: { extractorId: string }) => {
const { data, isLoading, isError } = useGetExtractor(extractorId)
const { data, isLoading, isError } = useGetExtractor(extractorId);
if (isLoading) {
return <div>Loading...</div>
return <div>Loading...</div>;
}
if (isError) {
return <div>Error</div>
return <div>Error</div>;
}

if (data === undefined) {
throw new Error('Data is undefined')
throw new Error("Data is undefined");
}
console.log(data.schema)
console.log(data.schema);

return (
<div className="mr-auto">
<Tabs className="mt-5" variant={'enclosed'} colorScheme="blue" size="sm">
<Tabs className="mt-5" variant={"enclosed"} colorScheme="blue" size="sm">
<TabList>
<Tab>Form</Tab>
<Tab>Code</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Form
schema={data.schema}
validator={validator}
></Form>
<Form schema={data.schema} validator={validator}></Form>
</TabPanel>
<TabPanel>
<Text className="mt-1 mb-5">
Expand All @@ -46,13 +50,13 @@ export const Extractor = ({ extractorId }: { extractorId: string }) => {
</TabPanel>
</TabPanels>
</Tabs>
<VStack align={'left'}>
<VStack align={"left"}>
{/* TO DO ADD SYSTEM MESSAGE */}
{/* <Text>
<strong>System Message: </strong>
{data.instruction}
</Text> */}
</VStack>
</div>
)
}
);
};
52 changes: 26 additions & 26 deletions frontend/app/components/Playground.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,57 @@
import { Button, Textarea } from '@chakra-ui/react'
import { useMutation } from '@tanstack/react-query'
import { useParams } from 'react-router'
import { runExtraction } from '../utils/api'
import { Extractor } from './Extractor'
import { ResultsTable } from './ResultsTable'
import { Button, Textarea } from "@chakra-ui/react";
import { useMutation } from "@tanstack/react-query";
import { useParams } from "react-router";
import { runExtraction } from "../utils/api";
import { Extractor } from "./Extractor";
import { ResultsTable } from "./ResultsTable";

import React from 'react'
import React from "react";

/**
* Playground to work with an existing extractor.
*/
export const Playground = () => {
const { extractorId } = useParams()
const { extractorId } = useParams();
const { data, isPending, mutate } = useMutation({
mutationFn: runExtraction,
})
const [isDisabled, setIsDisabled] = React.useState(false)
});
const [isDisabled, setIsDisabled] = React.useState(false);
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
event.preventDefault();

const request = {
extractor_id: extractorId,
}
};

if (event.currentTarget.text.value) {
Object.assign(request, { text: event.currentTarget.text.value })
Object.assign(request, { text: event.currentTarget.text.value });
} else {
Object.assign(request, { file: event.currentTarget.file.files[0] })
Object.assign(request, { file: event.currentTarget.file.files[0] });
}

mutate(request)
}
mutate(request);
};

const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
if (
event.currentTarget.text.value === '' &&
event.currentTarget.text.value === "" &&
event.currentTarget.file.files.length === 0
) {
setIsDisabled(true)
return
setIsDisabled(true);
return;
} else {
// Also disable if both are present
if (
event.currentTarget.text.value !== '' &&
event.currentTarget.text.value !== "" &&
event.currentTarget.file.files.length !== 0
) {
setIsDisabled(true)
return
setIsDisabled(true);
return;
}
}

setIsDisabled(false)
}
setIsDisabled(false);
};

return (
<div className="w-full flex-col justify-between">
Expand Down Expand Up @@ -81,5 +81,5 @@ export const Playground = () => {
<ResultsTable data={data} isPending={isPending} />
</div>
</div>
)
}
);
};
Loading

0 comments on commit 79907f0

Please sign in to comment.