-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add @types/wicg-file-system-access * Add file saving helper to use native save dialog * Implement FileButton locally, fixing bug choosing same file * Fix layout when clearing and loading the same graph * Import and export graph data * Update changelog * Change “import” to “load” * Prefer not found message when all not found * Improved default file name * Fix lint error
- Loading branch information
Showing
16 changed files
with
1,124 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import * as React from "react"; | ||
| import { Slot } from "@radix-ui/react-slot"; | ||
| import Button from "./Button"; | ||
|
|
||
| export interface FileButtonProps | ||
| extends React.ComponentPropsWithoutRef<typeof Button> { | ||
| asChild?: boolean; | ||
| onChange?: (files: FileList | null) => void; | ||
| accept?: string; | ||
| multiple?: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * A wrapper around whatever button you want to open a file dialog. It will | ||
| * automatically open the file dialog when clicked. | ||
| * | ||
| * @example | ||
| * <FileButton onChange={files => console.log(files)} asChild> | ||
| * <Button>Open File</Button> | ||
| * </FileButton> | ||
| */ | ||
| export const FileButton = React.forwardRef<HTMLButtonElement, FileButtonProps>( | ||
| ( | ||
| { asChild, onChange, accept, multiple, isDisabled, children, ...props }, | ||
| ref | ||
| ) => { | ||
| const inputRef = React.useRef<HTMLInputElement | null>(null); | ||
|
|
||
| const handleClick = () => { | ||
| !isDisabled && inputRef.current?.click(); | ||
| }; | ||
|
|
||
| const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const files = event.target.files; | ||
| onChange?.(files); | ||
| // Reset the input value to allow selecting the same file again | ||
| event.target.value = ""; | ||
| }; | ||
|
|
||
| const Component = asChild ? (Slot as any) : Button; | ||
|
|
||
| return ( | ||
| <> | ||
| <Component ref={ref} type="button" onClick={handleClick} {...props}> | ||
| {children} | ||
| </Component> | ||
| <input | ||
| ref={inputRef} | ||
| type="file" | ||
| accept={accept} | ||
| multiple={multiple} | ||
| onChange={handleChange} | ||
| disabled={isDisabled} | ||
| className="hidden" | ||
| aria-hidden | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| FileButton.displayName = "FileButton"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
packages/graph-explorer/src/modules/GraphViewer/ExportGraphButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { useCallback } from "react"; | ||
| import { useRecoilValue } from "recoil"; | ||
| import { SaveIcon } from "lucide-react"; | ||
| import { nodesAtom, edgesAtom, useExplorer, useConfiguration } from "@/core"; | ||
| import { saveFile, toJsonFileData } from "@/utils/fileData"; | ||
| import { PanelHeaderActionButton } from "@/components"; | ||
| import { createDefaultFileName, createExportedGraph } from "./exportedGraph"; | ||
|
|
||
| export function ExportGraphButton() { | ||
| const exportGraph = useExportGraph(); | ||
|
|
||
| return ( | ||
| <PanelHeaderActionButton | ||
| icon={<SaveIcon />} | ||
| label="Save graph to file" | ||
| onActionClick={() => exportGraph()} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export function useExportGraph() { | ||
| const vertexIds = useRecoilValue(nodesAtom).keys().toArray(); | ||
| const edgeIds = useRecoilValue(edgesAtom).keys().toArray(); | ||
| const connection = useExplorer().connection; | ||
| const config = useConfiguration(); | ||
|
|
||
| const exportGraph = useCallback(async () => { | ||
| const fileName = createDefaultFileName( | ||
| config?.displayLabel ?? "Connection" | ||
| ); | ||
| const exportData = createExportedGraph(vertexIds, edgeIds, connection); | ||
| const fileToSave = toJsonFileData(exportData); | ||
| await saveFile(fileToSave, fileName); | ||
| }, [config?.displayLabel, connection, vertexIds, edgeIds]); | ||
|
|
||
| return exportGraph; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.