Function MappingData

app/src/components/ImportDataDialog.tsx:294–581

()

}

const MappingData = () => {
  const columnNames = useImportData((state) => state.columnNames);
  const columnSelectionValues = useMemo(
    () =>
      columnNames.map((name) => ({
        text: name,
        value: name,
      })),
    [columnNames]
  );
  const columnSelectionValuesWithNone = useMemo(
    () => [
      {
        text: "None",
        value: "",
      },
      ...columnSelectionValues,
    ],
    [columnSelectionValues]
  );
  const columnValues = useImportData((state) => state.columnValues);
  const [formState, setFormState] = useState<ImportDataFormType>({
    idColumn: columnNames[0],
    nodeLabelColumn: columnNames[0],
    edgesDeclared: "none",
  });

  const handleFormChange = (name: string, value: string) => {
    setFormState((prevState) => ({ ...prevState, [name]: value }));
  };

  const processingErrorMessage = useImportData(
    (state) => state.processingErrorMessage
  );

  const onSubmit = useMutation(
    "process-data",
    async (formState: ImportDataFormType) => {
      await fetch("/api/data/process", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          mapping: formState,
          data: useImportData.getState().records,
        }),
      }).then((res) => {
        if (res.ok) {
          // move to the next step
          (
            res.json() as Promise<{
              numNodes: number;
              numEdges: number;
              graphString: string;
            }>
          ).then((data) => {
            // here we would set the final data and ask for confirmation