Add more module previews (equinor#374)

frontend/src/modules/Grid3D/preview.tsx

@@ -0,0 +1,8 @@
+import { DrawPreviewFunc } from "@framework/Preview";
+import previewImg from "./preview.webp";
+
+export const preview: DrawPreviewFunc = function (width: number, height: number) {
+    return (
+        <img src={previewImg} style={{width, height}} className="object-cover object-center" />
+    );
+};

frontend/src/modules/Grid3D/registerModule.tsx

@@ -1,5 +1,6 @@
 import { ModuleRegistry } from "@framework/ModuleRegistry";
 
+import { preview } from "./preview";
 import state from "./state";
 
-ModuleRegistry.registerModule<state>({ moduleName: "Grid3D", defaultTitle: "3D grid" });
+ModuleRegistry.registerModule<state>({ moduleName: "Grid3D", defaultTitle: "3D grid", preview });

frontend/src/modules/Grid3DIntersection/preview.tsx

@@ -0,0 +1,6 @@
+import { DrawPreviewFunc } from "@framework/Preview";
+import previewImg from "./preview.svg";
+
+export const preview: DrawPreviewFunc = function (width: number, height: number) {
+   return <img src={previewImg} style={{width, height}} />
+};

frontend/src/modules/Grid3DIntersection/registerModule.tsx

@@ -1,5 +1,6 @@
 import { ModuleRegistry } from "@framework/ModuleRegistry";
 
+import { preview } from "./preview";
 import state from "./state";
 
-ModuleRegistry.registerModule<state>({ moduleName: "Grid3DIntersection", defaultTitle: "3D grid intersection" });
+ModuleRegistry.registerModule<state>({ moduleName: "Grid3DIntersection", defaultTitle: "3D grid intersection", preview });

frontend/src/modules/Map/preview.tsx

@@ -0,0 +1,8 @@
+import { DrawPreviewFunc } from "@framework/Preview";
+import previewImg from "./preview.webp";
+
+export const preview: DrawPreviewFunc = function (width: number, height: number) {
+    return (
+        <img src={previewImg} style={{width, height}} className="object-cover object-center" />
+    );
+};

frontend/src/modules/Map/registerModule.ts

@@ -1,10 +1,12 @@
 import { ModuleRegistry } from "@framework/ModuleRegistry";
 import { SyncSettingKey } from "@framework/SyncSettings";
 
+import { preview } from "./preview";
 import { MapState } from "./MapState";
 
 ModuleRegistry.registerModule<MapState>({
     moduleName: "Map",
     defaultTitle: "Map",
     syncableSettingKeys: [SyncSettingKey.ENSEMBLE, SyncSettingKey.SURFACE, SyncSettingKey.DATE],
+    preview
 });

frontend/src/modules/Pvt/preview.tsx

@@ -0,0 +1,6 @@
+import { DrawPreviewFunc } from "@framework/Preview";
+import previewImg from "./preview.svg";
+
+export const preview: DrawPreviewFunc = function (width: number, height: number) {
+   return <img src={previewImg} style={{width, height}} />
+};

frontend/src/modules/Pvt/registerModule.tsx

@@ -1,5 +1,6 @@
 import { ModuleRegistry } from "@framework/ModuleRegistry";
 
+import { preview } from "./preview";
 import state from "./state";
 
-ModuleRegistry.registerModule<state>({ moduleName: "Pvt", defaultTitle: "PVT" });
+ModuleRegistry.registerModule<state>({ moduleName: "Pvt", defaultTitle: "PVT", preview });

frontend/src/modules/WellCompletions/preview.tsx

@@ -0,0 +1,6 @@
+import { DrawPreviewFunc } from "@framework/Preview";
+import previewImg from "./preview.svg";
+
+export const preview: DrawPreviewFunc = function (width: number, height: number) {
+   return <img src={previewImg} style={{width, height}} />
+};

frontend/src/modules/WellCompletions/registerModule.ts

@@ -1,5 +1,6 @@
 import { ModuleRegistry } from "@framework/ModuleRegistry";
 
+import { preview } from "./preview";
 import { State } from "./state";
 
-ModuleRegistry.registerModule<State>({ moduleName: "WellCompletions", defaultTitle: "Well Completions" });
+ModuleRegistry.registerModule<State>({ moduleName: "WellCompletions", defaultTitle: "Well Completions", preview });