@difizen/libro-widget 0.0.2-alpha.0

package/src/components/progressBar.tsx

@@ -0,0 +1,29 @@
+import { Progress } from 'antd';
+
+/**
+ * Props for the ProgressBar.
+ */
+export interface IProgressBarProps {
+  /**
+   * The current progress percentage, from 0 to 100
+   */
+  percent: number;
+  /**
+   * Width of progress bar in pixel.
+   */
+  width?: number;
+}
+
+export function ProgressBar(props: IProgressBarProps) {
+  return (
+    <>
+      <Progress
+        strokeLinecap="butt"
+        percent={props.percent}
+        strokeWidth={18}
+        showInfo={false}
+        style={{ width: '200px' }}
+      />
+    </>
+  );
+}

package/src/components/progressCircle.tsx

@@ -0,0 +1,18 @@
+import { Progress } from 'antd';
+/**
+ * Props for the ProgressBar.
+ */
+export interface IProgressCircleProps {
+  /**
+   * The current progress percentage, from 0 to 100
+   */
+  percent: number;
+}
+
+export function ProgressCircle(props: IProgressCircleProps) {
+  return (
+    <>
+      <Progress strokeLinecap="butt" type="circle" percent={props.percent} />;
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './base/index.js';
+export * from './widget-module.js';
+export * from './widgets/index.js';

package/src/widget-module.ts

@@ -0,0 +1,68 @@
+import { LibroKernelManageModule } from '@difizen/libro-kernel';
+import { ManaModule } from '@difizen/mana-app';
+
+import { Comm } from './base/comm.js';
+import {
+  WidgetsOption,
+  LibroWidgetCommFactory,
+  WidgetCommOption,
+  LibroWidgets,
+  LibroWidgetsFactory,
+  WidgetView,
+  WidgetViewContribution,
+} from './base/index.js';
+import { LibroWidgetManager } from './base/widget-manager.js';
+import { DefaultWidgetViewContribution } from './base/widget-view-contribution.js';
+import { HBoxModelContribution } from './widgets/hbox-widget-view-contribution.js';
+import { HBoxWidget } from './widgets/hbox-widget-view.js';
+import { ProgressWidget } from './widgets/index.js';
+import { InstancesProgressWidgetViewContribution } from './widgets/instances-progress-widget-view-contribution.js';
+import { InstancesProgressWidget } from './widgets/instances-progress-widget-view.js';
+import { ProgressWidgetViewContribution } from './widgets/progress-widget-view-contribution.js';
+import { TextModelContribution } from './widgets/text-widget-view-contribution.js';
+import { LibroTextWidget } from './widgets/text-widget-view.js';
+
+export const WidgetModule = ManaModule.create()
+  .contribution(WidgetViewContribution)
+  .register(
+    Comm,
+    {
+      token: LibroWidgetCommFactory,
+      useFactory: (ctx) => {
+        return (options: WidgetCommOption) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: WidgetCommOption,
+            useValue: options,
+          });
+          return child.get(Comm);
+        };
+      },
+    },
+    LibroWidgets,
+    {
+      token: LibroWidgetsFactory,
+      useFactory: (ctx) => {
+        return (options: WidgetsOption) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: WidgetsOption,
+            useValue: options,
+          });
+          return child.get(LibroWidgets);
+        };
+      },
+    },
+    LibroWidgetManager,
+    WidgetView,
+    ProgressWidget,
+    DefaultWidgetViewContribution,
+    ProgressWidgetViewContribution,
+    InstancesProgressWidgetViewContribution,
+    InstancesProgressWidget,
+    HBoxModelContribution,
+    HBoxWidget,
+    LibroTextWidget,
+    TextModelContribution,
+  )
+  .dependOn(LibroKernelManageModule);

package/src/widgets/hbox-widget-view-contribution.ts

@@ -0,0 +1,20 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetViewContribution } from '../base/protocal.js';
+
+import { HBoxWidget } from './hbox-widget-view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class HBoxModelContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (attributes: any) => {
+    if (attributes._model_name === 'HBoxModel') {
+      return 100;
+    }
+    return 1;
+  };
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(HBoxWidget, props);
+  }
+}

package/src/widgets/hbox-widget-view.tsx

@@ -0,0 +1,64 @@
+import {
+  view,
+  ViewOption,
+  ViewRender,
+  transient,
+  useInject,
+  ViewInstance,
+  inject,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetView } from '../base/widget-view.js';
+import './index.less';
+import { LibroWidgets } from '../base/libro-widgets.js';
+import { LirboContextKey } from '@difizen/libro-core';
+
+export const HBoxWidgetComponent = forwardRef<HTMLDivElement>(
+  function HBoxWidgetComponent() {
+    const widgetView = useInject<HBoxWidget>(ViewInstance);
+    if (widgetView.isCommClosed) {
+      return null;
+    }
+    const hboxChildrenWidget = widgetView.get_child_model();
+    return (
+      <div className="libro-hbox-widget">
+        {hboxChildrenWidget.map((childrenWidgets) => (
+          <ViewRender view={childrenWidgets} key={childrenWidgets.id} />
+        ))}
+      </div>
+    );
+  },
+);
+@transient()
+@view('libro-hbox-widget-view')
+export class HBoxWidget extends WidgetView {
+  override view = HBoxWidgetComponent;
+  children: string[];
+  layout: string;
+  box_style: string;
+  override libroWidgets: LibroWidgets;
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LirboContextKey) lirboContextKey: LirboContextKey,
+    @inject(LibroWidgets) libroWidgets: LibroWidgets,
+  ) {
+    super(props, lirboContextKey);
+    this.box_style = props.attributes.bar_style;
+    this.layout = props.attributes.layout;
+    this.children = props.attributes.children;
+    this.lirboContextKey = lirboContextKey;
+    this.libroWidgets = libroWidgets;
+  }
+
+  get_child_model(): WidgetView[] {
+    const childrenWidgets: WidgetView[] = [];
+    this.children.forEach((child) => {
+      if (this.libroWidgets.hasModel(child.substring(10))) {
+        childrenWidgets.push(this.libroWidgets.getModel(child.substring(10)));
+      }
+    });
+    return childrenWidgets;
+  }
+}

package/src/widgets/index.less

@@ -0,0 +1,3 @@
+.libro-input-widget {
+  display: flex;
+}

package/src/widgets/index.ts

@@ -0,0 +1,8 @@
+export * from './hbox-widget-view.js';
+export * from './hbox-widget-view-contribution.js';
+export * from './instances-progress-widget-view.js';
+export * from './instances-progress-widget-view-contribution.js';
+export * from './progress-widget-view.js';
+export * from './progress-widget-view-contribution.js';
+export * from './text-widget-view.js';
+export * from './text-widget-view-contribution.js';

package/src/widgets/instances-progress-widget-view-contribution.ts

@@ -0,0 +1,20 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetViewContribution } from '../base/protocal.js';
+
+import { InstancesProgressWidget } from './instances-progress-widget-view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class InstancesProgressWidgetViewContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (attributes: any) => {
+    if (attributes._model_name === 'InstancesProgressModel') {
+      return 100;
+    }
+    return 1;
+  };
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(InstancesProgressWidget, props);
+  }
+}

package/src/widgets/instances-progress-widget-view.tsx

@@ -0,0 +1,160 @@
+import { LirboContextKey } from '@difizen/libro-core';
+import type { KernelMessage } from '@difizen/libro-kernel';
+import {
+  useInject,
+  view,
+  ViewInstance,
+  ViewOption,
+  transient,
+  inject,
+  prop,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import type {
+  InstanceRecord,
+  InstancesRecords,
+  ProgressItem,
+} from '../base/protocal.js';
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetView } from '../base/widget-view.js';
+import './index.less';
+
+export interface ProgressOverviewProps {
+  progressMap: Record<string, ProgressItem>;
+  workingProgressKeys: string[];
+  prefix: string;
+  suffix: string;
+}
+
+export const LibroInstancesProgressWidgetViewComponent = forwardRef<HTMLDivElement>(
+  function LibroInstancesProgressWidgetViewComponent(_props, ref) {
+    const widgetView = useInject<InstancesProgressWidget>(ViewInstance);
+    if (widgetView.isCommClosed) {
+      return null;
+    }
+    return (
+      <div ref={ref} className="libro-instances-progress-widget">
+        <span style={{ paddingRight: 5 }}>{widgetView.prefix}</span>
+        <span>
+          {widgetView.workingProgressKeys.map((progressKey) => {
+            const progressItem = widgetView.progressMap[progressKey];
+            return (
+              <a
+                className="pyodps-progress-launcher"
+                style={{ marginRight: 5 }}
+                key={progressKey}
+              >
+                {progressItem && progressItem.name}
+              </a>
+            );
+          })}
+        </span>
+        <span>{widgetView.suffix}</span>
+      </div>
+    );
+  },
+);
+@transient()
+@view('libro-widget-instances-progress-view')
+export class InstancesProgressWidget extends WidgetView {
+  override view = LibroInstancesProgressWidgetViewComponent;
+  @prop()
+  prefix: string;
+  @prop()
+  suffix: string;
+  progressMap: Record<string, ProgressItem> = {};
+  workingProgressKeys: string[] = []; // Order of groups by time of insertion
+  instanceRecords: InstancesRecords = {};
+  modalVisible = false;
+  modalProgressItemKey = '';
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LirboContextKey) lirboContextKey: LirboContextKey,
+  ) {
+    super(props, lirboContextKey);
+    this.prefix = props.attributes.prefix;
+    this.suffix = props.attributes.suffix;
+  }
+  updateRecords(progressKey: string) {
+    const progressItem = this.progressMap[progressKey];
+    if (progressItem) {
+      const { instances = [] } = progressItem;
+      instances.forEach((instance) => {
+        const { id, status } = instance;
+        if (!this.instanceRecords[id]) {
+          this.instanceRecords[id] = {
+            startDate: Date.now(),
+          } as InstanceRecord;
+        }
+        if (status === 'Terminated') {
+          if (!this.instanceRecords[id].endDate) {
+            this.instanceRecords[id].endDate = Date.now();
+          }
+        }
+      });
+    }
+  }
+  /**
+   * Handle incoming comm msg.
+   */
+  override handleCommMsg(msg: KernelMessage.ICommMsgMsg): Promise<void> {
+    const data = msg.content.data as any;
+    const method = data.method;
+    switch (method) {
+      case 'update':
+        if (data.state.prefix) {
+          this.prefix = data.state.prefix;
+        }
+        if (data.state.suffix) {
+          this.suffix = data.state.suffix;
+        }
+      // eslint-disable-next-line no-fallthrough
+      case 'custom':
+        // eslint-disable-next-line no-case-declarations
+        const customMsg = data.content;
+        if (customMsg) {
+          // message format: '{"action": "action", content: ["content1", "content2"]}'
+          const msgObj: { action: 'update' | 'delete' | 'clear'; content: string[] } =
+            JSON.parse(customMsg);
+          const action: string = msgObj.action;
+          const content: string[] = [];
+          if (msgObj.content) {
+            content.push(...msgObj.content);
+          }
+
+          switch (action) {
+            case 'update':
+              content.forEach((groupJson) => {
+                const parsedProgressItem: ProgressItem = JSON.parse(groupJson);
+                if (!this.progressMap[parsedProgressItem.key]) {
+                  this.workingProgressKeys.push(parsedProgressItem.key);
+                }
+                this.progressMap[parsedProgressItem.key] = parsedProgressItem;
+                this.updateRecords(parsedProgressItem.key);
+              });
+              // ? TODO: 发出一个更新 modal signal 的信号，这里需要取到之前的 key
+              break;
+            case 'delete':
+              content.forEach((groupKey: string) => {
+                if (!this.progressMap[groupKey]) {
+                  return;
+                }
+                const i = this.workingProgressKeys.indexOf(groupKey);
+                if (i >= 0) {
+                  this.workingProgressKeys.splice(i, 1);
+                }
+              });
+              break;
+            case 'clear':
+              this.progressMap = {};
+              this.workingProgressKeys = [];
+              // ? TODO: 发出更新 overview 以及 modal 的 signal
+              break;
+            default:
+          }
+        }
+    }
+    return Promise.resolve();
+  }
+}

package/src/widgets/progress-widget-view-contribution.ts

@@ -0,0 +1,24 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetViewContribution } from '../base/protocal.js';
+
+import { ProgressWidget } from './progress-widget-view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class ProgressWidgetViewContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (attributes: any) => {
+    if (
+      attributes._model_name === 'FloatProgressModel' ||
+      attributes._model_name === 'IntProgressModel' ||
+      attributes._model_name === 'TransientProgressModel'
+    ) {
+      return 100;
+    }
+    return 1;
+  };
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(ProgressWidget, props);
+  }
+}

package/src/widgets/progress-widget-view.tsx

@@ -0,0 +1,85 @@
+import { LirboContextKey } from '@difizen/libro-core';
+import type { KernelMessage } from '@difizen/libro-kernel';
+import {
+  view,
+  ViewOption,
+  transient,
+  useInject,
+  ViewInstance,
+  inject,
+  prop,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetView } from '../base/widget-view.js';
+import { ProgressBar } from '../components/index.js';
+import './index.less';
+
+export const LibroProgressWidgetComponent = forwardRef<HTMLDivElement>(
+  function LibroProgressWidgetComponent() {
+    const widgetView = useInject<ProgressWidget>(ViewInstance);
+    const percent = widgetView.value / ((widgetView.max - widgetView.min) / 100);
+    if (widgetView.isCommClosed) {
+      return null;
+    }
+    return (
+      <div className="libro-progress-widget">
+        <div className="libro-progress-widget-description">
+          {widgetView.description}
+        </div>
+        <ProgressBar percent={percent} />
+      </div>
+    );
+  },
+);
+@transient()
+@view('libro-widget-progress-view')
+export class ProgressWidget extends WidgetView {
+  override view = LibroProgressWidgetComponent;
+  bar_style: string;
+  description: string;
+  description_tooltip: null;
+  layout: string;
+  @prop()
+  max: number;
+  @prop()
+  min: number;
+  orientation: string;
+  style: string;
+  @prop()
+  value: number;
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LirboContextKey) lirboContextKey: LirboContextKey,
+  ) {
+    super(props, lirboContextKey);
+    this.bar_style = props.attributes.bar_style;
+    this.description = props.attributes.description;
+    this.description_tooltip = props.attributes.description_tooltip;
+    this.layout = props.attributes.layout;
+    this.max = props.attributes.max;
+    this.min = props.attributes.min;
+    this.orientation = props.attributes.orientation;
+    this.style = props.attributes.style;
+    this.value = props.attributes.value;
+  }
+  /**
+   * Handle incoming comm msg.
+   */
+  override handleCommMsg(msg: KernelMessage.ICommMsgMsg): Promise<void> {
+    const data = msg.content.data as any;
+    const method = data.method;
+    switch (method) {
+      case 'update':
+      case 'echo_update':
+        if (data.state.value) {
+          this.value = data.state.value;
+        }
+        if (data.state.description) {
+          this.description = data.state.description;
+        }
+    }
+    return Promise.resolve();
+  }
+}

package/src/widgets/text-widget-view-contribution.ts

@@ -0,0 +1,20 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetViewContribution } from '../base/protocal.js';
+
+import { LibroTextWidget } from './text-widget-view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class TextModelContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (attributes: any) => {
+    if (attributes._model_name === 'TextModel') {
+      return 100;
+    }
+    return 1;
+  };
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(LibroTextWidget, props);
+  }
+}

package/src/widgets/text-widget-view.tsx

@@ -0,0 +1,83 @@
+import { LirboContextKey } from '@difizen/libro-core';
+import {
+  view,
+  ViewOption,
+  transient,
+  useInject,
+  ViewInstance,
+  inject,
+  prop,
+} from '@difizen/mana-app';
+import { Input } from 'antd';
+import { forwardRef } from 'react';
+
+import type { IWidgetViewProps } from '../base/protocal.js';
+import { WidgetView } from '../base/widget-view.js';
+
+import './index.less';
+
+export const LibroTextWidgetComponent = forwardRef<HTMLDivElement>(
+  function LibroTextWidgetComponent(_props, ref) {
+    const widgetView = useInject<LibroTextWidget>(ViewInstance);
+    if (widgetView.isCommClosed) {
+      return null;
+    }
+
+    const handleChange = (e: any) => {
+      const data = {
+        buffer_paths: [],
+        method: 'update',
+        state: { value: e.target.value },
+      };
+      widgetView.send(data);
+    };
+
+    const handlePressEnter = () => {
+      const data = { method: 'custom', content: { event: 'submit' } };
+      widgetView.send(data);
+    };
+
+    return (
+      <div className="libro-input-widget" ref={ref}>
+        <span className="libro-input-widget-description">
+          {' '}
+          {widgetView.description}
+        </span>
+        <Input
+          placeholder={widgetView.placeholder}
+          size="small"
+          onChange={handleChange}
+          onPressEnter={handlePressEnter}
+        />
+      </div>
+    );
+  },
+);
+@transient()
+@view('libro-widget-text-view')
+export class LibroTextWidget extends WidgetView {
+  override view = LibroTextWidgetComponent;
+  bar_style: string;
+  description: string;
+  description_tooltip: null;
+  layout: string;
+  orientation: string;
+  style: string;
+  placeholder: string;
+  @prop()
+  value: number;
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LirboContextKey) lirboContextKey: LirboContextKey,
+  ) {
+    super(props, lirboContextKey);
+    this.bar_style = props.attributes.bar_style;
+    this.description = props.attributes.description;
+    this.description_tooltip = props.attributes.description_tooltip;
+    this.layout = props.attributes.layout;
+    this.orientation = props.attributes.orientation;
+    this.style = props.attributes.style;
+    this.value = props.attributes.value;
+    this.placeholder = props.attributes.placeholder;
+  }
+}