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

refactor: update keyboard shortcuts display (#3316)

Browse source 
* remove repeated code

* refactor: remove useless code

* feat: sort input parameters in GenericNode renderInputParameter

* refactor: remove unused code in GenericNode component

* refactor: add NodeName component for displaying and editing node names

* refactor: add NodeDescription component for displaying and editing node descriptions

* fix import and add autofocus on nodeName

* feat: add NodeStatus component for displaying and managing node status

* [autofix.ci] apply automated fixes

* refactor: remove unused code in GenericNode component

* fix bugs on minimize

* [autofix.ci] apply automated fixes

* refactor: remove unused code and handle count in GenericNodeToolbar component

* refactor: Add useShortcuts hook for handling keyboard shortcuts in nodeToolbarComponent

* refactor: Add keyboard shortcuts handling to nodeToolbarComponent need to test

* refactor: Update FreezeAllVertices function in NodeToolbarComponent

* feat: Add getNodeLength function to calculate the length of a node's template fields

* refactor: Update RenderIcons component to use navigator.platform for detecting macOS

* refactor: Add ShortcutDisplay component to nodeToolbarComponent

* refactor: Update nodeToolbarComponent to remove RenderIcons and add ShortcutDisplay

* refactor: Improve keyboard shortcuts handling in nodeToolbarComponent

* [autofix.ci] apply automated fixes

* refactor: Add OptionIcon to nodeIconsLucide

* feat: Add SHORTCUT_KEYS constant

* feat: Add SHORTCUT_KEYS constant

* refactor: Add RenderKey component for rendering keyboard shortcuts

* refactor: Update RenderIcons component to use RenderKey for rendering keyboard shortcuts

* update shortcut page to use shortcut icons

* [autofix.ci] apply automated fixes

* Update Astra link in README.md (#3314)

* Update link in README.md

* Update README.md

* Update getting-started-installation.md

* Update README.KR.md

* Update README.ja.md

* refactor: Simplify NodeToolbarComponent's save flow logic

* [autofix.ci] apply automated fixes

* feat: Google Drive Search Component (#3319)

* feat: Google Drive Search Component

feat: Google Drive Search Component
Ability to search Google Drive and get back the relevant Doc id or Doc urls

* Updated Google Drive Search.py

* feat: Add support for metadata filtering and namespaces for the Upstash Vector component (#3254)

* feat: add metadata filtering and namespace support for the upstash vector component

* docs: add upstash vector to the vectorstores doc

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* ci: Update pytest configuration and add pytest-flakefinder. (#3330)

* chore: Refactor NodeToolbarComponent to simplify code structure

* [autofix.ci] apply automated fixes

* refactor: Simplify NodeToolbarComponent's save flow logic

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Alex Leventer <3254549+alexleventer@users.noreply.github.com>
Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
Co-authored-by: ytkimirti <yusuftaha9@gmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
This commit is contained in:
anovazzi1 2024-08-14 12:28:46 -03:00 • committed by GitHub
commit 0e2f27736c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 115 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/frontend/src/components/renderIconComponent/components/renderKey/index.tsx Normal file
View file

@ -0,0 +1,37 @@
import ForwardedIconComponent from "@/components/genericIconComponent";
import { IS_MAC } from "@/constants/constants";
import { cn } from "@/utils/utils";
export default function RenderKey({
value,
tableRender,
}: {
value: string;
tableRender?: boolean;
}): JSX.Element {
const check = value.toLowerCase().trim();
return (
<div>
{check === "shift" ? (
<ForwardedIconComponent
name="ArrowBigUp"
className={cn(tableRender ? "h-5 w-5" : "h-4 w-4")}
/>
) : check === "ctrl" && IS_MAC ? (
<span>⌃</span>
) : check === "alt" && IS_MAC ? (
<ForwardedIconComponent
name="OptionIcon"
className={cn(tableRender ? "h-4 w-4" : "h-3 w-3")}
/>
) : check === "cmd" ? (
<ForwardedIconComponent
name="Command"
className={cn(tableRender ? "h-4 w-4" : "h-3 w-3")}
/>
) : (
<span>{value}</span>
)}
</div>
);
}

59
src/frontend/src/components/renderIconComponent/index.tsx
View file

@ -1,52 +1,27 @@
import ForwardedIconComponent from "../genericIconComponent";
import { IS_MAC } from "@/constants/constants";
import { addPlusSignes, cn, sortShortcuts } from "@/utils/utils";
import RenderKey from "./components/renderKey";
export default function RenderIcons({
isMac = navigator.platform.toUpperCase().includes("MAC"),
hasShift,
filteredShortcut,
shortcutWPlus,
tableRender = false,
}: {
isMac?: boolean;
hasShift: boolean;
filteredShortcut: string[];
shortcutWPlus: string[];
tableRender?: boolean;
}): JSX.Element {
return hasShift ? (
<span className="flex items-center justify-center gap-0.5 text-xs">
{isMac ? (
<ForwardedIconComponent name="Command" className="h-3 w-3" />
) : (
filteredShortcut[0]
const shortcutList = addPlusSignes([...filteredShortcut].sort(sortShortcuts));
return (
<span
className={cn(
"flex items-center gap-0.5",
tableRender ? "justify-start" : "justify-center text-xs",
)}
<ForwardedIconComponent name="ArrowBigUp" className="h-4 w-4" />
{filteredShortcut.map((key, idx) => {
if (idx > 0) {
return key.toUpperCase();
}
return null;
})}
</span>
) : (
<span className="flex items-center justify-center gap-0.5 text-xs">
{shortcutWPlus[0].toLowerCase() === "space" ? (
"Space"
) : shortcutWPlus[0].length <= 1 ? (
shortcutWPlus[0]
) : isMac ? (
<ForwardedIconComponent name="Command" className="h-3 w-3" />
) : (
<span className="flex items-center">{shortcutWPlus[0]}</span>
)}
{shortcutWPlus.map((key, idx) => {
if (idx > 0) {
return (
<span key={idx} className="flex items-center">
{key.toUpperCase()}
</span>
);
}
return null;
})}
>
{shortcutList.map((key, index) => (
<span key={index}>
<RenderKey value={key} tableRender={tableRender} />
</span>
))}
</span>
);
}

2
src/frontend/src/constants/constants.ts
View file

@ -886,3 +886,5 @@ export const LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV =
export const TEXT_FIELD_TYPES: string[] = ["str", "SecretStr"];
export const NODE_WIDTH = 400;
export const NODE_HEIGHT = NODE_WIDTH * 3;
export const SHORTCUT_KEYS = ["cmd", "ctrl", "alt", "shift"];

17
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/shortcutDisplay/index.tsx
View file

@ -7,29 +7,14 @@ export default function ShortcutDisplay({
name: string;
shortcut: string;
}): JSX.Element {
let hasShift: boolean = false;
const fixedShortcut = shortcut?.split("+");
fixedShortcut.forEach((key) => {
if (key.toLowerCase().includes("shift")) {
hasShift = true;
}
});
const filteredShortcut = fixedShortcut.filter(
(key) => !key.toLowerCase().includes("shift"),
);
let shortcutWPlus: string[] = [];
if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
return (
<div className="flex justify-center">
<span> {name} </span>
<span
className={`ml-3 flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-lg text-muted-foreground`}
>
<RenderIcons
hasShift={hasShift}
filteredShortcut={filteredShortcut}
shortcutWPlus={shortcutWPlus}
/>
<RenderIcons filteredShortcut={fixedShortcut} />
</span>
</div>
);

19
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
View file

@ -11,19 +11,7 @@ export default function ToolbarSelectItem({
ping,
shortcut,
}: toolbarSelectItemProps) {
let hasShift = false;
const fixedShortcut = shortcut?.split("+");
fixedShortcut.forEach((key) => {
if (key.toLowerCase().includes("shift")) {
hasShift = true;
}
});
const filteredShortcut = fixedShortcut.filter(
(key) => !key.toLowerCase().includes("shift"),
);
let shortcutWPlus: string[] = [];
if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
return (
<div className={`flex ${style}`} data-testid={dataTestId}>
<ForwardedIconComponent
@ -40,12 +28,7 @@ export default function ToolbarSelectItem({
<span
className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-muted-foreground`}
>
<RenderIcons
isMac={IS_MAC}
hasShift={hasShift}
filteredShortcut={filteredShortcut}
shortcutWPlus={shortcutWPlus}
/>
<RenderIcons filteredShortcut={fixedShortcut} />
</span>
</div>
);

8
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx Normal file
View file

@ -0,0 +1,8 @@
import RenderIcons from "@/components/renderIconComponent";
import { CustomCellRendererProps } from "ag-grid-react";
export default function CellRenderShortcuts(params: CustomCellRendererProps) {
const shortcut = params.value;
const splitShortcut = shortcut?.split("+");
return <RenderIcons filteredShortcut={splitShortcut} tableRender />;
}

11
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import useAlertStore from "../../../../../stores/alertStore";
import RenderKey from "@/components/renderIconComponent/components/renderKey";
import ForwardedIconComponent from "../../../../../components/genericIconComponent";
import { Button } from "../../../../../components/ui/button";
import BaseModal from "../../../../../modals/baseModal";
@ -11,7 +12,6 @@ export default function EditShortcutButton({
children,
shortcut,
defaultShortcuts,
defaultCombination,
open,
setOpen,
disable,
@ -20,7 +20,6 @@ export default function EditShortcutButton({
children: JSX.Element;
shortcut: string[];
defaultShortcuts: Array<{ name: string; shortcut: string }>;
defaultCombination: string;
open: boolean;
setOpen: (bool: boolean) => void;
disable?: boolean;
@ -161,10 +160,10 @@ export default function EditShortcutButton({
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Content>
<div className="align-center flex h-full w-full justify-center gap-4 rounded-md border border-border py-2">
<div className="flex items-center justify-center text-center text-lg font-bold">
{key === null
? shortcutInitialValue?.toUpperCase()
: key.toUpperCase()}
<div className="flex items-center justify-center gap-0.5 text-center text-lg font-bold">
{(key ?? shortcutInitialValue ?? "").split("+").map((k, i) => (
<RenderKey key={i} value={k} tableRender />
))}
</div>
</div>
</BaseModal.Content>

6
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
View file

@ -1,9 +1,11 @@
import { ColDef } from "ag-grid-community";
import { useEffect, useState } from "react";
import ForwardedIconComponent from "../../../../components/genericIconComponent";
import TableComponent from "../../../../components/tableComponent";
import { Button } from "../../../../components/ui/button";
import { defaultShortcuts } from "../../../../constants/constants";
import { useShortcutsStore } from "../../../../stores/shortcuts";
import CellRenderShortcuts from "./CellRenderWrapper";
import EditShortcutButton from "./EditShortcutButton";
export default function ShortcutsPage() {
@ -12,7 +14,7 @@ export default function ShortcutsPage() {
const setShortcuts = useShortcutsStore((state) => state.setShortcuts);
// Column Definitions: Defines the columns to be displayed.
const colDefs = [
const colDefs: ColDef[] = [
{
headerName: "Functionality",
field: "name",
@ -26,6 +28,7 @@ export default function ShortcutsPage() {
flex: 2,
editable: false,
resizable: false,
cellRenderer: CellRenderShortcuts,
},
];
@ -73,7 +76,6 @@ export default function ShortcutsPage() {
{open && (
<EditShortcutButton
disable={selectedRows.length === 0}
defaultCombination={combinationToEdit[0]?.shortcut}
shortcut={selectedRows}
defaultShortcuts={shortcuts}
open={open}

3
src/frontend/src/utils/styleUtils.ts
View file

@ -99,6 +99,7 @@ import {
MoonIcon,
MoreHorizontal,
Network,
OptionIcon,
Package2,
Palette,
Paperclip,
@ -596,4 +597,6 @@ export const nodeIconsLucide: iconsType = {
"AI/ML": AIMLIcon,
GitLoader: GitLoaderIcon,
athenaIcon: AthenaIcon,
OptionIcon: OptionIcon,
Option: OptionIcon,
};

38
src/frontend/src/utils/utils.ts
View file

@ -3,7 +3,11 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
import { MESSAGES_TABLE_ORDER, MODAL_CLASSES } from "../constants/constants";
import {
MESSAGES_TABLE_ORDER,
MODAL_CLASSES,
SHORTCUT_KEYS,
} from "../constants/constants";
import { APIDataType, InputFieldType, VertexDataTypeAPI } from "../types/api";
import {
groupedObjType,
@ -584,3 +588,35 @@ export function getNodeLength(data: NodeDataType) {
data.node.template[templateField]?.type === "NestedDict"),
).length;
}
export function sortShortcuts(a: string, b: string) {
const order = SHORTCUT_KEYS;
const aTrimmed = a.trim().toLowerCase();
const bTrimmed = b.trim().toLowerCase();
const aIndex = order.indexOf(aTrimmed);
const bIndex = order.indexOf(bTrimmed);
if (aIndex === -1 && bIndex === -1) {
return aTrimmed.localeCompare(bTrimmed);
}
if (aIndex === -1) {
return 1;
}
if (bIndex === -1) {
return -1;
}
return aIndex - bIndex;
}
export function addPlusSignes(array: string[]): string[] {
const exceptions = SHORTCUT_KEYS;
// add + sign to the shortcuts beetwen characters that are not in the exceptions
return array.map((key, index) => {
if (index === 0) return key;
if (
exceptions.includes(key.trim().toLocaleLowerCase()) ||
exceptions.includes(array[index - 1].trim().toLocaleLowerCase())
)
return key;
return "+" + key;
});
}