Skip to content

Commit 7b3a327

Browse files
JerryIJerryI
committed
Optimizations for sidebar. Memory leaks
1 parent e6582eb commit 7b3a327

File tree

7 files changed

+229
-165
lines changed

7 files changed

+229
-165
lines changed

‎Components/Sidebar/Body.wlx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1-
ItemList := ImportComponent["Components/ItemList.wlx"];
2-
1+
ItemList = ImportComponent["Components/ItemList.wlx"];
32

3+
Component[OptionsPattern[]] := With[{
4+
icons = OptionValue["Icons"],
5+
port = OptionValue["Port"],
6+
parameters = OptionValue["Parameters"],
7+
path = OptionValue["Path"],
8+
rawPath = OptionValue["RawPath"]
9+
},
410

511
<nav class="flex flex-1 flex-col" style="-webkit-app-region:none">
612
<ul role="list" class="flex flex-1 flex-col gap-y-7 p-0">
713
<li class="list-none">
8-
<ItemList Icons={$Options["Icons"]} Port={$Options["Port"]} Parameters={$Options["Parameters"]} Level={0} Class={"-mx-2 space-y-0"} RawPath={$Options["RawPath"]} Path={$Options["Path"]} Current={$Options["Path"]} />
14+
<ItemList Icons={icons} Port={port} Parameters={parameters} Level={0} Class={"-mx-2 space-y-0"} RawPath={rawPath} Path={path} Current={path} />
915
</li>
1016

1117
</ul>
1218
</nav>
1319

20+
];
21+
22+
Options[Component] = {"Icons"->Null, "Port"->Null, "RawPath"->Null, "Path"->Null, "Parameters"-><||>}
23+
24+
Component
25+
1426

‎Components/Sidebar/Components/Dropdown.wlx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
With[{Filename = URLEncode[$Options["Filename"]], Parameters = $Options["Parameters"], Color = (If[StringQ[#], #, "teal"]&) @ ($Options["Parameters"]["AccentColor"]), Uid = CreateUUID[], Port = $Options["Port"]},
1+
Component[OptionsPattern[]] := With[{Filename = URLEncode[OptionValue["Filename"]], Parameters = OptionValue["Parameters"], Color = (If[StringQ[#], #, "teal"]&) @ (OptionValue["Parameters"]["AccentColor"]), Uid = CreateUUID[], Port = OptionValue["Port"]},
22
With[{Layout =
3-
If[!DirectoryQ[$Options["Filename"]],
3+
If[!DirectoryQ[OptionValue["Filename"]],
44
{
55
<div class="py-0 px-2" role="none">
66
<button data-name="Rename" class="block w-full hover:bg-{Color}-400 hover:text-white text-black group flex items-center px-1 my-1 py-1 rounded text-sm leading-4 dark:text-gray-400" role="menuitem" tabindex="-1" id="menu-item-0">
@@ -145,4 +145,8 @@ With[{Filename = URLEncode[$Options["Filename"]], Parameters = $Options["Paramet
145145
</script>
146146
</div>
147147
]
148-
]
148+
]
149+
150+
Options[Component] = {"Parameters"-><||>, "Filename"->"", "Port"->""};
151+
152+
Component

‎Components/Sidebar/Components/ItemDirectory.wlx‎

Lines changed: 90 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,103 @@
1-
ItemList := ImportComponent["ItemList.wlx"];
2-
File = $Options["File"];
3-
Level = $Options["Level"] + 1;
1+
Dropdown = ImportComponent["Dropdown.wlx"];
42

5-
Icons = $Options["Icons"];
63

7-
Parameters = $Options["Parameters"];
4+
Component[OptionsPattern[]] := With[{
5+
File = OptionValue["File"],
6+
Level = OptionValue["Level"] + 1,
87

9-
Dropdown := ImportComponent["Dropdown.wlx"];
8+
ItemList = OptionValue["ListComponent"],
9+
Icons = OptionValue["Icons"],
1010

11-
(*/* uids for events */*)
12-
ButtonId = CreateUUID[];
13-
Controller = CreateUUID[];
14-
Port = $Options["Port"];
11+
Parameters = OptionValue["Parameters"],
1512

16-
(*/* state of a widget */*)
17-
State = "Empty";
13+
Port = OptionValue["Port"],
1814

19-
(*/* handling clicks */*)
20-
EventHandler[ButtonId, Function[Null,
21-
Print[State];
22-
Switch[State,
23-
"Empty",
24-
State = "Open";
25-
With[{client = $Client},
26-
EventFire[Controller, "Load", <|"Client"->client|>];
27-
],
28-
29-
"Open",
30-
State = "Hidden";
31-
With[{client = $Client},
32-
EventFire[Controller, "Hide", <|"Client"->client|>];
33-
],
34-
35-
"Hidden",
36-
State = "Open";
37-
With[{client = $Client},
38-
EventFire[Controller, "Show", <|"Client"->client|>];
39-
]
40-
];
41-
]];
42-
43-
Selected = If[TrueQ[$Options["Selected"]], "bg-yellow-300", ""];
44-
45-
<div style="position:relative">
46-
<div class="rounded-md">
47-
<button id="{ButtonId}" type="button" class="{Selected} flex items-center w-full text-left rounded-md pb-0.5 pt-0.5 pl-1 gap-x-1 text-sm text-gray-700 dark:text-gray-400" aria-controls="sub-menu-1" aria-expanded="false">
48-
49-
<svg id="svg-{ButtonId}" class="text-gray-800 dark:text-gray-400 h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
50-
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
51-
</svg>
52-
<svg class="h-4 w-4 shrink-0 text-gray-800 dark:text-gray-400 group-hover:text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
53-
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
54-
</svg>
55-
<FileBaseName><File/></FileBaseName>
15+
ButtonId = CreateUUID[],
16+
Controller = CreateUUID[],
17+
18+
Selected = If[TrueQ[OptionValue["Selected"]], "bg-yellow-300", ""]
19+
20+
}, Module[{State = "Empty", initialized = False},
21+
22+
(*/* handling clicks */*)
23+
EventHandler[ButtonId, Function[Null,
5624

57-
</button>
25+
If[!initialized, (* /* FIXME. Make global destroy signal */*)
26+
initialized = True;
27+
With[{client = EventClone[$Client]},
28+
EventHandler[client, {"Closed" -> Function[Null,
29+
EventRemove[client];
30+
ClearAll[State];
31+
ClearAll[initialized];
32+
EventRemove[ButtonId];
33+
EventRemove[Controller];
34+
]}];
35+
];
36+
];
37+
38+
Switch[State,
39+
"Empty",
40+
State = "Open";
41+
With[{client = $Client},
42+
EventFire[Controller, "Load", <|"Client"->client|>];
43+
],
44+
45+
"Open",
46+
State = "Hidden";
47+
With[{client = $Client},
48+
EventFire[Controller, "Hide", <|"Client"->client|>];
49+
],
50+
51+
"Hidden",
52+
State = "Open";
53+
With[{client = $Client},
54+
EventFire[Controller, "Show", <|"Client"->client|>];
55+
]
56+
];
57+
]];
58+
59+
60+
<div style="position:relative">
61+
<div class="rounded-md">
62+
<button id="{ButtonId}" type="button" class="{Selected} flex items-center w-full text-left rounded-md pb-0.5 pt-0.5 pl-1 gap-x-1 text-sm text-gray-700 dark:text-gray-400" aria-controls="sub-menu-1" aria-expanded="false">
63+
64+
<svg id="svg-{ButtonId}" class="text-gray-800 dark:text-gray-400 h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
65+
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
66+
</svg>
67+
<svg class="h-4 w-4 shrink-0 text-gray-800 dark:text-gray-400 group-hover:text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
68+
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
69+
</svg>
70+
<FileBaseName><File/></FileBaseName>
71+
72+
</button>
73+
74+
<Dropdown Parameters={Parameters} Filename={File} Port={Port}/>
75+
</div>
76+
77+
<WebUIEventListener Type={"click"} Id={ButtonId} Event={ButtonId} />
78+
79+
<WebUIJSBind Event={Controller}>
80+
const button = document.getElementById('svg-<ButtonId/>');
81+
this.on('Load', (data) => {
82+
button.classList.add('rotate-90', 'text-gray-500');
83+
});
5884

59-
<Dropdown Parameters={Parameters} Filename={File} Port={Port}/>
60-
</div>
85+
this.on('Show', (data) => {
86+
button.classList.add('rotate-90', 'text-gray-500');
87+
});
6188

62-
<WebUIEventListener Type={"click"} Id={ButtonId} Event={ButtonId} />
89+
this.on('Hide', (data) => {
90+
button.classList.remove('rotate-90', 'text-gray-500');
91+
});
92+
</WebUIJSBind>
6393

64-
<WebUIJSBind Event={Controller}>
65-
const button = document.getElementById('svg-<ButtonId/>');
66-
this.on('Load', (data) => {
67-
button.classList.add('rotate-90', 'text-gray-500');
68-
});
94+
<WebUILazyLoad Event={Controller}>
95+
<ItemList Port={Port} Icons={Icons} Parameters={Parameters} Level={Level} Class={"mt-0"} Path={File} />
96+
</WebUILazyLoad>
97+
</div>
6998

70-
this.on('Show', (data) => {
71-
button.classList.add('rotate-90', 'text-gray-500');
72-
});
99+
] ]
73100

74-
this.on('Hide', (data) => {
75-
button.classList.remove('rotate-90', 'text-gray-500');
76-
});
77-
</WebUIJSBind>
101+
Options[Component] = {"Selected"->False, "File"->"", "Level"->0, "Icons"->"", "Parameters"-><||>, "Port"->"", "ListComponent"->Null};
78102

79-
<WebUILazyLoad Event={Controller}>
80-
<ItemList Port={Port} Icons={Icons} Parameters={Parameters} Level={Level} Class={"mt-0"} Path={File} />
81-
</WebUILazyLoad>
82-
</div>
103+
Component

‎Components/Sidebar/Components/ItemFile.wlx‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
1-
Dropdown := ImportComponent["Dropdown.wlx"];
1+
Dropdown = ImportComponent["Dropdown.wlx"];
22

3-
File = $Options["File"];
3+
Component[OptionsPattern[]] := With[{
4+
File = OptionValue["File"],
5+
Selected = If[TrueQ[OptionValue["Selected"]], "bg-gray-454-half dark:bg-gray-700", ""],
6+
Port = OptionValue["Port"]
7+
}, With[{
8+
Icon = FileExtension[File] /. Join[OptionValue["Icons"], {
9+
"wln" -> <svg class="w-4 h-5 text-gray-800" viewBox="2 0 20 24" stroke="currentColor" fill="rgb(153 246 228)" stroke-width="1"><path d="M8 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H8M8 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H8M8 4V20M12 11H16M12 8H16"></path></svg>
10+
,
11+
_ -> ""
12+
}],
413

5-
Selected = If[TrueQ[$Options["Selected"]], "bg-gray-454-half dark:bg-gray-700", ""];
6-
7-
Port = $Options["Port"];
8-
9-
Icon = FileExtension[File] /. Join[$Options["Icons"], {
10-
"wln" -> <svg class="w-4 h-5 text-gray-800" viewBox="2 0 20 24" stroke="currentColor" fill="rgb(153 246 228)" stroke-width="1"><path d="M8 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H8M8 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H8M8 4V20M12 11H16M12 8H16"></path></svg>
11-
,
12-
_ -> ""
13-
}];
14-
15-
Href = If[TrueQ[$Options["Selected"]],
16-
<div class="block rounded-md py-0 pr-0 text-sm leading-tight">
17-
<FileNameTake>
18-
<File/>
19-
</FileNameTake>
20-
</div>
21-
,
22-
If[MemberQ[Join[Keys[$Options["Icons"]], {"wln"}], FileExtension[File]],
23-
<a href="/folder/{URLEncode[File]}" class="block rounded-md py-0 pr-0 text-sm leading-tight">
14+
Href = If[TrueQ[OptionValue["Selected"]],
15+
<div class="block rounded-md py-0 pr-0 text-sm leading-tight">
2416
<FileNameTake>
2517
<File/>
26-
</FileNameTake>
27-
</a>
18+
</FileNameTake>
19+
</div>
2820
,
29-
<a href="{URLEncode[File]}" download="{URLEncode[FileNameTake[File]]}" class="block rounded-md py-0 pr-0 text-sm leading-tight">
30-
<FileNameTake>
31-
<File/>
32-
</FileNameTake>
33-
</a>
34-
]
35-
];
21+
If[MemberQ[Join[Keys[OptionValue["Icons"]], {"wln"}], FileExtension[File]],
22+
<a href="/folder/{URLEncode[File]}" class="block rounded-md py-0 pr-0 text-sm leading-tight">
23+
<FileNameTake>
24+
<File/>
25+
</FileNameTake>
26+
</a>
27+
,
28+
<a href="{URLEncode[File]}" download="{URLEncode[FileNameTake[File]]}" class="block rounded-md py-0 pr-0 text-sm leading-tight">
29+
<FileNameTake>
30+
<File/>
31+
</FileNameTake>
32+
</a>
33+
]
34+
],
35+
36+
p = OptionValue["Parameters"]
37+
38+
},
39+
40+
<div style="position: relative" class="{Selected} pb-0.5 pt-0.5 text-gray-700 dark:text-gray-400 flex flex-start items-center pl-7 gap-x-1 rounded-md">
41+
<div><Icon/></div>
42+
<Href/>
43+
<Dropdown Parameters={p} Filename={File} Port={Port}/>
44+
</div>
45+
46+
] ]
3647

48+
Options[Component] = {"File"->Null, "Selected"->Null, "Icons"->{}, "Parameters"-><||>};
3749

38-
<div style="position: relative" class="{Selected} pb-0.5 pt-0.5 text-gray-700 dark:text-gray-400 flex flex-start items-center pl-7 gap-x-1 rounded-md">
39-
<div><Icon/></div>
40-
<Href/>
41-
<Dropdown Parameters={$Options["Parameters"]} Filename={File} Port={Port}/>
42-
</div>
50+
Component

‎Components/Sidebar/Components/ItemList.wlx‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,52 @@
1-
Level = $Options["Level"];
2-
Class = StringJoin[$Options["Class"], " pl-", ToString[Level]];
3-
Path = $Options["Path"];
4-
RawPath = $Options["RawPath"];
5-
Current = $Options["Current"];
6-
Parameters = $Options["Parameters"];
71

8-
Icons = $Options["Icons"];
92

10-
Port = $Options["Port"];
3+
Dir = ImportComponent["ItemDirectory.wlx"];
4+
Fl = ImportComponent["ItemFile.wlx"];
5+
Pl = ImportComponent["ItemParent.wlx"];
116

12-
Dir := ImportComponent["ItemDirectory.wlx"];
13-
Fl := ImportComponent["ItemFile.wlx"];
14-
Pl := ImportComponent["ItemParent.wlx"];
157

16-
If[!DirectoryQ[Path], Path = DirectoryName[Path]];
8+
Component[OptionsPattern[]] := With[{
9+
Level = OptionValue["Level"],
10+
Class = StringJoin[OptionValue["Class"], " pl-", ToString[Level]],
11+
Path = If[!DirectoryQ[#], DirectoryName[#], #]& @ (OptionValue["Path"]),
12+
RawPath = OptionValue["RawPath"],
13+
Current = OptionValue["Current"],
14+
Parameters = OptionValue["Parameters"],
1715

18-
With[{
19-
Ul = Table[
20-
If[DirectoryQ[i],
21-
22-
<li class="list-none"><Dir Icons={Icons} Port={Port} Parameters={Parameters} Level={Level+1} File={i} Selected={SameQ[Current, i]}/></li>,
23-
<li class="list-none"><Fl Icons={Icons} Port={Port} Parameters={Parameters} File={i} Selected={SameQ[Current, i]}/></li>
24-
]
25-
, {i, Select[FileNames["*", Path], !StringMatchQ[#, ___~~".DS_Store"]&]}],
26-
27-
Extra =
28-
With[{
29-
parent = ParentDirectory[Path]
30-
},
31-
If[Level == 0 && StringQ[parent] && $Env["parent_folder"] =!= parent,
32-
<li class="list-none"><Pl RawPath={RawPath} File={parent}/></li>
33-
,
34-
""
16+
Icons = OptionValue["Icons"],
17+
Port = OptionValue["Port"]
18+
19+
},
20+
21+
22+
With[{
23+
Ul = Table[
24+
If[DirectoryQ[i],
25+
26+
<li class="list-none"><Dir Icons={Icons} Port={Port} Parameters={Parameters} ListComponent={Component} Level={Level+1} File={i} Selected={SameQ[Current, i]}/></li>,
27+
<li class="list-none"><Fl Icons={Icons} Port={Port} Parameters={Parameters} File={i} Selected={SameQ[Current, i]}/></li>
28+
]
29+
, {i, Select[FileNames["*", Path], !StringMatchQ[#, ___~~".DS_Store"]&]}],
30+
31+
Extra =
32+
With[{
33+
parent = ParentDirectory[Path]
34+
},
35+
If[Level == 0 && StringQ[parent] && $Env["parent_folder"] =!= parent,
36+
<li class="list-none"><Pl RawPath={RawPath} File={parent}/></li>
37+
,
38+
""
39+
]
3540
]
41+
},
42+
<ul class="p-0 {Class}">
43+
<Extra/>
44+
<Ul/>
45+
</ul>
3646
]
37-
},
38-
<ul class="p-0 {Class}">
39-
<Extra/>
40-
<Ul/>
41-
</ul>
42-
]
47+
48+
];
49+
50+
Options[Component] = {"RawPath"->Null, "Level"->Null, "Class"->"", "Current"->"", "Path"->"", "Parameters"-><||>, "Port"->"", "Icons"->""};
51+
52+
Component

0 commit comments

Comments
 (0)