wip

src/lib/components/composites/input/ToggleableInput.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { WithElementRef } from "bits-ui";
+    import { cn } from "$lib/utils";
+
+    type Props = WithElementRef<HTMLInputAttributes> & {
+        isReadonly: boolean;
+    };
+
+    let { isReadonly = $bindable(true), value = $bindable(), class: className }: Props = $props();
+</script>
+
+<div
+    class={cn(
+        "border-input bg-background focus-visible:ring-ring rounded-md border px-1.5 py-1 w-full block resize-none text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 overflow-y-scroll",
+        className,
+    )}
+    role="textbox"
+    contenteditable={!isReadonly}
+>
+    {value}
+</div>
+<!--  -->

src/lib/components/composites/paper-components/PaperInfo.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Paper, PaperSpec } from "$lib/model/backend";
+    import { displayAuthors } from "$lib/utils";
 
     interface Props {
         paper: Paper | PaperSpec;
@@ -17,9 +18,7 @@
     </div>
     <div class="flex flex-row items-center text-hint truncate">
         {#if paper.authors.length > 0}
-            <span class="place-content-start truncate"
-                >{paper.authors.map((a) => `${a.firstName} ${a.lastName}`).join(", ")}</span
-            >
+            <span class="place-content-start truncate">{displayAuthors(paper.authors)}</span>
         {:else}
             <span class="italic">unknown authors</span>
         {/if}

src/lib/components/composites/paper-components/paper-view/PaperView.svelte

@@ -2,7 +2,7 @@
     import PaperNavigationBar from "$lib/components/composites/navigation-bar/PaperNavigationBar.svelte";
     import PaperDetailsCard from "$lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte";
     import PaperResearchContextCard from "$lib/components/composites/paper-components/paper-view/cards/PaperResearchContextCard.svelte";
-    import type { Paper, User } from "$lib/model/backend";
+    import type { Paper, PaperSpec, User } from "$lib/model/backend";
     import PaperBookmarkButton from "../../PaperBookmarkButton.svelte";
     import AcceptButton from "./decision-buttons/AcceptButton.svelte";
     import DeclineButton from "./decision-buttons/DeclineButton.svelte";
@@ -13,21 +13,25 @@
         user: User;
         paper: Paper;
         isPaperBookmarked?: boolean;
-        showButtonBar: boolean;
+        showButtonBar?: boolean;
         backRef: string;
         userConfig: {
             isReviewMode: boolean;
             showMaybeButton: boolean;
         };
+        allowEditModeToggle?: boolean;
+        startInEditMode?: boolean;
     }
 
     const {
         user,
         paper,
         isPaperBookmarked = false,
-        showButtonBar,
+        showButtonBar = false,
         backRef,
         userConfig,
+        allowEditModeToggle = false,
+        startInEditMode = false,
     }: Props = $props();
 </script>
 
@@ -41,17 +45,24 @@ Additonally, there are buttons to navigate to the previous or next paper.
 - when `userConfig.isReviewMode` is false, then no decision buttons are shown
 - when `userConfig.showMaybeButton` is false, then the maybe button is not shown
 
+Edit Mode:
+- in the edit mode, the user can edit the paper details. When the mode is turned off, the details are displayed as read-only.
+- when `allowEditModeToggle` is true, then the user can toggle the edit mode
+- when `startInEditMode` is true, then the paper details can be edited from the start
+
 Usage:
 ```svelte
     <PaperView
         user={user}
         paper={paper}
-        showButtonBar={true}
+        showButtonBar
         backRef="/"
         userConfig={{
             isReviewMode: true,
             showMaybeButton: true,
         }}
+        allowEditModeToggle
+        startInEditMode
     />
 ```
 -->
@@ -61,7 +72,7 @@ Usage:
 </div>
 <main class="flex flex-col h-full w-full px-2 py-4 gap-5">
     <div class="flex flex-row w-full h-full gap-5">
-        <PaperDetailsCard />
+        <PaperDetailsCard {paper} allowEditModeToggle startInEditMode />
         <PaperResearchContextCard />
     </div>
     {#if showButtonBar}

src/lib/components/composites/paper-components/paper-view/cards/PaperCard.svelte

@@ -33,10 +33,10 @@ Usage:
 ```
 -->
 <Card.Root class="shadow-lg border-container-border-grey w-full h-full">
-    <section>
-        <Tabs.Root value={tabs.length == 0 ? "" : tabs[0].value}>
+    <section class="flex flex-col h-full">
+        <Tabs.Root value={tabs.length == 0 ? "" : tabs[0].value} class="flex flex-col h-full">
             <UnderlineTabsList {tabs} />
-            <Card.Content class="p-5">
+            <Card.Content class="p-5 flex flex-col h-full overflow-hidden">
                 {@render children()}
             </Card.Content>
         </Tabs.Root>

src/lib/components/composites/paper-components/paper-view/cards/PaperCardContent.svelte

@@ -22,8 +22,8 @@ Usage:
     </PaperCardContent>
 ```
 -->
-<Tabs.Content {value}>
-    <div class="flex flex-col gap-5">
+<Tabs.Content {value} class="h-full overflow-hidden">
+    <div class="flex flex-col gap-5 h-full">
         {@render children()}
     </div>
 </Tabs.Content>

src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte

@@ -1,11 +1,38 @@
 <script lang="ts">
+    import ToggleableInput from "$lib/components/composites/input/ToggleableInput.svelte";
+    import Textarea from "$lib/components/primitives/textarea/textarea.svelte";
+    import type { Paper } from "$lib/model/backend";
+    import { displayAuthors } from "$lib/utils";
     import PaperCard from "./PaperCard.svelte";
     import PaperCardContent from "./PaperCardContent.svelte";
 
+    interface Props {
+        paper: Paper;
+        allowEditModeToggle: boolean;
+        startInEditMode: boolean;
+    }
+
+    const { paper, allowEditModeToggle, startInEditMode }: Props = $props();
+
+    let isInEditMode = $state(startInEditMode);
+
     const tabs = [
         { value: "1", label: "Information" },
         { value: "2", label: "Document" },
     ];
+
+    const basicInfos = [
+        { label: "Title", value: paper.title },
+        { label: "Authors", value: displayAuthors(paper.authors) },
+        { label: "Year", value: paper.year },
+        { label: "Publisher", value: "..." },
+    ];
+    const additionalInfos = [
+        { label: "Publication Type", value: paper.type },
+        { label: "Publication Name", value: "..." },
+        { label: "DOI", value: paper.doi },
+    ];
+    let infoList = $state(basicInfos);
 </script>
 
 <!--
@@ -14,24 +41,40 @@ Paper Card for paper details in the Paper View component.
 
 Usage:
 ```svelte
-<PaperDetailsCard />
+    <PaperDetailsCard {paper} allowEditModeToggle startInEditMode />
 ```
 -->
 <PaperCard {tabs}>
     <PaperCardContent value="1">
-        <span
-            >Will be implemented in <a
-                class="text-blue-400"
-                href="https://github.com/SE-UUlm/snowballr-frontend/issues/41">#41</a
-            >.</span
-        >
+        <section class="flex flex-col gap-2">
+            <h2>General Information</h2>
+            <table>
+                <tbody>
+                    {#each infoList as { label, value }}
+                        <tr>
+                            <td class="py-1 pr-2 flex items-start"><span>{label}</span></td>
+                            <td class="py-0.5 pb-1 w-full">
+                                <ToggleableInput isReadonly={!isInEditMode} {value} />
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </section>
+        <section class="flex flex-col gap-2 overflow-hidden">
+            <h2>Abstract</h2>
+            <div class="flex h-full overflow-hidden">
+                <ToggleableInput isReadonly={!isInEditMode} value={paper.abstrakt} />
+            </div>
+        </section>
     </PaperCardContent>
     <PaperCardContent value="2">
-        <span
-            >Will be implemented in <a
-                class="text-blue-400"
-                href="https://github.com/SE-UUlm/snowballr-frontend/issues/98">#98</a
-            >.</span
-        >
+        <span>
+            Will be implemented in
+            <a class="text-blue-400" href="https://github.com/SE-UUlm/snowballr-frontend/issues/98">
+                #98
+            </a>
+            .
+        </span>
     </PaperCardContent>
 </PaperCard>

src/lib/utils.ts

@@ -1,6 +1,11 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { Author } from "./model/backend";
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function displayAuthors(authors: Author[]) {
+    return authors.map((author) => `${author.firstName} ${author.lastName}`).join(", ");
+}

src/routes/paper/[paperId]/+page.svelte

@@ -11,7 +11,7 @@
 <PaperView
     {user}
     {paper}
-    showButtonBar={false}
     backRef="/"
     userConfig={{ isReviewMode: false, showMaybeButton: false }}
+    allowEditModeToggle
 />

src/routes/paper/[paperId]/+page.ts

@@ -10,7 +10,9 @@ export const load: PageLoad = ({ params }) => {
         doi: "Doi",
         id: paperId,
         title: "Field-Sensitive Pointer Analysis for Static Dataflow in the R Programming Language",
-        abstrakt: "Abstrakt",
+        abstrakt: `Context Many researchers rely on the R programming language to perform their statistical analyses and visualizations in the form of R scripts. However, recent research and experience show, that many of these scripts contain problems. From being hard to comprehend by combining several analyses and plots into a single source file to being non-reproducible, with a lack of analysis tools supporting the writing of correct and maintainable code. Objective In this work, we address the problem of comprehending and maintaining R scripts by proposing flowR, a program slicer and static dataflow analyzer for the R programming language, which can be integrated directly into Visual Studio Code. Given a set of variables of interest, like the generation of a single figure in a script, flowR automatically reduces the program to the parts relevant for the output of interest, like the value of a variable. Method First, we use static program analysis to construct a detailed dataflow graph of the R script. The analysis supports loops, function calls, side effects, sourcing external files, and even redefinitions of R's primitive constructs. Subsequently, we calculate the program slice by solving a reachability problem on the graph, collecting all required parts and presenting them to the user. Results Providing several interactive ways of slicing the program, we require an average of 16 ms to calculate the slice on a given dataflow graph, reducing the code by around 94% of tokens.
+
+The demonstration video is available at https://youtu.be/Zgq6rnbvvhk. For the full source code and extensive documentation, refer to https://github.com/Code-Inspect/flowr. To try the docker image, use docker run -rm -it eagleoutice/flowr.`,
         year: 2015,
         type: "Paper",
         authors: [

src/routes/project/[projectId]/paper/[paperId]/+page.svelte

@@ -11,7 +11,8 @@
 <PaperView
     {user}
     {paper}
-    showButtonBar={true}
+    showButtonBar
     backRef={`/project/${project.id}/dashboard`}
     userConfig={{ isReviewMode, showMaybeButton: true }}
+    allowEditModeToggle
 />

src/routes/project/[projectId]/paper/[paperId]/+page.ts

@@ -10,7 +10,9 @@ export const load: PageLoad = ({ params }) => {
         doi: "Doi",
         id: paperId,
         title: "Field-Sensitive Pointer Analysis for Static Dataflow in the R Programming Language",
-        abstrakt: "Abstrakt",
+        abstrakt: `Context Many researchers rely on the R programming language to perform their statistical analyses and visualizations in the form of R scripts. However, recent research and experience show, that many of these scripts contain problems. From being hard to comprehend by combining several analyses and plots into a single source file to being non-reproducible, with a lack of analysis tools supporting the writing of correct and maintainable code. Objective In this work, we address the problem of comprehending and maintaining R scripts by proposing flowR, a program slicer and static dataflow analyzer for the R programming language, which can be integrated directly into Visual Studio Code. Given a set of variables of interest, like the generation of a single figure in a script, flowR automatically reduces the program to the parts relevant for the output of interest, like the value of a variable. Method First, we use static program analysis to construct a detailed dataflow graph of the R script. The analysis supports loops, function calls, side effects, sourcing external files, and even redefinitions of R's primitive constructs. Subsequently, we calculate the program slice by solving a reachability problem on the graph, collecting all required parts and presenting them to the user. Results Providing several interactive ways of slicing the program, we require an average of 16 ms to calculate the slice on a given dataflow graph, reducing the code by around 94% of tokens.
+
+The demonstration video is available at https://youtu.be/Zgq6rnbvvhk. For the full source code and extensive documentation, refer to https://github.com/Code-Inspect/flowr. To try the docker image, use docker run -rm -it eagleoutice/flowr.`,
         year: 2015,
         type: "Paper",
         authors: [