Skip to content

Commit

Permalink
Unify code style across the codebase
Browse files Browse the repository at this point in the history
- Use function instead of const () => when declaring a function in a file scope
- use type for component props
- destructure props in component parameters (in 99% of components)
- reformat everything with 100 print width
  • Loading branch information
senicko committed Aug 7, 2023
1 parent 873febe commit 6705db2
Show file tree
Hide file tree
Showing 49 changed files with 315 additions and 616 deletions.
3 changes: 2 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"arrowParens": "always",
"singleQuote": false
"singleQuote": false,
"printWidth": 100
}
29 changes: 7 additions & 22 deletions src/algorithms/bfs.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */

import {
Algorithm,
Highlight,
Highlights,
Step,
} from "~/core/simulator/algorithm";
import { Algorithm, Highlight, Highlights, Step } from "~/core/simulator/algorithm";
import { Graph } from "~/core/simulator/graph";

const algorithm = (graph: Graph, startingVertex: string): Step[] => {
function algorithm(graph: Graph, startingVertex: string): Step[] {
const steps: Step[] = [];
const savedHighlights: Highlight[] = [];

Expand All @@ -32,10 +27,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
const current = graph.vertices[currentId]!;

{
const highlights: Highlights = new Map([
...savedHighlights,
[currentId, "sky"],
]);
const highlights: Highlights = new Map([...savedHighlights, [currentId, "sky"]]);

steps.push({
description: `Get first vertex ${currentId} from the array.`,
Expand All @@ -46,10 +38,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {

if (visited.has(currentId)) {
{
const highlights: Highlights = new Map([
...savedHighlights,
[currentId, "slate"],
]);
const highlights: Highlights = new Map([...savedHighlights, [currentId, "slate"]]);

steps.push({
description: `Vertex ${currentId} was already visited. Continue to the next step.`,
Expand All @@ -64,10 +53,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
visited.add(current.id);

{
const highlights: Highlights = new Map([
[current.id, "slate"],
...savedHighlights,
]);
const highlights: Highlights = new Map([[current.id, "slate"], ...savedHighlights]);

steps.push({
description: `Mark vertex ${currentId} as visited.`,
Expand All @@ -81,8 +67,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
for (const edgeId of current.outs) {
const edge = graph.edges[edgeId];

const adjacentId =
edge.to === current.id && !edge.directed ? edge.from : edge.to;
const adjacentId = edge.to === current.id && !edge.directed ? edge.from : edge.to;

stack.push(adjacentId);
outsHighlights.set(adjacentId, "sky");
Expand Down Expand Up @@ -116,7 +101,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
}

return steps;
};
}

export const bfs: Algorithm = {
name: "Breath First Search",
Expand Down
29 changes: 7 additions & 22 deletions src/algorithms/dfs.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */

import {
Algorithm,
Highlight,
Highlights,
Step,
} from "~/core/simulator/algorithm";
import { Algorithm, Highlight, Highlights, Step } from "~/core/simulator/algorithm";
import { Graph } from "~/core/simulator/graph";

const algorithm = (graph: Graph, startingVertex: string): Step[] => {
function algorithm(graph: Graph, startingVertex: string): Step[] {
const steps: Step[] = [];
const savedHighlights: Highlight[] = [];

Expand Down Expand Up @@ -45,10 +40,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
const current = graph.vertices[currentId]!;

{
const highlights: Highlights = new Map([
...savedHighlights,
[currentId, "sky"],
]);
const highlights: Highlights = new Map([...savedHighlights, [currentId, "sky"]]);

steps.push({
description: `Pop vertex ${currentId} from the stack.`,
Expand All @@ -72,10 +64,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {

if (visited.has(currentId)) {
{
const highlights: Highlights = new Map([
...savedHighlights,
[currentId, "slate"],
]);
const highlights: Highlights = new Map([...savedHighlights, [currentId, "slate"]]);

steps.push({
description: `Vertex ${currentId} was already visited. Continue to the next step.`,
Expand Down Expand Up @@ -103,10 +92,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
visited.add(current.id);

{
const highlights: Highlights = new Map([
[current.id, "slate"],
...savedHighlights,
]);
const highlights: Highlights = new Map([[current.id, "slate"], ...savedHighlights]);

steps.push({
description: `Mark vertex ${currentId} as visited.`,
Expand All @@ -133,8 +119,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {

for (const edgeId of current.outs) {
const edge = graph.edges[edgeId];
const adjacentId =
edge.to === current.id && !edge.directed ? edge.from : edge.to;
const adjacentId = edge.to === current.id && !edge.directed ? edge.from : edge.to;

if (visited.has(adjacentId)) {
continue;
Expand Down Expand Up @@ -199,7 +184,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
}

return steps;
};
}

export const dfs: Algorithm = {
name: "Depth First Search",
Expand Down
35 changes: 10 additions & 25 deletions src/algorithms/dijkstra.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */

import { createColumnHelper } from "@tanstack/react-table";
import { Graph, Vertex } from "~/core/simulator/graph";
import { Highlights, Step, Algorithm } from "~/core/simulator/algorithm";
Expand Down Expand Up @@ -36,23 +35,18 @@ const columns = [
cell: (info) => {
const { value, justUpdated } = info.getValue();
return (
<span
className={cn(
"block transition-all",
justUpdated && "animate-pulse text-sky-500"
)}
>
<span className={cn("block transition-all", justUpdated && "animate-pulse text-sky-500")}>
{value}
</span>
);
},
}),
];

const pickClosest = (
function pickClosest(
unvisited: IterableIterator<Vertex>,
distances: Map<string, number>
): Vertex | undefined => {
): Vertex | undefined {
let next: Vertex | undefined;

for (const candidate of unvisited) {
Expand All @@ -67,9 +61,9 @@ const pickClosest = (
}

return next;
};
}

const algorithm = (graph: Graph, startingVertex: string): Step[] => {
function algorithm(graph: Graph, startingVertex: string): Step[] {
const steps: Step[] = [];
const savedHighlights: [string, Color][] = [];

Expand Down Expand Up @@ -111,10 +105,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
const current = pickClosest(unvisited.values(), distances)!;

{
const highlights: Highlights = new Map([
...savedHighlights,
[current.id, "sky"],
]);
const highlights: Highlights = new Map([...savedHighlights, [current.id, "sky"]]);

steps.push({
description: "Pick the closest vertex from all unvisited vertices.",
Expand Down Expand Up @@ -146,20 +137,15 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
const edge = graph.edges[edgeId];

const adjacent =
graph.vertices[
edge.to === current.id && !edge.directed ? edge.from : edge.to
];
graph.vertices[edge.to === current.id && !edge.directed ? edge.from : edge.to];

if (!unvisited.has(adjacent)) {
continue;
}

distances.set(
adjacent.id,
Math.min(
distances.get(adjacent.id)!,
distances.get(current.id)! + edge.weight!
)
Math.min(distances.get(adjacent.id)!, distances.get(current.id)! + edge.weight!)
);

outsHighlights.set(adjacent.id, "sky");
Expand All @@ -173,8 +159,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
]);

steps.push({
description:
"Iterate over all adjacent unvisited nodes and update their min length.",
description: "Iterate over all adjacent unvisited nodes and update their min length.",
state: [
{
type: "table",
Expand Down Expand Up @@ -256,7 +241,7 @@ const algorithm = (graph: Graph, startingVertex: string): Step[] => {
}

return steps;
};
}

export const dijkstra: Algorithm = {
name: "Dijkstra",
Expand Down
8 changes: 4 additions & 4 deletions src/core/graphene/object.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ export type Obj =
| { type: "VERTEX"; value: string }
| { type: "VERTEX_COLLECTION"; value: string[] };

export const assertVertex = (arg: Obj): string => {
export function assertVertex(arg: Obj): string {
if (arg.type !== "VERTEX") {
throw new Error("Expected vertex.");
}

return arg.value;
};
}

export const assertNumber = (arg: Obj): number => {
export function assertNumber(arg: Obj): number {
if (arg.type !== "NUMBER") {
throw new Error("Expected a number.");
}

return arg.value;
};
}
8 changes: 3 additions & 5 deletions src/features/code-editor/CodeEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,12 @@ arc(E, C, 8)
# https://github.com/team-nullptr/graphite
`;

export const CodeEditor = () => {
export function CodeEditor() {
const setGraph = useEditorStore(({ setGraph }) => setGraph);
const [value, setValue] = useState(initialEditorValue);
const [errors, setErrors] = useState<Error[]>([]);

const { view, ref } = useEditor<HTMLDivElement>([
editorOnChange((value) => setValue(value)),
]);
const { view, ref } = useEditor<HTMLDivElement>([editorOnChange((value) => setValue(value))]);

// TODO: It might be a good idea to extract code-mirrors specific logic.
useEffect(() => {
Expand Down Expand Up @@ -78,4 +76,4 @@ export const CodeEditor = () => {
second={<DiagnosticsSummary errors={errors} />}
/>
);
};
}
9 changes: 4 additions & 5 deletions src/features/code-editor/components/Diagnostics.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { ErrorDescription } from "./ErrorDescription";

type DiagnosticsSummaryProps = {
export type DiagnosticsSummaryProps = {
errors: Error[];
};

export const DiagnosticsSummary = ({ errors }: DiagnosticsSummaryProps) => {
export function DiagnosticsSummary({ errors }: DiagnosticsSummaryProps) {
return (
<div className="flex h-full flex-col">
<div className="flex h-10 flex-shrink-0 items-center border-b border-slate-300 bg-slate-50 px-4">
Expand All @@ -13,8 +13,7 @@ export const DiagnosticsSummary = ({ errors }: DiagnosticsSummaryProps) => {
<div className="flex-1 bg-slate-50 p-4 text-slate-900">
{errors.length === 0 && (
<p className="text-center text-sm text-slate-500">
You will see any errors in your graph definition here. For now you
are good to go!
You will see any errors in your graph definition here. For now you are good to go!
</p>
)}
{errors.map((error, i) => (
Expand All @@ -23,4 +22,4 @@ export const DiagnosticsSummary = ({ errors }: DiagnosticsSummaryProps) => {
</div>
</div>
);
};
}
8 changes: 3 additions & 5 deletions src/features/code-editor/components/ErrorDescription.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ export type ErrorDescriptionProps = {
error: Error;
};

export const ErrorDescription = (props: ErrorDescriptionProps) => {
const { message } = props.error;

export function ErrorDescription({ error }: ErrorDescriptionProps) {
return (
<div className="border-l-4 border-red-500 px-4 py-2">
<div className="text-slatee-800">{message}</div>
<div className="text-slatee-800">{error.message}</div>
</div>
);
};
}
8 changes: 4 additions & 4 deletions src/features/code-editor/hooks/useEditor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import { useEffect, useRef, useState } from "react";
import { graphene } from "~/core/graphene/tools/codeMirror";

// Creates onChange extension for editor.
export const editorOnChange = (cb: (value: string) => void) => {
export function editorOnChange(cb: (value: string) => void) {
return EditorView.updateListener.of((it: ViewUpdate) => {
if (!it.docChanged) return;
const value = it.state.doc.toString();
cb(value);
});
};
}

const codeThemeLight = HighlightStyle.define([
{
Expand Down Expand Up @@ -47,7 +47,7 @@ const editorThemeLight = EditorView.theme({
},
});

export const useEditor = <T extends HTMLElement>(extensions: Extension[]) => {
export function useEditor<T extends HTMLElement>(extensions: Extension[]) {
const ref = useRef<T>(null);
const [view, setView] = useState<EditorView>();

Expand Down Expand Up @@ -84,4 +84,4 @@ export const useEditor = <T extends HTMLElement>(extensions: Extension[]) => {
}, [ref]);

return { view, ref };
};
}
Loading

0 comments on commit 6705db2

Please sign in to comment.