Skip to content

Commit edb463b

Browse files
mishig25mishig25
committed
bring maximize functionality back
1 parent 38708d1 commit edb463b

File tree

27 files changed

+78
-25
lines changed

27 files changed

+78
-25
lines changed

‎packages/widgets/src/lib/components/Icons/IconMaximize.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 32 32"
16+
>
17+
<path d="M22 16h2V8h-8v2h6v6z" fill="currentColor" />
18+
<path d="M8 24h8v-2h-6v-6H8v8z" fill="currentColor" />
19+
<path
20+
d="M26 28H6a2.002 2.002 0 0 1-2-2V6a2.002 2.002 0 0 1 2-2h20a2.002 2.002 0 0 1 2 2v20a2.002 2.002 0 0 1-2 2zM6 6v20h20.001L26 6z"
21+
fill="currentColor"
22+
/>
23+
</svg>

‎packages/widgets/src/lib/components/InferenceWidget/shared/WidgetFooter/WidgetFooter.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
<script lang="ts">
2+
import type { WidgetProps } from "../types.js";
3+
import { identity } from "svelte/internal";
4+
import { widgetStates, updateWidgetState } from "../../stores.js";
25
import IconCode from "../../..//Icons/IconCode.svelte";
6+
import IconMaximize from "../../..//Icons/IconMaximize.svelte";
37
8+
export let model: WidgetProps["model"];
49
export let outputJson: string;
510
export let isDisabled = false;
611
12+
$: isMaximized = $widgetStates?.[model.id]?.isMaximized;
13+
714
let isOutputJsonVisible = false;
815
</script>
916

@@ -20,6 +27,17 @@
2027
JSON Output
2128
</button>
2229
{/if}
30+
<button
31+
class="ml-auto flex items-center"
32+
on:click|preventDefault={() => updateWidgetState(model.id, "isMaximized", true)}
33+
>
34+
<IconMaximize classNames="mr-1" />
35+
{#if !isMaximized}
36+
Maximize
37+
{:else}
38+
Minimize
39+
{/if}
40+
</button>
2341
</div>
2442
{#if outputJson && isOutputJsonVisible}
2543
<pre

‎packages/widgets/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@
1010
import WidgetFooter from "../WidgetFooter/WidgetFooter.svelte";
1111
import WidgetHeader from "../WidgetHeader/WidgetHeader.svelte";
1212
import WidgetInfo from "../WidgetInfo/WidgetInfo.svelte";
13+
import IconCross from "../../..//Icons/IconCross.svelte";
1314
import { getModelLoadInfo } from "../../..//InferenceWidget/shared/helpers.js";
1415
import { modelLoadStates, widgetStates, updateWidgetState } from "../../stores.js";
1516
1617
export let apiUrl: string;
1718
export let model: WidgetProps["model"];
1819
export let includeCredentials: WidgetProps["includeCredentials"];
1920
21+
$: isMaximized = $widgetStates?.[model.id]?.isMaximized;
22+
2023
const isDisabled = model.inference !== InferenceDisplayability.Yes && model.pipeline_tag !== "reinforcement-learning";
2124
updateWidgetState(model.id, "isDisabled", isDisabled);
2225
@@ -40,7 +43,15 @@
4043
<WidgetHeader {model} noTitle={true} />
4144
<WidgetInfo {model} />
4245
{:else if $modelLoadStates[model.id] || model.inference !== InferenceDisplayability.Yes}
43-
<form class="flex w-full max-w-full flex-col">
44-
<slot {isDisabled} {WidgetInfo} {WidgetHeader} {WidgetFooter} />
46+
<form
47+
class="flex w-full max-w-full flex-col
48+
{isMaximized ? 'fixed inset-0 z-20 bg-white p-12' : ''}"
49+
>
50+
{#if isMaximized}
51+
<button class="absolute right-12 top-6" on:click={() => updateWidgetState(model.id, "isMaximized", false)}>
52+
<IconCross classNames="text-xl text-gray-500 hover:text-black" />
53+
</button>
54+
{/if}
55+
<slot {WidgetInfo} {WidgetHeader} {WidgetFooter} />
4556
</form>
4657
{/if}

‎packages/widgets/src/lib/components/InferenceWidget/shared/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export interface ModelLoadInfo {
4343
export interface WidgetState {
4444
isDisabled?: boolean;
4545
noInference?: boolean;
46+
isMaximized?: boolean;
4647
}
4748

4849
export type TableData = Record<string, (string | number)[]>;

‎packages/widgets/src/lib/components/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,5 +185,5 @@
185185

186186
<WidgetOutputChart classNames="pt-4" {output} />
187187

188-
<WidgetFooter {isDisabled} {outputJson} />
188+
<WidgetFooter {model} {isDisabled} {outputJson} />
189189
</WidgetWrapper>

‎packages/widgets/src/lib/components/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,5 +185,5 @@
185185
</div>
186186
{/each}
187187

188-
<WidgetFooter {isDisabled} {outputJson} />
188+
<WidgetFooter {model} {isDisabled} {outputJson} />
189189
</WidgetWrapper>

‎packages/widgets/src/lib/components/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,5 +208,5 @@
208208

209209
<WidgetOutputText classNames="mt-4" {output} />
210210

211-
<WidgetFooter {isDisabled} {outputJson} />
211+
<WidgetFooter {model} {isDisabled} {outputJson} />
212212
</WidgetWrapper>

‎packages/widgets/src/lib/components/InferenceWidget/widgets/ConversationalWidget/ConversationalWidget.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,5 +180,5 @@
180180

181181
<WidgetInfo {model} {computeTime} {error} {modelLoading} />
182182

183-
<WidgetFooter {isDisabled} {outputJson} />
183+
<WidgetFooter {model} {isDisabled} {outputJson} />
184184
</WidgetWrapper>

‎packages/widgets/src/lib/components/InferenceWidget/widgets/FeatureExtractionWidget/FeatureExtractionWidget.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,5 +189,5 @@
189189
{/if}
190190
{/if}
191191

192-
<WidgetFooter {isDisabled} {outputJson} />
192+
<WidgetFooter {model} {isDisabled} {outputJson} />
193193
</WidgetWrapper>

‎packages/widgets/src/lib/components/InferenceWidget/widgets/FillMaskWidget/FillMaskWidget.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,5 +156,5 @@
156156

157157
<WidgetOutputChart classNames="pt-4" {output} />
158158

159-
<WidgetFooter {isDisabled} {outputJson} />
159+
<WidgetFooter {model} {isDisabled} {outputJson} />
160160
</WidgetWrapper>

0 commit comments

Comments
 (0)