Add icons to highlighted nodes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Monorepo for JavaScript libraries for SEDAP",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "workspaces": [
@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "check-versions": "node ./scripts/checkVersion.cjs",
+    "bump-versions": "node ./scripts/bumpVersion.cjs",
     "build": "npm run build --workspaces --if-present",
     "lint": "npm run lint --workspaces --if-present",
     "lint-check": "npm run lint-check --workspaces --if-present"

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap-react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React components for SEDAP",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "type": "module",
@@ -27,7 +27,7 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
-    "@gillianplatform/sedap-types": "0.0.4",
+    "@gillianplatform/sedap-types": "0.0.5",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",

react/src/components/nodes/BasicNode.tsx

@@ -10,6 +10,8 @@ import CenterButton from "./util/CenterButton";
 import styled from "styled-components";
 import NodeBox from "./util/NodeBox";
 import { isNodeExpanded } from "./util/node";
+import { HighlightIcon } from "./util/HighlightIcon";
+import Row from "./util/Row";
 
 const baseWidth = 150;
 const baseHeight = 50;
@@ -39,7 +41,7 @@ const TraceViewBasicNode = (props: NodeComponentProps) => {
     return <TraceViewFallbackNode {...props} />;
   }
 
-  const { display, selectable = true, extras } = options;
+  const { display, selectable = true, extras, highlight } = options;
 
   let selected: Selected;
   if ((selectedNodes?.primary || []).includes(node.id)) {
@@ -64,7 +66,8 @@ const TraceViewBasicNode = (props: NodeComponentProps) => {
     }
   })();
 
-  const items: Record<string, ReactNode> = {};
+  // #region Items
+  const items: [string, ReactNode][] = [];
   if (selectable) {
     const Button = componentOverrides.selectNodeButton || componentOverrides.button || CenterButton;
     const selectButton = (
@@ -76,15 +79,17 @@ const TraceViewBasicNode = (props: NodeComponentProps) => {
         <VscTarget />
       </Button>
     );
-    items.selectButton = selectButton;
+    items.push(["selectButton", selectButton]);
   }
-  items.expandButton = ExpandButton({
+  const expandButton = ExpandButton({
     enabled: !busy,
     expandedNodes,
     setNodeExpanded,
     node,
     componentOverrides,
   }) as ReactNode;
+  items.push(["expandButton", expandButton]);
+  // #endregion
 
   const tooltips: ReactNode[] = [];
   if (nodeTooltips) {
@@ -104,7 +109,7 @@ const TraceViewBasicNode = (props: NodeComponentProps) => {
       sourceHandle={hasSourceHandle}
       tooltips={tooltips}
       tooltipVisible={nodeHovered}
-      highlight={options?.highlight}
+      highlight={highlight}
     >
       <NodeBox
         baseHeight={baseHeight}
@@ -116,7 +121,10 @@ const TraceViewBasicNode = (props: NodeComponentProps) => {
           setNodeHovered(false);
         }}
       >
-        <span className="sedap__nodeText">{display}</span>
+        <Row>
+          <HighlightIcon highlight={highlight} />
+          <span className="sedap__nodeText">{display}</span>
+        </Row>
         <NodeItems {...{ items, extras }} />
       </NodeBox>
     </NodeBase>

react/src/components/nodes/util/HighlightIcon.tsx

@@ -0,0 +1,23 @@
+import { VscError, VscInfo, VscPass, VscWarning } from "react-icons/vsc";
+
+export type highlight = "error" | "warning" | "info" | "success";
+
+export type HighlightIconProps = {
+  highlight: highlight | undefined;
+};
+
+export function HighlightIcon({ highlight }: HighlightIconProps) {
+  const hightlight = (() => {
+    switch (highlight) {
+      case "error":
+        return <VscError />;
+      case "warning":
+        return <VscWarning />;
+      case "info":
+        return <VscInfo />;
+      case "success":
+        return <VscPass />;
+    }
+  })();
+  return highlight && <div className="sedap__highlightIcon">{hightlight}</div>;
+}

react/src/components/nodes/util/NodeItems.tsx

@@ -1,32 +1,24 @@
 import { Fragment } from "react";
 import { MapNodeExtra } from "@gillianplatform/sedap-types";
 import renderExtras from "./renderExtras";
-import styled from "styled-components";
+import Row from "./Row";
 
 type NodeItemsProps = {
-  items?: Record<string, React.ReactNode>;
+  items?: [string, React.ReactNode][];
   extras?: MapNodeExtra[];
 };
 
-const NodeItemRow = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 0.25em;
-`;
-
 const NodeItems: React.FC<NodeItemsProps> = ({ items, extras }) => {
-  const filteredItems = Object.entries(items || {}).filter(([, v]) => v);
+  const filteredItems = (items || []).filter(([, v]) => v);
   const renderedExtras = renderExtras(extras || []).map((e, i) => [`extra-${i}`, e] as const);
   const allItems = [...renderedExtras, ...filteredItems];
   if (allItems.length === 0) return null;
   return (
-    <NodeItemRow>
+    <Row>
       {allItems.map(([key, item]) => (
         <Fragment key={key}>{item}</Fragment>
       ))}
-    </NodeItemRow>
+    </Row>
   );
 };
 

react/src/components/nodes/util/Row.tsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+const Row = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25em;
+  padding: 0 0.25em;
+  box-sizing: border-box;
+`;
+
+export default Row;

scripts/bumpVersion.cjs

@@ -0,0 +1,20 @@
+const { getPackageJSONPaths } = require("./util.cjs");
+const fs = require("fs");
+
+const versionPattern = /("version"\s*:\s*"\d+\.\d+\.)(\d+)"/g;
+const depPattern = /("@gillianplatform\/sedap-.+"\s*:\s*"\d+\.\d+\.)(\d+)"/g;
+
+const replaceVersion = (_, pre, n) => pre + (parseInt(n) + 1) + '"';
+
+function processFile(path) {
+  const content = fs.readFileSync(path).toString();
+  const newContent = content
+    .replace(versionPattern, replaceVersion)
+    .replaceAll(depPattern, replaceVersion);
+  fs.writeFileSync(path, newContent);
+}
+
+const paths = getPackageJSONPaths();
+for (const path of paths) {
+  processFile(path)
+}

scripts/util.cjs

@@ -6,8 +6,21 @@ function loadJSON(filename) {
   return obj;
 }
 
+function getRootPkg() {
+  return loadJSON("./package.json");
+}
+
+function getPackageJSONPaths() {
+  const rootPkg = getRootPkg();
+  const paths = ["./package.json"];
+  for (const workspace of rootPkg.workspaces) {
+    paths.push(`${workspace}/package.json`);
+  };
+  return paths;
+}
+
 function loadPackages({ log = false } = {}) {
-  const rootPkg = loadJSON("./package.json");
+  const rootPkg = getRootPkg();
   const pkgs = {};
   for (const workspace of rootPkg.workspaces) {
     const pkg = loadJSON(`${workspace}/package.json`);
@@ -25,4 +38,4 @@ const dependencyKeys = [
   "optionalDependencies"
 ];
 
-module.exports = { loadJSON, loadPackages, dependencyKeys };
+module.exports = { loadJSON, getRootPkg, getPackageJSONPaths, loadPackages, dependencyKeys };

types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap-types",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "SEDAP types for TypeScript",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "types": "./src/index.d.ts",

vscode/ext/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gillianplatform/sedap-vscode-ext",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "SEDAP-related utilities for VSCode extensions",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "type": "commonjs",
@@ -27,8 +27,8 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
-    "@gillianplatform/sedap-types": "0.0.4",
-    "@gillianplatform/sedap-vscode-types": "0.0.4",
+    "@gillianplatform/sedap-types": "0.0.5",
+    "@gillianplatform/sedap-vscode-types": "0.0.5",
     "@types/vscode": "^1.96.0",
     "@typescript-eslint/eslint-plugin": "^8.18.2",
     "@typescript-eslint/parser": "^8.18.2",

vscode/types/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@gillianplatform/sedap-vscode-types",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Types for SEDAP VSCode helper libraries",
   "repository":"https://github.com/gillianplatform/sedap-js",
   "types": "./src/index.d.ts",
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@gillianplatform/sedap-types": "0.0.4",
+    "@gillianplatform/sedap-types": "0.0.5",
     "typescript": "^5.7.2"
   }
 }