cedar-embeddable-editor 0.9.0

package/src/app/modules/shared/service/date-time/date-time.service.ts

@@ -0,0 +1,30 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DateTimeService {
+  private formatString: string;
+  private localeString: string;
+
+  public constructor() {
+    this.formatString = 'LL';
+    this.localeString = 'en-US';
+  }
+
+  public get format(): string {
+    return this.formatString;
+  }
+
+  public set format(value: string) {
+    this.formatString = value;
+  }
+
+  public get locale(): string {
+    return this.localeString;
+  }
+
+  public set locale(value: string) {
+    this.localeString = value;
+  }
+}

package/src/app/modules/shared/service/local-settings.service.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {environment} from '../../../../environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LocalSettingsService {
+
+    // keys
+    private static LANGUAGE = 'language';
+
+    constructor() {
+    }
+
+    public setLanguage(language: string): void {
+        localStorage.setItem(LocalSettingsService.LANGUAGE, language);
+    }
+
+    public getLanguage(): string {
+        return localStorage.getItem(LocalSettingsService.LANGUAGE) ?? environment.defaultLanguage;
+    }
+}

package/src/app/modules/shared/service/message-handler.service.ts

@@ -0,0 +1,35 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MessageHandlerService {
+
+  private eventHandler = null;
+
+  constructor() {
+  }
+
+  injectEventHandler(value: object): void {
+    this.eventHandler = value;
+  }
+
+  trace(label: string): void {
+    console.log('TRACE: ' + label);
+  }
+
+  traceObject(label: string, value: object): void {
+    console.log('TRACE: ' + label);
+    console.log(value);
+  }
+
+  error(label: string): void {
+    console.error('ERROR: ' + label);
+  }
+
+  errorObject(label: string, value: object): void {
+    console.error('ERROR: ' + label);
+    console.error(value);
+  }
+
+}

package/src/app/modules/shared/service/page-break-paginator.service.ts

@@ -0,0 +1,78 @@
+import {CedarComponent} from '../models/component/cedar-component.model';
+
+export class PageBreakPaginatorService {
+
+  currentPageBreakIndex: number;
+  pageBreakChildren: Array<CedarComponent[]>;
+
+
+  reset(pbChildren: Array<CedarComponent[]>): void {
+    this.pageBreakChildren = pbChildren;
+    this.currentPageBreakIndex = 0;
+  }
+
+  numPages(): number {
+    return this.pageBreakChildren.length;
+  }
+
+  allPageIndices(): number[] {
+    return this.pageBreakChildren.map((_, i) => i);
+  }
+
+  currentPage(): CedarComponent[] {
+    return this.page(this.currentPageBreakIndex);
+  }
+
+  currentPageSize(): number {
+    return this.currentPage().length;
+  }
+
+  page(pageNum: number): CedarComponent[] {
+    if (pageNum >= 0 && pageNum < this.pageBreakChildren.length) {
+      this.currentPageBreakIndex = pageNum;
+      return this.curPage();
+    }
+    return null;
+  }
+
+  hasPreviousPage(): boolean {
+    return (this.currentPageBreakIndex > 0);
+  }
+
+  previousPage(): CedarComponent[] {
+    if (this.hasPreviousPage()) {
+      this.currentPageBreakIndex--;
+      return this.curPage();
+    }
+    return null;
+  }
+
+  decrementPage(): void {
+    if (this.currentPageBreakIndex > 0) {
+      this.currentPageBreakIndex--;
+    }
+  }
+
+  hasNextPage(): boolean {
+    return (this.currentPageBreakIndex < this.pageBreakChildren.length - 1);
+  }
+
+  nextPage(): CedarComponent[] {
+    if (this.hasNextPage()) {
+      this.currentPageBreakIndex++;
+      return this.curPage();
+    }
+    return null;
+  }
+
+  incrementPage(): void {
+    if (this.currentPageBreakIndex < this.pageBreakChildren.length - 1) {
+      this.currentPageBreakIndex++;
+    }
+  }
+
+  private curPage(): CedarComponent[] {
+    return this.pageBreakChildren[this.currentPageBreakIndex];
+  }
+
+}

package/src/app/modules/shared/shared.module.ts

@@ -0,0 +1,97 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RdfPipe} from './pipe/rdf.pipe';
+import {CedarComponentHeaderComponent} from './components/cedar-component-header/cedar-component-header.component';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatButtonModule} from '@angular/material/button';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatRippleModule} from '@angular/material/core';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatListModule} from '@angular/material/list';
+import {MatSelectModule} from '@angular/material/select';
+import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
+import {NgSelectModule} from '@ng-select/ng-select';
+import {
+    CedarEmbeddableMetadataEditorComponent
+} from './components/cedar-embeddable-metadata-editor/cedar-embeddable-metadata-editor.component';
+import {CedarComponentRendererComponent} from './components/cedar-component-renderer/cedar-component-renderer.component';
+import {CedarDataSaverComponent} from './components/cedar-data-saver/cedar-data-saver.component';
+import {StaticFooterComponent} from './components/static-footer/static-footer.component';
+import {StaticHeaderComponent} from './components/static-header/static-header.component';
+import {SourcePanelsComponent} from './components/source-panels/source-panels.component';
+import {CedarMultiPagerComponent} from './components/cedar-multi-pager/cedar-multi-pager.component';
+import {InputTypesModule} from '../input-types/input-types.module';
+import {
+    CedarEmbeddableMetadataEditorWrapperComponent
+} from './components/cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component';
+import {SampleTemplatesComponent} from './components/sample-templates/sample-templates.component';
+import {SampleTemplateSelectComponent} from './components/sample-templates/sample-template-select/sample-template-select.component';
+import {PreferencesMenu} from './components/preferences-menu/preferences-menu.component';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MatCardModule,
+        MatIconModule,
+        BrowserAnimationsModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatExpansionModule,
+        MatButtonModule,
+        MatTooltipModule,
+        ClipboardModule,
+        MatToolbarModule,
+        MatRippleModule,
+        MatPaginatorModule,
+        MatChipsModule,
+        MatGridListModule,
+        MatProgressSpinnerModule,
+        MatListModule,
+        MatSelectModule,
+        NgxMatSelectSearchModule,
+        NgSelectModule,
+        InputTypesModule,
+        FormsModule,
+        MatMenuModule,
+        MatSlideToggleModule,
+        TranslateModule,
+    ],
+    declarations: [
+        RdfPipe,
+        CedarComponentHeaderComponent,
+        CedarEmbeddableMetadataEditorComponent,
+        CedarEmbeddableMetadataEditorWrapperComponent,
+        SampleTemplatesComponent,
+        SampleTemplateSelectComponent,
+        CedarComponentRendererComponent,
+        CedarDataSaverComponent,
+        StaticFooterComponent,
+        StaticHeaderComponent,
+        SourcePanelsComponent,
+        CedarMultiPagerComponent,
+        PreferencesMenu
+    ],
+    providers: [],
+    exports: [
+        RdfPipe,
+        CedarEmbeddableMetadataEditorWrapperComponent,
+    ]
+})
+export class SharedModule {
+}

package/src/app/modules/shared/util/data-context.ts

@@ -0,0 +1,42 @@
+import {CedarInputTemplate} from '../models/cedar-input-template.model';
+import {TemplateComponent} from '../models/template/template-component.model';
+import {MultiInstanceInfo} from '../models/info/multi-instance-info.model';
+import {TemplateRepresentationFactory} from '../factory/template-representation.factory';
+import {InstanceExtractData} from '../models/instance-extract-data.model';
+import {InstanceFullData} from '../models/instance-full-data.model';
+import {HandlerContext} from './handler-context';
+import {MultiInstanceObjectHandler} from '../handler/multi-instance-object.handler';
+import {DataObjectBuilderHandler} from '../handler/data-object-builder.handler';
+import {PageBreakPaginatorService} from '../service/page-break-paginator.service';
+
+export class DataContext {
+
+  templateInput: CedarInputTemplate = null;
+  templateRepresentation: TemplateComponent = null;
+  instanceExtractData: InstanceExtractData = null;
+  instanceFullData: InstanceFullData = null;
+  multiInstanceData: MultiInstanceInfo = null;
+  savedTemplateID: string;
+  templateInfo: object;
+
+  public constructor() {
+  }
+
+  set externalTemplateInfo(templateInfo: object) {
+    this.templateInfo = templateInfo;
+  }
+
+  setInputTemplate(value: object, handlerContext: HandlerContext,
+                   pageBreakPaginatorService: PageBreakPaginatorService, collapseStaticComponents: boolean): void {
+    this.templateInput = value as CedarInputTemplate;
+    this.templateRepresentation = TemplateRepresentationFactory.create(this.templateInput, collapseStaticComponents);
+    pageBreakPaginatorService.reset(this.templateRepresentation.pageBreakChildren);
+    const multiInstanceObjectService: MultiInstanceObjectHandler = handlerContext.multiInstanceObjectService;
+    const dataObjectService: DataObjectBuilderHandler = handlerContext.dataObjectBuilderService;
+    this.instanceExtractData = dataObjectService.buildNewExtractDataObject(this.templateRepresentation, this.templateInput);
+    this.instanceFullData = dataObjectService.buildNewFullDataObject(this.templateRepresentation, this.templateInput);
+    this.multiInstanceData = multiInstanceObjectService.buildNewOrFromMetadata(this.templateRepresentation);
+    this.savedTemplateID = null;
+  }
+
+}

package/src/app/modules/shared/util/data-object-util.ts

@@ -0,0 +1,102 @@
+import {JsonSchema} from '../models/json-schema.model';
+import {CedarModel} from '../models/cedar-model.model';
+import {JavascriptTypes} from '../models/javascript-types.model';
+import {TemplateObjectUtil} from './template-object-util';
+import {DataObjectBuildingMode} from '../models/enum/data-object-building-mode.model';
+
+export class DataObjectUtil {
+
+  static getEmptyValueWrapper(templateJsonObj: object, buildingMode: DataObjectBuildingMode): object {
+    const obj = {};
+    if (!TemplateObjectUtil.hasControlledInfo(templateJsonObj) ) {
+      obj[JsonSchema.atValue] = null;
+    }
+    if (buildingMode === DataObjectBuildingMode.INCLUDE_CONTEXT) {
+      this.injectAtTypeIfAvailable(obj, templateJsonObj);
+    }
+    return obj;
+  }
+
+  static getEmptyObject(): object {
+    return {};
+  }
+
+  static getEmptyList(): [] {
+    return [];
+  }
+
+  private static injectAtTypeIfAvailable(obj: object, templateJsonObj: object): void {
+    if (templateJsonObj != null) {
+      if (templateJsonObj.hasOwnProperty(CedarModel.valueConstraints)) {
+        const vc = templateJsonObj[CedarModel.valueConstraints];
+        if (vc.hasOwnProperty(CedarModel.numberType)) {
+          obj[JsonSchema.atType] = vc[CedarModel.numberType];
+        } else if (vc.hasOwnProperty(CedarModel.temporalType)) {
+          obj[JsonSchema.atType] = vc[CedarModel.temporalType];
+        }
+      }
+    }
+  }
+
+  static convertTemplateContextNode(propsContextProp: object): object {
+    let ret = null;
+    if (propsContextProp[CedarModel.type] === 'string' && propsContextProp[CedarModel.format] === 'uri') {
+      ret = propsContextProp[CedarModel.enum][0];
+    } else if (propsContextProp[CedarModel.type] === 'object' && propsContextProp.hasOwnProperty(JsonSchema.properties)) {
+      ret = {};
+      ret[JsonSchema.atType] = propsContextProp[JsonSchema.properties][JsonSchema.atType][CedarModel.enum][0];
+    } else if (propsContextProp.hasOwnProperty(CedarModel.enum)) {
+      ret = propsContextProp[CedarModel.enum][0];
+    }
+    return ret;
+  }
+
+  static getSafeSubTemplate(templateJsonObj: object, targetName: string): object {
+    let subTemplate: object = null;
+    if (templateJsonObj != null) {
+      subTemplate = templateJsonObj[JsonSchema.properties][targetName];
+      if (subTemplate[CedarModel.type] === JavascriptTypes.array) {
+        subTemplate = subTemplate[CedarModel.items];
+      }
+    }
+    return subTemplate;
+  }
+
+  // Generating a RFC4122 version 4 compliant GUID
+  static generateGUID(): string {
+    let d = Date.now();
+    const guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+      const r = (d + Math.random() * 16) % 16 | 0;
+      d = Math.floor(d / 16);
+      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    });
+    return guid;
+  }
+
+  static arraysEqual(arr1, arr2): boolean {
+    // if the other array is a falsy value, return
+    if (!arr2) {
+      return false;
+    }
+
+    // compare lengths - can save a lot of time
+    if (arr1.length !== arr2.length) {
+      return false;
+    }
+
+    for (let i = 0, l = arr1.length; i < l; i++) {
+      // Check if we have nested arrays
+      if (arr1[i] instanceof Array && arr2[i] instanceof Array) {
+        // recurse into the nested arrays
+        if (!arr1[i].equals(arr2[i])) {
+          return false;
+        }
+      } else if (arr1[i] !== arr2[i]) {
+        // Warning - two different object instances will never be equal: {x:20} != {x:20}
+        return false;
+      }
+    }
+    return true;
+  }
+
+}

package/src/app/modules/shared/util/handler-context.ts

@@ -0,0 +1,81 @@
+import {MultiComponent} from '../models/component/multi-component.model';
+import {DataContext} from './data-context';
+import {MultiInstanceObjectHandler} from '../handler/multi-instance-object.handler';
+import {DataObjectBuilderHandler} from '../handler/data-object-builder.handler';
+import {FieldComponent} from '../models/component/field-component.model';
+import {DataObjectDataValueHandler} from '../handler/data-object-data-value.handler';
+import {DataObjectStructureHandler} from '../handler/data-object-structure.handler';
+
+
+export class HandlerContext {
+
+  readonly dataObjectBuilderService: DataObjectBuilderHandler = null;
+  readonly multiInstanceObjectService: MultiInstanceObjectHandler = null;
+  readonly dataObjectManipulationService: DataObjectStructureHandler = null;
+  readonly dataObjectDataValueHandler: DataObjectDataValueHandler = null;
+  readonly dataContext: DataContext = null;
+
+  public constructor(dataContext: DataContext) {
+    this.dataObjectBuilderService = new DataObjectBuilderHandler();
+    this.multiInstanceObjectService = new MultiInstanceObjectHandler();
+    this.dataObjectBuilderService.injectMultiInstanceService(this.multiInstanceObjectService);
+    this.dataObjectManipulationService = new DataObjectStructureHandler();
+    this.dataObjectDataValueHandler = new DataObjectDataValueHandler();
+    this.dataContext = dataContext;
+  }
+
+  addMultiInstance(component: MultiComponent): void {
+    this.dataObjectManipulationService.multiInstanceItemAdd(this.dataContext, component, this.multiInstanceObjectService);
+    this.multiInstanceObjectService.multiInstanceItemAdd(component);
+  }
+
+  copyMultiInstance(component: MultiComponent): void {
+    const multiInfo = this.multiInstanceObjectService.getMultiInstanceInfoForComponent(component);
+
+    // nothing to copy from, create new
+    if (multiInfo.currentIndex < 0) {
+      this.addMultiInstance(component);
+    } else {
+      this.dataObjectManipulationService.multiInstanceItemCopy(this.dataContext, component, this.multiInstanceObjectService);
+      this.multiInstanceObjectService.multiInstanceItemCopy(component);
+    }
+  }
+
+  deleteMultiInstance(component: MultiComponent): void {
+    this.dataObjectManipulationService.multiInstanceItemDelete(this.dataContext, component, this.multiInstanceObjectService);
+    this.multiInstanceObjectService.multiInstanceItemDelete(component);
+  }
+
+  getDataObjectNodeByPath(path: string[]): object {
+    return this.dataObjectManipulationService.getDataPathNodeRecursively(this.dataContext.instanceExtractData, this.dataContext.templateRepresentation, path, this.multiInstanceObjectService);
+  }
+
+  getParentDataObjectNodeByPath(path: string[]): object {
+    return this.dataObjectManipulationService.getParentDataPathNodeRecursively(this.dataContext.instanceExtractData, null, this.dataContext.templateRepresentation, path, this.multiInstanceObjectService);
+  }
+
+  setCurrentIndex(component: MultiComponent, idx: number): void {
+    this.multiInstanceObjectService.setCurrentIndex(component, idx);
+  }
+
+  changeValue(component: FieldComponent, value: string): void {
+    this.dataObjectDataValueHandler.changeValue(this.dataContext, component, this.multiInstanceObjectService, value);
+  }
+
+  changeListValue(component: FieldComponent, value: string[]): void {
+    this.dataObjectDataValueHandler.changeListValue(this.dataContext, component, this.multiInstanceObjectService, value);
+  }
+
+  changeAttributeValue(component: FieldComponent, key: string, value: string): void {
+    this.dataObjectDataValueHandler.changeAttributeValue(this.dataContext, component, this.multiInstanceObjectService, key, value);
+  }
+
+  deleteAttributeValue(component: FieldComponent, key: string): void {
+    this.dataObjectDataValueHandler.deleteAttributeValue(this.dataContext, component, this.multiInstanceObjectService, key);
+  }
+
+  changeControlledValue(component: FieldComponent, atId: string, prefLabel: string): void {
+    this.dataObjectDataValueHandler.changeControlledValue(this.dataContext, component, this.multiInstanceObjectService, atId, prefLabel);
+  }
+
+}

package/src/app/modules/shared/util/template-object-util.ts

@@ -0,0 +1,21 @@
+import {CedarModel} from '../models/cedar-model.model';
+
+export class TemplateObjectUtil {
+
+  static hasControlledInfo(dataNode: object): boolean {
+    if (TemplateObjectUtil.hasValueConstraints(dataNode)) {
+      const vc: object = dataNode[CedarModel.valueConstraints];
+      const hasOntologies = vc.hasOwnProperty(CedarModel.ontologies) && vc[CedarModel.ontologies].length > 0;
+      const hasValueSets = vc.hasOwnProperty(CedarModel.valueSets) && vc[CedarModel.valueSets].length > 0;
+      const hasClasses = vc.hasOwnProperty(CedarModel.classes) && vc[CedarModel.classes].length > 0;
+      const hasBranches = vc.hasOwnProperty(CedarModel.branches) && vc[CedarModel.branches].length > 0;
+      return hasOntologies || hasValueSets || hasClasses || hasBranches;
+    }
+    return false;
+  }
+
+  static hasValueConstraints(dataNode: object): boolean {
+    return dataNode != null && dataNode.hasOwnProperty(CedarModel.valueConstraints);
+  }
+
+}

package/src/assets/i18n-cee/en.json

@@ -0,0 +1,86 @@
+{
+  "App": {
+    "Title": "CEDAR Embeddable Editor",
+    "Maintained": "CEDAR is maintained by the Stanford Center for Biomedical Informatics Research.",
+    "Contact": "Contact CEDAR"
+  },
+  "Generic": {
+    "BMIR": "BMIR",
+    "SAVE": "SAVE",
+    "Infinite": "Infinite",
+    "ExpandAll": "Expand All",
+    "CollapseAll": "Collapse All",
+    "Copy": "Copy",
+    "Page": "Page",
+    "Name": "Name",
+    "Value": "Value",
+    "AttributeName": "Attribute Name",
+    "AttributeValue": "Attribute Value",
+    "AllValues": "All Values",
+    "Clear": "Clear",
+    "SelectDecimalSeconds": "Select Decimal Seconds",
+    "SelectTimeZone": "Select Time Zone",
+    "NoTimeZoneFound": "No Time Zone Found",
+    "SelectYear": "Select Year",
+    "SelectYearAndMonth": "Select Year and Month",
+    "SelectDate": "Select Date",
+    "NumberOnly": "Number Only",
+    "CedarLogo": "Cedar Logo"
+  },
+  "Process": {
+    "Initializing": "CEDAR Embeddable Editor initializing..."
+  },
+  "Multi": {
+    "NoInstancesYet": "No instances yet",
+    "AddEmptyAfter": "Add empty after current",
+    "AddCloneAfter": "Add clone after current",
+    "DeleteCurrent": "Delete current"
+  },
+  "Error": {
+    "ValueRequired": "The value is required"
+  },
+  "Extra": {
+    "SampleTemplate": {
+      "Title": "Sample templates",
+      "Select": "Select template",
+      "Find": "Find template...",
+      "FindNoMatch": "No matching templates found"
+    },
+    "JsonLD": {
+      "InstanceCore": "JSON-LD - Instance - Core",
+      "Instance": "JSON-LD - Instance"
+    },
+    "JsonSchemaTemplate": "JSON Schema - Template",
+    "TemplateRendering": "Template Rendering Data",
+    "MultiInstance": "Multi-Instance Information"
+  },
+  "Uploader": {
+    "DragAndDrop": "Drag and drop your own CEDAR template here or",
+    "Browse": "Browse for file",
+    "Error": "Upload of {{fileName}} failed'  with an error: {{responseMessage}}",
+    "Success": "'Upload of {{fileName}} succeeded"
+  },
+  "Saver": {
+    "Error": "Error saving metadata"
+  },
+  "Validation": {
+    "Required": "The value is required.",
+    "Text": {
+      "MinLength": "Value should be at least {{constraintMinLength}} chars long.",
+      "MaxLength": "Value should be at most {{constraintMaxLength}} chars long."
+    },
+    "Select": {
+      "MaxSelection": "Select up to {{maxSelections}}"
+    },
+    "Email": {
+      "Invalid": "Value should be a valid email address."
+    },
+    "Link": {
+      "Invalid": "Value should be a valid URL."
+    },
+    "Numeric": {
+      "MinValue": "Value should be at least {{constraintMinValue}}.",
+      "MaxValue": "Value should be at most {{constraintMaxValue}}."
+    }
+  }
+}