Merge pull request #134 from kpinnipa/cell-saving

Cell saving and Snippet Preview

Author: jahn96

.DS_Store

@@ -3,7 +3,7 @@
     {
       "command": "codeSnippet:save-as-snippet",
       "keys": ["Accel Shift A"],
-      "selector": ".jp-Cell"
+      "selector": ".jp-Notebook"
     },
     {
       "command": "codeSnippet:save-as-snippet",

schema/settings.json

@@ -1 +1 @@
-{"name":"gdp_calculator","description":"Calculate total GDP, in trillions of dollars, by region, over time","language":"R","code":["gdp_regions <- nations %>%","  mutate(gdp = gdp_percap * population,","         gdp_tn = gdp/1000000000000) %>%","  group_by(region, year) %>%","  summarize(total_gdp_tn = sum(gdp_tn, na.rm = TRUE))",""],"id":11,"tags":["Countries Project"]}
+{"name":"gdp_calculator","description":"Calculate total GDP, in trillions of dollars, by region, over time","language":"R","code":["gdp_regions <- nations %>%","  mutate(gdp = gdp_percap * population,","         gdp_tn = gdp/1000000000000) %>%","  group_by(region, year) %>%","  summarize(total_gdp_tn = sum(gdp_tn, na.rm = TRUE))",""],"id":10,"tags":["Countries Project"]}

snippets/gdp_calculator.json

@@ -1 +1 @@
-{"name":"generate_hundred","description":"Scala program to print numbers from 1 to 100  using for loop with until to determine loop range.","language":"Scala","code":["object ExampleForLoop2 {","   def main(args: Array[String]) {","      var counter: Int=0;","      ","      for(counter <- 1 until 101)","        print(counter + \" \");","    ","      // to print new line","      println();","   }","}"],"id":13,"tags":["math"]}
+{"name":"generate_hundred","description":"Scala program to print numbers from 1 to 100  using for loop with until to determine loop range.","language":"Scala","code":["object ExampleForLoop2 {","   def main(args: Array[String]) {","      var counter: Int=0;","      ","      for(counter <- 1 until 101)","        print(counter + \" \");","    ","      // to print new line","      println();","   }","}"],"id":12,"tags":["math"]}

snippets/generate_hundred.json

@@ -1 +1 @@
-{"name":"life_exp_eur_asia","description":"Find countries in North America or Europe and Central Asia with a life expectancy in 2016 of 75 to 80.","language":"R","code":["eur_na_75_80 <- longevity %>%","  filter(life_expect > 75 & life_expect < 80 & (region == \"Europe & Central Asia\" | region == \"North America\")) %>%","  arrange(desc(life_expect))"],"id":9,"tags":["Countries Project"]}
+{"name":"life_exp_eur_asia","description":"Find countries in North America or Europe and Central Asia with a life expectancy in 2016 of 75 to 80.","language":"R","code":["eur_na_75_80 <- longevity %>%","  filter(life_expect > 75 & life_expect < 80 & (region == \"Europe & Central Asia\" | region == \"North America\")) %>%","  arrange(desc(life_expect))"],"id":8,"tags":["Countries Project"]}

snippets/life_exp_eur_asia.json

@@ -1 +1 @@
-{"name":"parallel_strings","description":"A simple queue function to generate four random strings in parallel.","language":"Python","code":["import multiprocessing as mp","import random","import string","","random.seed(123)","","# Define an output queue","output = mp.Queue()","","# define a example function","def rand_string(length, output):","    \"\"\" Generates a random string of numbers, lower- and uppercase chars. \"\"\"","    rand_str = ''.join(random.choice(","                        string.ascii_lowercase ","                        + string.ascii_uppercase ","                        + string.digits)","                   for i in range(length))","    output.put(rand_str)","","# Setup a list of processes that we want to run","processes = [mp.Process(target=rand_string, args=(5, output)) for x in range(4)]","","# Run processes","for p in processes:","    p.start()","","# Exit the completed processes","for p in processes:","    p.join()","","# Get process results from the output queue","results = [output.get() for p in processes]","","print(results)"],"id":8,"tags":["multiprocessing"]}
+{"name":"parallel_strings","description":"A simple queue function to generate four random strings in parallel.","language":"Python","code":["import multiprocessing as mp","import random","import string","","random.seed(123)","","# Define an output queue","output = mp.Queue()","","# define a example function","def rand_string(length, output):","    \"\"\" Generates a random string of numbers, lower- and uppercase chars. \"\"\"","    rand_str = ''.join(random.choice(","                        string.ascii_lowercase ","                        + string.ascii_uppercase ","                        + string.digits)","                   for i in range(length))","    output.put(rand_str)","","# Setup a list of processes that we want to run","processes = [mp.Process(target=rand_string, args=(5, output)) for x in range(4)]","","# Run processes","for p in processes:","    p.start()","","# Exit the completed processes","for p in processes:","    p.join()","","# Get process results from the output queue","results = [output.get() for p in processes]","","print(results)"],"id":16,"tags":["multiprocessing"]}

snippets/parallel_strings.json

@@ -1 +1 @@
-{"name":"progress_bar","description":"Create a progress bar.","language":"Python","code":["class ProgressBar():","    def __init__(self, width=50):","        self.pointer = 0","        self.width = width","","    def __call__(self,x):","         # x in percent","         self.pointer = int(self.width*(x/100.0))","         return \"|\" + \"#\"*self.pointer + \"-\"*(self.width-self.pointer)+\\","                \"|\\n %d percent done\" % int(x) "],"id":10,"tags":["Time"]}
+{"name":"progress_bar","description":"Create a progress bar.","language":"Python","code":["class ProgressBar():","    def __init__(self, width=50):","        self.pointer = 0","        self.width = width","","    def __call__(self,x):","         # x in percent","         self.pointer = int(self.width*(x/100.0))","         return \"|\" + \"#\"*self.pointer + \"-\"*(self.width-self.pointer)+\\","                \"|\\n %d percent done\" % int(x) "],"id":9,"tags":["Time"]}

snippets/progress_bar.json

@@ -1 +1 @@
-{"name":"sum_array","description":"Scala program of array. Declare, print, and calculate sum of all elements.","language":"Scala","code":["object ExampleArray1 {","    ","   def main(args: Array[String]) {","       ","      var numbers = Array(10,20,30,40,50);","      var N:Int=0;","      ","      //print all array elements","      println(\"All array elements: \");","      for ( N <- numbers ) {","         println(N);","      }","      //calculating SUM of all elements","      var sum: Int=0;","      for ( N <- numbers ) {","         sum+=N;","      }      ","      println(\"Sum of all array elements: \"+sum);","","   }","}"],"id":12,"tags":["math"]}
+{"name":"sum_array","description":"Scala program of array. Declare, print, and calculate sum of all elements.","language":"Scala","code":["object ExampleArray1 {","    ","   def main(args: Array[String]) {","       ","      var numbers = Array(10,20,30,40,50);","      var N:Int=0;","      ","      //print all array elements","      println(\"All array elements: \");","      for ( N <- numbers ) {","         println(N);","      }","      //calculating SUM of all elements","      var sum: Int=0;","      for ( N <- numbers ) {","         sum+=N;","      }      ","      println(\"Sum of all array elements: \"+sum);","","   }","}"],"id":11,"tags":["math"]}

snippets/sum_array.json

@@ -546,11 +546,19 @@ export class CodeSnippetDisplay extends React.Component<
   private _setPreviewPosition(id: string): void {
     const intID = parseInt(id, 10);
     const realTarget = document.getElementsByClassName(TITLE_CLASS)[intID];
+    const newTarget = document.getElementsByClassName(CODE_SNIPPET_ITEM)[intID];
     // distDown is the number of pixels to shift the preview down
-    let distDown: number = realTarget.getBoundingClientRect().top - 43;
-    if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
-      distDown = distDown - 66;
-    }
+    const distDown: number = realTarget.getBoundingClientRect().top - 43; //this is bumping it up
+    const elementSnippet = newTarget as HTMLElement;
+    const heightSnippet = elementSnippet.clientHeight;
+    const heightPreview = heightSnippet.toString(10) + 'px';
+    document.documentElement.style.setProperty(
+      '--preview-max-height',
+      heightPreview
+    );
+    // if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
+    //   distDown = distDown - 66; //this is bumping it up further if it's close to the end of the screen
+    // }
     const final = distDown.toString(10) + 'px';
     document.documentElement.style.setProperty('--preview-distance', final);
   }

src/CodeSnippetDisplay.tsx

@@ -163,12 +163,31 @@ function activateCodeSnippet(
     iconClass: 'some-css-icon-class',
     execute: () => {
       const highlightedCode = getSelectedText();
-
-      CodeSnippetInputDialog(
-        codeSnippetWidget,
-        highlightedCode.split('\n'),
-        -1
-      );
+      if (highlightedCode === '') {
+        //if user just right-clicks the whole cell to save
+        const curr = document.getElementsByClassName(
+          'jp-Cell jp-mod-selected'
+        )[1];
+        const text = curr as HTMLElement;
+        const textContent = text.innerText;
+        const arrayInput = textContent.split('\n');
+        const indexedInput = arrayInput.slice(1);
+        for (let i = 0; i < indexedInput.length; i++) {
+          for (let j = 0; j < indexedInput[i].length; j++) {
+            if (indexedInput[i].charCodeAt(j) === 8203) {
+              indexedInput[i] = '';
+            }
+          }
+        }
+        CodeSnippetInputDialog(codeSnippetWidget, indexedInput, -1);
+      } else {
+        CodeSnippetInputDialog(
+          codeSnippetWidget,
+          highlightedCode.split('\n'),
+          -1
+        );
+      }
+      // if highlightedCode is empty, check the code of the entire cell.
     }
   });
 

src/index.ts

@@ -1,5 +1,6 @@
 :root {
   --preview-distance: 0px;
+  --preview-max-height: 75px;
   --more-options-top: 0px;
   --more-options-left: 0px;
 }
@@ -178,9 +179,9 @@
   background: var(--jp-layout-color1);
   padding: 5px;
   width: 180px;
-  /*height: fit-content;
-  max-height: 150px;*/
-  height: 106px;
+  height: fit-content;
+  max-height: var(--preview-max-height);
+  /*height: 106px;*/
   box-sizing: border-box;
   box-shadow: var(--jp-elevation-z2);
   word-wrap: break-word;