updated web

Author: m-kessel

lasso/package-lock.json

@@ -37,7 +37,8 @@
     "react-dom": "^18.0.0",
     "react-pdf": "^9.2.1",
     "react-router": "^7.1.5",
-    "react-router-dom": "^7.1.5"
+    "react-router-dom": "^7.1.5",
+    "react-spreadsheet": "^0.10.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.7.0",

lasso/package.json

@@ -12,26 +12,6 @@ type FeatureItem = {
 };
 
 const FeatureList: FeatureItem[] = [
-//   {
-//     title: 'Try LASSO now!',
-//     //Svg: require('@site/static/img/undraw_services_re_hu5n.svg').default,
-//     image: 'img/features/services.png',
-//     description: (
-//       <>
-//         <div >
-//           <p>Run the following two commands in a local directoy on your local machine (requires <a href="https://docs.docker.com/compose/">docker compose</a>):</p>
-//         <CodeBlock
-//         language="bash">
-//         {`curl https://raw.githubusercontent.com/SoftwareObservatorium/lasso/refs/heads/develop/docker/compose/docker-compose-embedded.yml -o docker-compose.yml
-// docker compose up
-//         `}
-//       </CodeBlock>
-//       <p>Then open LASSO's dashboard <a href="http://localhost:10222/webui/">http://localhost:10222/webui/</a> (login: admin / admin123)</p>
-//         </div>
-//       </>
-//     ),
-//     position: false,
-//   },
   {
     title: 'Test-Driven Software Experimentation with LSL',
     //Svg: require('@site/static/img/undraw_services_re_hu5n.svg').default,

lasso/src/components/HomepageFeatures/index.tsx

@@ -139,7 +139,7 @@ study(name: 'BoundedQueue-Mutation') {
         },
         OPENAI_GEN: {
             label: "Generate with OpenAI gpt4-o-mini",
-            description: "Explore how OpenAI's GPT models can be used with LASSO to prompt for code solutions and tests. The functionality sought after is taken from the HumanEval benchmark (e.g., coding problem HumanEval_13_greatest_common_divisor)",
+            description: "Explore how OpenAI's GPT models can be used with LASSO to prompt for code solutions and tests. The functionality sought after is taken from the HumanEval benchmark (e.g., coding problem HumanEval_13_greatest_common_divisor). Note: We strictly advise against using your personal API keys for OpenAI in our LASSO Playground (Demo) Instance.",
             lsl: `dataSource 'lasso_quickstart'
 study(name: 'ChatGPT') {
 

lasso/src/components/HubFeatures/HubFeatures.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import Spreadsheet, { CellBase, Matrix } from "react-spreadsheet";
+import "./Sheet.css";
+import { Box, Card, CardContent, Divider, TextField, Typography } from "@mui/material";
+
+// just display records
+const ActuationSheet = ({ sheetSignature, sheetData, implementation}: any) => {
+  return (
+    <Box sx={{ minWidth: 275 }}>
+      <Card variant="outlined">
+      <CardContent>
+        <Typography gutterBottom sx={{ color: 'text.secondary', fontSize: 14 }}>
+          Actuation Sheet for {implementation?.className} ({implementation?.id})
+        </Typography>
+        <Typography variant="h5" component="div">
+        <TextField value={sheetSignature} id="outlined-basic" label="Sheet Signature" variant="outlined" />
+        </Typography>
+        <Typography sx={{ color: 'text.secondary', mb: 1.5 }}>Body</Typography>
+        <Typography variant="body2">
+          <Spreadsheet data={sheetData} />
+        </Typography>
+        
+        {implementation?.codeUnit ? <Typography variant="body2">
+          <Divider>Implementation</Divider><TextField multiline fullWidth value={implementation.codeUnit.content} id="outlined-basic" label="Code" variant="outlined" /></Typography> : null }
+        
+      </CardContent>
+      </Card>
+    </Box>
+  );
+
+}
+
+export default ActuationSheet;

lasso/src/components/Sheet/ActuationSheet.tsx

@@ -0,0 +1,3 @@
+.Sheet {
+    text-align: center;
+  }

lasso/src/components/Sheet/Sheet.css

@@ -0,0 +1,71 @@
+import { SheetSpec } from "@site/src/services/models";
+
+
+const parseActuationSheet = (sheet: SheetSpec) => {
+    const matrix = loadSheetJsonl(sheet?.body)
+
+    return matrix
+}
+
+function loadSheetJsonl(jsonl: any) {
+    console.log(`body = ${jsonl}`)
+
+    const sheetData: any[][] = []
+    for (const line of jsonl.trim().split(/[\r\n]+/)) {
+        if (!line) {
+            continue;
+        }
+        //console.log(line);
+        const row = JSON.parse(line + "")
+        //sheetData.push({value: row.})
+
+        const cols: any[] = Object.keys(row.cells).sort().map(key => {
+            //console.log(`Property: ${key}, Value: ${row.cells[key]}`);
+
+            let myVal = row.cells[key];
+            if (myVal.toString() == "[object Object]") {
+                myVal = "";
+            }
+
+            //console.log(`myVal: ${myVal}`);
+
+            return { value: myVal, readOnly: false, className: "text-danger" }
+        });
+
+        sheetData.push(cols)
+    }
+
+    // make certain rows larger if necessary
+    const maxLength = findLargestRow(sheetData)
+    const matrix = sheetData.map((row) => {
+        const nextRow = [...row];
+        if (nextRow.length < maxLength) {
+            let diff = maxLength - nextRow.length
+            nextRow.length += diff;
+
+            //console.log(nextRow.length)
+        }
+        return nextRow;
+    })
+
+    return matrix
+}
+
+function findLargestRow(sheetData: any[][]): number {
+    let length = -1
+    for (let i = 0; i < sheetData.length; i++) {
+        const currentLength = sheetData[i].length
+
+        if (currentLength > length) {
+            length = currentLength
+        }
+    }
+
+    return length
+}
+
+const SheetService = {
+    parseActuationSheet
+};
+
+export default SheetService;

lasso/src/components/Sheet/SheetService.ts

@@ -149,7 +149,7 @@ export default function Home(): JSX.Element {
 docker compose up
                     `}
                     </CodeBlock>
-                    <p>Wait until all services started (LASSO platform, Code Search Index and Artifact Repository) and then open LASSO's dashboard at <a href="http://localhost:10222/webui/">http://localhost:10222/webui/</a> (login: admin / admin123). See <a href="./docs/quickstart/scenario">5 Minute Tutorial</a> for more details.</p>
+                    <p>Wait until all services started (LASSO platform, Code Search Index and Artifact Repository) and then open LASSO's dashboard at <a href="http://localhost:10222/webui/">http://localhost:10222/webui/</a> (login: admin / admin123). See <a href="./docs/quickstart/scenario">5 Minute Tutorial</a> for details, and <a href="./labs">Labs (Playground)</a> for more options.</p>
                   </div>
                 </div>
               </div>

lasso/src/pages/index.tsx

@@ -1,5 +1,13 @@
 # LASSO Labs
 
+## LASSO Platform (Demo Instance)
+
+A public demo LASSO instance (i.e., playground) is available. To try LASSO, head over to [TDSEHub](./hub), select an example LSL pipeline script and press the `Try Now!` button.
+
+### Generative AI (LLM) - Code Generation
+
+For example, run your first code/test generation workflow with OpenAI models [here](lasso/submit?exampleId=OPENAI_GEN).
+
 ## LSLFlow - A Visual Graph Editor for LSL Pipelines
 
 A first visual representation of a graph editor for designing and managing LSL pipelines is now available.
@@ -15,8 +23,4 @@ The project is actively developed by **David Cebulla**, a business informatics s
 
 ### Preview
 
-Visit the Project Website: Explore the preview version of LSLFlow here: [LSLFlow](https://softwareobservatorium.github.io/lslflow/)
-
-## LASSO Platform (Demo Instance)
-
-A public demo LASSO instance (i.e., playground) is available. To try LASSO, head over to [TDSEHub](./hub), select an example LSL pipeline script and press the `Try Now!` button.
+Visit the Project Website: Explore the preview version of LSLFlow here: [LSLFlow](https://softwareobservatorium.github.io/lslflow/)