27974749198

Committed 22 Jun 2026 06:25PM UTC coverage: 41.032% (-40.0%) from 81.081%

Build # 27974749198

Build Type

Pull #38

github

Committed by

web-flow

Commit Message

Merge 5879a1978 into a31e3fb33

Pull Request Pull Request #38: Add Data Visualisation

Coverage Stats

98 of 298 branches covered (32.89%)

Branch coverage included in aggregate %.

214 of 488 new or added lines in 20 files covered. (43.85%)

236 of 516 relevant lines covered (45.74%)

1.33 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/web/data-display/src/drawable/ArrayDrawable.tsx

import { PureComponent } from "react";
import { Group, Line, Rect, Text } from "react-konva";

import { Config } from "../Config";
import DataVisualizer from "../dataVisualizer";
import { isEmptyList, isList, toText } from "../dataVisualizerUtils";
import { DataTreeNode, TreeNode } from "../tree/TreeNode";
import { NullDrawable } from "./Drawable";

type ArrayProps = {
  nodes: TreeNode[];
  x: number;
  y: number;
  color: string;
};

/**
 *  Represents an array in a tree.
 */
class ArrayDrawable extends PureComponent<ArrayProps> {
  render() {
    const createChildText = (node: DataTreeNode, index: number) => {
      const nodeValue = node.data;
      if (!isList(nodeValue)) {
        const textValue: string | undefined = toText(nodeValue);
        const textToDisplay = textValue ?? "*" + DataVisualizer.displaySpecialContent(node);
        return (
          <Text
            key={"" + nodeValue + index}
            text={textToDisplay}
            align="center"
            width={Config.BoxWidth}
            x={Config.BoxWidth * index}
            y={Math.floor((Config.BoxHeight - 1.2 * 12) / 2)}
            fontStyle={textValue === undefined ? "italic" : "normal"}
            fill="white"
            preventDefault={false}
          />
        );
      } else if (isEmptyList(nodeValue)) {
        const props = {
          x: index * Config.BoxWidth,
          y: 0,
        };
        return <NullDrawable key={index} {...props} />;
      } else {
        return null;
      }
    };

    return (
      <Group x={this.props.x} y={this.props.y}>
        {/* Outer rectangle */}
        <Rect
          width={Math.max(Config.BoxWidth * this.props.nodes.length, Config.BoxMinWidth)}
          height={Config.BoxHeight}
          strokeWidth={Config.StrokeWidth}
          stroke={Config.Stroke}
          fill={this.props.color}
          preventDefault={false}
        />
        {/* Vertical lines in the box */}
        {this.props.nodes.length > 1 &&
          Array.from(Array(this.props.nodes.length - 1), (e, i) => {
            return (
              <Line
                key={"line" + i}
                points={[Config.BoxWidth * (i + 1), 0, Config.BoxWidth * (i + 1), Config.BoxHeight]}
                strokeWidth={Config.StrokeWidth}
                stroke={Config.Stroke}
                preventDefault={false}
              />
            );
          })}
        {this.props.nodes.map(
          (child, index) => child instanceof DataTreeNode && createChildText(child, index),
        )}
      </Group>
    );
  }
}

export default ArrayDrawable;

1	import { PureComponent } from "react";
2	import { Group, Line, Rect, Text } from "react-konva";
3
4	import { Config } from "../Config";
5	import DataVisualizer from "../dataVisualizer";
6	import { isEmptyList, isList, toText } from "../dataVisualizerUtils";
7	import { DataTreeNode, TreeNode } from "../tree/TreeNode";
8	import { NullDrawable } from "./Drawable";
9
10	type ArrayProps = {
11	nodes: TreeNode[];
12	x: number;
13	y: number;
14	color: string;
15	};
16
17	/**
18	* Represents an array in a tree.
19	*/
20	class ArrayDrawable extends PureComponent<ArrayProps> {
21	render() {
NEW 22	const createChildText = (node: DataTreeNode, index: number) => {	×
NEW 23	const nodeValue = node.data;	×
NEW 24	if (!isList(nodeValue)) {	×
NEW 25	const textValue: string \| undefined = toText(nodeValue);	×
NEW 26	const textToDisplay = textValue ?? "*" + DataVisualizer.displaySpecialContent(node);	×
NEW 27	return (	×
28	<Text
29	key={"" + nodeValue + index}
30	text={textToDisplay}
31	align="center"
32	width={Config.BoxWidth}
33	x={Config.BoxWidth * index}
34	y={Math.floor((Config.BoxHeight - 1.2 * 12) / 2)}
35	fontStyle={textValue === undefined ? "italic" : "normal"}	×
36	fill="white"
37	preventDefault={false}
38	/>
39	);
NEW 40	} else if (isEmptyList(nodeValue)) {	×
NEW 41	const props = {	×
42	x: index * Config.BoxWidth,
43	y: 0,
44	};
NEW 45	return <NullDrawable key={index} {...props} />;	×
46	} else {
NEW 47	return null;	×
48	}
49	};
50
NEW 51	return (	×
52	<Group x={this.props.x} y={this.props.y}>
53	{/* Outer rectangle */}
54	<Rect
55	width={Math.max(Config.BoxWidth * this.props.nodes.length, Config.BoxMinWidth)}
56	height={Config.BoxHeight}
57	strokeWidth={Config.StrokeWidth}
58	stroke={Config.Stroke}
59	fill={this.props.color}
60	preventDefault={false}
61	/>
62	{/* Vertical lines in the box */}
63	{this.props.nodes.length > 1 &&	×
64	Array.from(Array(this.props.nodes.length - 1), (e, i) => {
NEW 65	return (	×
66	<Line
67	key={"line" + i}
68	points={[Config.BoxWidth * (i + 1), 0, Config.BoxWidth * (i + 1), Config.BoxHeight]}
69	strokeWidth={Config.StrokeWidth}
70	stroke={Config.Stroke}
71	preventDefault={false}
72	/>
73	);
74	})}
75	{this.props.nodes.map(
NEW 76	(child, index) => child instanceof DataTreeNode && createChildText(child, index),	×
77	)}
78	</Group>
79	);
80	}
81	}
82
83	export default ArrayDrawable;

source-academy / plugins / 27974749198

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous