pdb-js/src/app/customizable-grid/customizable-grid.component.html

@@ -56,6 +56,7 @@
 
 .cdk-drag-preview {
   box-sizing: border-box;
+  border-color: red;
   border-radius: 4px;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
@@ -63,6 +64,7 @@
 
 .cdk-drag-placeholder {
   opacity: 0.3;
+  border-color: green;
 }
 
 .cdk-drag-animating {
@@ -96,6 +98,7 @@ button {
 >
   <div
     cdkDropList
+    style="outline: dashed 2px black;"
     (cdkDropListEntered)="onDropListEntered($event)"
     (cdkDropListDropped)="onDropListDropped()"
   ></div>
@@ -105,6 +108,6 @@ button {
     (cdkDropListDropped)="onDropListDropped()"
     *ngFor="let item of items"
   >
-    <div cdkDrag class="example-box" [ngClass]="{'example-box--wide': item%2==1}">{{ item }}</div>
+    <div cdkDrag class="example-box" [ngClass]="{'example-box--wide': item%14==0}">{{ item }}</div>
   </div>
 </div>

pdb-js/src/app/customizable-grid/customizable-grid.component.ts

@@ -104,6 +104,7 @@ export class CustomizableGridComponent implements AfterViewInit {
     this.dragRef = item._dragRef;
 
     placeholderElement.style.display = '';
+    placeholderElement.style.backgroundColor ='pink';
 
     dropElement.parentElement!.insertBefore(
       placeholderElement,

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -111,7 +111,7 @@ export class DashboardComponent implements OnInit {
       data: {text:""},
       width: '600px'
     }).afterClosed().subscribe((text: string) => {
-      const widget = new TextWidget(crypto.randomUUID(),'MEDIUM', text);
+      const widget = new TextWidget((<any>window).randomId(),'MEDIUM', text);
       this.dashboard!.texts.push(widget); 
       this.dashboard!.arrangement[0].push(widget.id);
     });
@@ -124,7 +124,7 @@ export class DashboardComponent implements OnInit {
       height: 'calc(100% - 1em)'
     }).afterClosed().subscribe((config: PlotConfig | "") => {
       if (config != "" && config.query.length > 0) {
-        const widget = new PlotWidget(crypto.randomUUID(), 'MEDIUM', config);
+        const widget = new PlotWidget((<any>window).randomId(), 'MEDIUM', config);
         this.dashboard!.plots.push(widget);
         this.dashboard!.arrangement[0].push(widget.id);
         this.plotWidgetRenderData.push(new PlotWidgetRenderData(widget));

pdb-js/src/app/dashboard.service.ts

@@ -77,7 +77,7 @@ export class PlotWidget extends BaseWidget {
     const fullHeight = window.innerHeight-30;
 
     const request = new PlotRequest(
-      (<any>window).submitterId+crypto.randomUUID(),
+      (<any>window).submitterId+(<any>window).randomId(),
       widget.config, 
       {
         'main': new RenderOptions(height,width, false, true),

pdb-js/src/main.ts

@@ -8,7 +8,11 @@ if (environment.production) {
   enableProdMode();
 }
 
-(<any>window).submitterId = crypto.randomUUID();
+(<any>window).randomId = () => {
+  return Math.random().toString(36).replace('0.', '') + Math.random().toString(36).replace('0.', '');
+};
+
+(<any>window).submitterId = (<any>window).randomId();
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));