fix the linting issue and index error

ui/frontend/build_src/.eslintrc.cjs

@@ -52,9 +52,7 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": "warn",
 
     // TS  things turned off for now
-    // "@typescript-eslint/naming-convention": "off",
+    // "@typescript-eslint/prefer-optional-chain": "off",
-    "@typescript-eslint/restrict-template-expressions": "off",
-    "@typescript-eslint/prefer-optional-chain": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/strict-boolean-expressions": "off",
     "@typescript-eslint/no-floating-promises": "off",

ui/frontend/build_src/src/api/index.ts

@@ -56,6 +56,19 @@ export const toggleBetaConfig = async (branch: string) => {
 /**
  * post a new request for an image
  */
+// TODO; put hese some place better
+export type ImageOutput = {
+  data: string;
+  path_abs: string | null;
+  seed: number;
+}
+
+export type ImageReturnType = {
+  output: ImageOutput[];
+  request: {};
+  status: string,
+  session_id: string,
+}
 
 export const MakeImageKey = "MakeImage";
 export const doMakeImage = async (reqBody: ImageRequest) => {

ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback } from "react";
+import React from "react";
 
-import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
+import { ImageRequest } from "../../../stores/imageCreateStore";
 
 import {
   generatedImageMain,

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useImageQueue } from "../../../../../stores/imageQueueStore";

ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts

@@ -1,6 +1,6 @@
 import create from "zustand";
 import produce from "immer";
-import { persist, devtools } from "zustand/middleware";
+import { persist } from "zustand/middleware";
 
 export type ImageCreationUIOptions = {
   isOpenAdvancedSettings: boolean;

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -1,7 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
-import { useQuery } from "@tanstack/react-query";
-import { loadModifications } from "../../../../api";
 
 // @ts-expect-error
 import { PanelBox } from "../../../../styles/shared.css.ts";

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx

@@ -40,26 +40,25 @@ export default function CompletedImages({
         </button>
       )}
       <ul className={completedImagesList}>
-        {images != null &&
+        {images?.map((image, index) => {
-          images.map((image, index) => {
+          if (void 0 === image) {
-            if (void 0 === image) {
+            console.warn(`image ${index} is undefined`);
-              console.warn(`image ${index} is undefined`);
+            return null;
-              return null;
+          }
-            }
 
-            return (
+          return (
-              <li key={image.id}>
+            <li key={image.id}>
-                <button
+              <button
-                  className={imageContain}
+                className={imageContain}
-                  onClick={() => {
+                onClick={() => {
-                    _handleSetCurrentDisplay(index);
+                  _handleSetCurrentDisplay(index);
-                  }}
+                }}
-                >
+              >
-                  <img src={image.data} alt={image.info.prompt} />
+                <img src={image.data} alt={image.info.prompt} />
-                </button>
+              </button>
-              </li>
+            </li>
-            );
+          );
-          })}
+        })}
       </ul>
     </div>
   );

ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts

@@ -1,7 +1,5 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-ignore
-import { vars } from "../../../styles/theme/index.css.ts";
 
 export const displayPanel = style({
   height: "100%",
@@ -18,5 +16,4 @@ export const displayContainer = style({
 });
 
 export const previousImages = style({
-  // height: "150px",
 });

ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx

@@ -5,7 +5,7 @@ import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { doMakeImage, MakeImageKey } from "../../../api";
+import { doMakeImage, MakeImageKey, ImageReturnType, ImageOutput } from "../../../api";
 
 import AudioDing from "./audioDing";
 
@@ -18,9 +18,8 @@ import CompletedImages from "./completedImages";
 import {
   displayPanel,
   displayContainer,
-  // CurrentDisplay,
   previousImages,
-  previousImage, // @ts-expect-error
+  // @ts-expect-error
 } from "./displayPanel.css.ts";
 
 export interface CompletedImagesType {
@@ -52,7 +51,6 @@ export default function DisplayPanel() {
     async () => await doMakeImage(options),
     {
       enabled: isEnabled,
-      // void 0 !== id,
     }
   );
 
@@ -95,11 +93,11 @@ export default function DisplayPanel() {
 
   // this is where we generate the list of completed images
   useEffect(() => {
-    const testReq = {} as ImageRequest;
+
     const completedQueries = completedIds.map((id) => {
       const imageData = queryClient.getQueryData([MakeImageKey, id]);
       return imageData;
-    }) as ImageRequest[];
+    }) as ImageReturnType[];
 
     if (completedQueries.length > 0) {
       // map the completedImagesto a new array
@@ -107,13 +105,10 @@ export default function DisplayPanel() {
       const temp = completedQueries
         .map((query, index) => {
           if (void 0 !== query) {
-            // @ts-ignore
+            return query.output.map((data: ImageOutput, index: number) => {
-            return query.output.map((data, index) => {
-              // @ts-ignore
               return {
-                id: `${completedIds[index]}${idDelim}-${data.seed}-${data.index}`,
+                id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`,
                 data: data.data,
-                // @ts-ignore
                 info: { ...query.request, seed: data.seed },
               };
             });

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 
 import {
   AppLayout,