-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add app-chrome and variables to editor (#110)
* add variables table to storybook * udpates * wip * updates * add hotekey, other fixes * lint, test * format marimo variable values * dont send variable values if there are no variables * update UI element values * styling * add todo for state * nit consistency * sidebar init fix * focus * remove cookies * add shadow color * lint * minor tweaks - fix app status indicator - badge: green -> outline (less distracting) - cell focus outline: blue, solid instead of green fuzzy - remove number of variables from variable button (looked like errors?) * fix test --------- Co-authored-by: Akshay Agrawal <akshay@marimo.io>
- Loading branch information
Showing
32 changed files
with
826 additions
and
192 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
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,153 @@ | ||
| /* Copyright 2023 Marimo. All rights reserved. */ | ||
| import React, { memo } from "react"; | ||
| import { | ||
| TableHeader, | ||
| TableRow, | ||
| TableHead, | ||
| TableBody, | ||
| TableCell, | ||
| Table, | ||
| } from "../ui/table"; | ||
| import { Variables } from "@/core/variables/types"; | ||
| import { CellId } from "@/core/model/ids"; | ||
| import { CellLink } from "@/editor/links/cell-link"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { SquareEqualIcon, WorkflowIcon } from "lucide-react"; | ||
| import { Badge } from "../ui/badge"; | ||
| import { toast } from "../ui/use-toast"; | ||
|
|
||
| interface Props { | ||
| className?: string; | ||
| /** | ||
| * Used to sort the variables. | ||
| */ | ||
| cellIds: CellId[]; | ||
| variables: Variables; | ||
| } | ||
|
|
||
| export const VariableTable: React.FC<Props> = memo( | ||
| ({ className, cellIds, variables }) => { | ||
| const cellIdToIndex = new Map<CellId, number>(); | ||
| cellIds.forEach((id, index) => cellIdToIndex.set(id, index)); | ||
|
|
||
| const sortedVariables = Object.values(variables).sort((a, b) => { | ||
| const aIndex = cellIdToIndex.get(a.declaredBy[0]); | ||
| const bIndex = cellIdToIndex.get(b.declaredBy[0]); | ||
| if (aIndex === undefined || bIndex === undefined) { | ||
| return 0; | ||
| } | ||
| return aIndex - bIndex; | ||
| }); | ||
|
|
||
| return ( | ||
| <Table className={cn("w-full overflow-hidden text-sm flex-1", className)}> | ||
| <TableHeader> | ||
| <TableRow className="whitespace-nowrap text-xs"> | ||
| <TableHead>Name</TableHead> | ||
| <TableHead> | ||
| <div className="flex flex-col gap-1"> | ||
| <span>Type</span> | ||
| <span>Value</span> | ||
| </div> | ||
| </TableHead> | ||
| <TableHead> | ||
| <div className="flex flex-col gap-1"> | ||
| <span>Declared By</span> | ||
| <span>Used By</span> | ||
| </div> | ||
| </TableHead> | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {sortedVariables.map((variable) => ( | ||
| <TableRow key={variable.name}> | ||
| <TableCell | ||
| className="font-medium max-w-[130px]" | ||
| title={variable.name} | ||
| > | ||
| <div> | ||
| <Badge | ||
| variant={ | ||
| variable.declaredBy.length > 1 ? "destructive" : "outline" | ||
| } | ||
| className="rounded-sm text-ellipsis block overflow-hidden max-w-fit cursor-pointer" | ||
| onClick={() => { | ||
| navigator.clipboard.writeText(variable.name); | ||
| toast({ title: "Copied to clipboard" }); | ||
| }} | ||
| > | ||
| {variable.name} | ||
| </Badge> | ||
| </div> | ||
| </TableCell> | ||
| <TableCell className="max-w-[150px]"> | ||
| <div className="text-ellipsis overflow-hidden whitespace-nowrap text-muted-foreground font-mono text-xs"> | ||
| {variable.dataType} | ||
| </div> | ||
| <div | ||
| className="text-ellipsis overflow-hidden whitespace-nowrap" | ||
| title={variable.value} | ||
| > | ||
| {variable.value} | ||
| </div> | ||
| </TableCell> | ||
| <TableCell className="py-1"> | ||
| <div className="flex flex-col gap-1"> | ||
| <div className="flex flex-row overflow-auto gap-2 items-center"> | ||
| <span title="Declared by"> | ||
| <SquareEqualIcon className="w-3.5 h-3.5 text-muted-foreground" /> | ||
| </span> | ||
|
|
||
| {variable.declaredBy.length === 1 ? ( | ||
| <CellLink | ||
| variant="focus" | ||
| cellId={variable.declaredBy[0]} | ||
| /> | ||
| ) : ( | ||
| <div className="text-destructive flex flex-row gap-2"> | ||
| {variable.declaredBy.slice(0, 3).map((cellId, idx) => ( | ||
| <span className="flex" key={cellId}> | ||
| <CellLink | ||
| variant="focus" | ||
| key={cellId} | ||
| cellId={cellId} | ||
| className="whitespace-nowrap text-destructive" | ||
| /> | ||
| {idx < variable.declaredBy.length - 1 && ", "} | ||
| </span> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| <div className="flex flex-row overflow-auto gap-2 items-baseline"> | ||
| <span title="Used by"> | ||
| <WorkflowIcon className="w-3.5 h-3.5 text-muted-foreground" /> | ||
| </span> | ||
|
|
||
| {variable.usedBy.slice(0, 3).map((cellId, idx) => ( | ||
| <span className="flex" key={cellId}> | ||
| <CellLink | ||
| variant="focus" | ||
| key={cellId} | ||
| cellId={cellId} | ||
| className="whitespace-nowrap" | ||
| /> | ||
| {idx < variable.usedBy.length - 1 && ", "} | ||
| </span> | ||
| ))} | ||
| {variable.usedBy.length > 3 && ( | ||
| <div className="whitespace-nowrap text-muted-foreground text-xs"> | ||
| +{variable.usedBy.length - 3} more | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| ); | ||
| } | ||
| ); | ||
| VariableTable.displayName = "VariableTable"; |
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
Oops, something went wrong.
db77ab8There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
marimo-storybook – ./frontend
marimo-storybook-git-main-marimo.vercel.app
marimo-storybook-marimo.vercel.app
marimo-storybook.vercel.app